Question

I am working on maintaining a ASP.NET MVC application that has the following coding style. The view has:

<script type="text/javascript">

    $(document).ready(function() {

        SAVECUSTOMERS.init();
    });
</script>

There is a js file included that goes along these lines:

var SAVECUSTOMERS = (function() {

    init = function () {

        $("#saveCust").bind("click", OnSave);
        $("#cancel").bind("click", OnCancel);

    },

    OnSave= function() {

        //Save Logic;

    },

    OnCancel = function() {
                //Cancel logic;

    }

    return { init: init };

})();

1. Is this a best practices JS coding style? Is the intent to have non obtrusive JS?
2. What is the SAVECUSTOMERS? I understand that there are different ways of creating classes in javascript (per this link), but this style does not fall into any of those categories listed
3. Where can I find more information on this style of JS coding?

Answer 1

1) Using a $(document).ready (or similar function from another library) function is considered standard practice in JavaScript. First of all, it ensures your JavaScript executes on page that has finished evaluating/building it’s DOM. And it also abstracts away some of the browser-implementation inconsistencies when identifying when the DOM is in fact ready. But I assume you are mainly referring to the 2nd code block.

What you see there is that SAVECUSTOMERS is assigned the result of a self-executing an anonymous function. This is done for a few reasons, the most common being the ability to control the scope and ‘namespace’ of the functions and data inside the anonymous function. This is because JavaScript has lexical scope, and not block level scope.

The practice of using these self-invoking functions in JavaScript is very common

However the code itself has several problems. The variables init, OnSave and OnCancel are declared as global variables (because the var keyword was omitted). This largely defeats the purpose of wrapping them in an self-invoking function. Furthermore, the contents of that function are using a mix of object assignment syntax and standard expression syntax, which will result in syntax errors.

Also, by returning only the init function, the onSave and onCancel functions have been effectively ‘hidden’ or made ‘private’ through the use of closures. This helps keep namespaces clean and encapsulated.

If I were writing this code (some personal perferences here, there are a few ways to accomplish something simliar), then it would look like this:

var SaveCustomers = (function($) {
    var init = function () {
        $("#saveCust").bind("click", onSave);
        $("#cancel").bind("click", onCancel);
    };

    var onSave = function() {
        //Save Logic;
    };

    var onCancel = function() {
        //Cancel logic;
    }

    return { init: init };

})(jQuery);

Some notes on the above:

• I declare variables using the var keyword. This keeps their scope local to this function (you could also technically use named functions declarations as well)

• I pass jQuery as the parameter in the self-invoking function, and assign it to $ as the argument in the function call. This protects the $ variable inside the function so that we know it references jQuery, and hasn’t been munged by a secondary library that also uses $.

2) SAVECUSTOMERS is a basic JavaScript object, which has a single owned property called ‘init’, whose value is a function, as defined by the init declaration inside the execution.

3) Not sure about how to answer this question – your best bet for understanding JavaScript best practices is to read through other JavaScript code that is known to be of quality, such as the jQuery source, or Prototype, or Underscore, etc.