Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the benefit of inline function calls?

I saw this code (explicly it's in jQuery, with modification)

(function(window,undefined){
    var jQuery=(function(){
        var jQuery=something;
        jQuery.xxx=xxx;
        //...
        return jQuery;
    })();
    //...
    window.jQuery=window.$=jQuery;
})(window);

While I understand wrapping code in a inline function call can clearly define the variable scope, I don't understand the benefits of

  1. passing window with a parameter instead of using it directly,
  2. getting an instance of undefined by a undefined parameter, and also
  3. defining jQuery by the return value of another inline function call. Can somebody explain a bit?

EDIT write #3 more clearly:

What I understand is that the code defines jQuery inside another function then return it.

//(function(window,undefined){
var jQuery=(function(){
    // Inside this function defines jQuery and return it?
    var jQuery=function(selector,context){
        return new jQuery(selector,context); //simplified
    };
    jQuery.xxx=xxx;
    //...
    return jQuery;
})(); // This executes the inline function and assign `jQuery` with the return value???
//... })(window);

This is more like the following:

function define_jQuery(){
    // Inside this function defines jQuery and return it?
    var jQuery=function(selector,context){
        return new jQuery(selector,context); //simplified
    };
    jQuery.xxx=xxx;
    //...
    return jQuery;
}

//(function(window,undefined){
var jQuery=define_jQuery(); // This executes the inline function and assign `jQuery` with the return value???
//... })(window);

Wouldn't it be more simpler to do:

//(function(window,undefined){
var jQuery=function(selector,context){
    return new jQuery(selector,context); //simplified
};
jQuery.xxx=xxx;
//...
//... })(window);
like image 729
Alvin Wong Avatar asked Jul 03 '12 04:07

Alvin Wong


1 Answers

Answering these questions each separately:

  1. Why window passed in? Because dereferencing a variable in JavaScript is painful. Passing in an instance means you don't have to. Typically the mechanism looks like this:

    (function (window, document, $) {
    }(window, window.document, jQuery));
    

    In this scenario, one need not go to the global scope to dereference any of these three (and jQuery can be in .noConflict() to boot).

  2. This is valid JavaScript: undefined = 2;. I grant that is very foolish, but it is possible. But if one accepts one more argument in a function than is passed, one is confident it is truely undefined and not a hacked copy of it.

  3. Returning jQuery from a previous function allows method chaining: $('#sel').func1().func2(). This is possible because func1 probably looks something like this:

    jQuery.fn.func1 = function () {
        return $(this).each(function () {
            // do something fabulous
        };
    };
    

return $(this).bla_de_bla() is short-hand for:

    $(this).bla_de_bla(..);
    return $(this);

It also presumes that .bla_de_bla() also returns $(this)

EDIT: modified #3 to note that it's best at chaining rather than circumnavigating around .noConflict() and mis-named $.

like image 108
robrich Avatar answered Sep 18 '22 12:09

robrich