Switching from functional jQuery code to object-oriented I've been happily using jQuery, creating vars and binding events in my modules (which have only a little bit of JS). But recently I needed to add an anonymous functions to my code and after investigating some more, I learned about modular patterns and encapsulation.

So what I'm trying to teach myself is to write clean, fast and maintainable JavaScript code in object-oriented fashion (as opposed to "functional" jQuery code before).

My module inserts a search box (input) that uses Ajax and displays drop-down results.

What I want to have is a template file with the search box other necessary elements;
Then the most flexible way would be to pass the elements to the code in JavaScript file - I could easily adjust settings in the same file if I decide to change IDs or the elements.

Then there should be a separate file with the actual code; It should make no presumptions about the elements of the page.

I follow this article:

http://esbueno.noahstokes.com/post/77292606977/self-executing-anonymous-functions-or-how-to-write

These are my thoughts and what I would like to know:


Is this structure written correctly to accomplishing this task?
Is the anonymous function (self-executing one) being used correctly here?
Is there anything to be optimized (maybe I'm "overkilling" something)?
Is $.proxy used correctly?
I to use an object to defined methods, however, I cant think of a way to only expose a public method. Is writing non-objective (simple enclosed vars and functions) the way to go?


search_box.tpl

&lt;script type="text/javascript" src="autosearch.js"&gt;&lt;/script&gt;

&lt;form&gt;
    &lt;input id="search-1" type="search"&gt;
&lt;/form&gt;

&lt;script type="text/javascript"&gt;
    AutoSearch.init({
        input  : $('#search-1'),
        option2: ''
    });
&lt;/script&gt;


autosearch.js

var AutoSearch = (function($) {

    var search = {

        cache: {},
        bindEvents: function(){
           this.input.on('keyup', $.proxy(this.processInput, this));
        },
        processInput: function(){ alert(this.input.val()); },

        init: function(options) {
            this.input = options.input;

            this.bindEvents();
        }
    }

    return search;

    })(jQuery);
Your mistake is in your processInput() function, it is not created as part of the search object and is invalid syntax the way you have it written.

I try to avoid private functions in javascript as it makes them difficult to test, but if you really wanted to have private functions, you could write your module like this:

var AutoSearch = (function () {
    "use strict";

    // private
    var my = {},
        input;

    // private
    function processInput() {
        alert(input.val());
    }

    // private
    function bindEvents() {
        input.on('keyup', processInput());
    }

    // public
    my.init = function (options) {
        input = options.input;
        bindEvents();
    };

    return my;
}());


It's not obvious to me that you need jQuery or .proxy() at this point, since all the data and functions for the event handler are inside the closure.