带有jQuery的javascript中的匿名函数

Question

What is the difference between
I know here the global jQuery is passed as $ to function,

(function($){

})(jQuery);

and this one

$(function(){

})();

Answer 1

The second one is not a common pattern (it will throw a type error), unless you included the invoking parentheses by mistake:

(function($){
    // Normal IIFE that happens to pass jQuery in as an argument
})(jQuery);

$(function(){
    // Shorthand DOM-ready event handler
}); // <-- Remove the invoking parentheses

Answer 2

$(function(){ // Backbone code in here }); :

This is an alias to jQuery's “DOMReady” function which executes when the DOM is ready to be manipulated by your JavaScript code. This allows you to write code that needs the DOM, knowing that the DOM is available and ready to be read, written to, and otherwise modified by your application.

This is not a module, though. This is only a callback function passed in to the DOMReady alias. The major difference between a module and a callback, in this case, is that jQuery waits for the DOM to be ready and then calls the callback function at the appropriate time – all from the context of jQuery – while a module pattern or immediately invoking function executes immediately after it's defined. In the above examples, the module is receiving jQuery as a parameter, but this is not the same as using jQuery's DOMReady event because the module function is called, passing in jQuery as a parameter, immediately. It does not wait for the DOM to be ready. It executes as soon as the function has been parsed.

(function($) { // Backbone code in here })(jQuery);:

This is an immediately-invoking function expression (FKA “anonymous function”, “self-invoking function”, etc).

The implementation of this is a function that is immediately invoked by the calling (jQuery) parenthesis. The purpose of passing jQuery in to the parenthesis is to provide local scoping to the global variable. This helps reduce the amount of overhead of looking up the $ variable, and allows better compression / optimization for minifiers in some cases.

In this case, the function is being used as the JavaScript “module” pattern. Modules in the currently implemented version of JavaScript in most browsers, are not specific constructs like functions. Rather, they are a pattern of implementation that use an immediately invoking function to provide scope and privacy around a “module” of related functionality. It's common for modules to expose a public API – the “revealing module” pattern – by returning an object from the module's function. But at times, modules are entirely self-contained and don't provide any external methods to call.

check this

Answer 3

$(function(){

});

This is just the shorthand for the DOM-ready event handler, which is the equivalent of:

$(document).ready(function(){
    // execution when DOM is loaded...
});

Now over to this:

(function($){
    // code here
})(jQuery);

This code will not be executed on DOM ready, but it will be executed directly. What the advantage is to pass jQuery as a parameter into the function, is to avoid collisions with the usage of the dollar symbol ( $ ), as multiple libraries use it as a shorthand reference. Everything inside the function can safely use $ , as this is being passed in as a reference to jQuery .

Read more about conflicts on the $ symbol: jQuery noConflict

If you combine the two code snippets, you get a nice and solid setup:

// $ reference is unsafe here in the global scope if you use multiple libraries   

(function($){
    // $ is a reference to jQuery here, passed in as argument

    $(function(){
        // executed on dom-ready
    });

})(jQuery);

PS : Because function in JavaScript can be both a statement or an expression, depending upon context, most people add extra parenthesis around it to force it to be an expression.

Answer 4

The first snipset will execute the "function($){...}" as js parser encounter it, creating a kind of private context inside it where $ argument var will point to jQuery because it is passed as argument "(jQuery)" (Useful if you want to avoid any collision with a previously declared $ var which would reference something else than the jQuery object)

The second one looks like JQuery.ready function call but with a syntax error. There is two way for writing it actualy

$(document).ready(function(){
     /* DOM has loaded */
});

$(function(){
    /* DOM has loaded */
});

Answer 5

(function ($)

})(jQuery); 

it a function being defined and then immediately called, with the JQuery object passed in as an argument. The $ is a reference to JQuery which you can then use inside the function. It's equivalent to this:

var Test = function ($){};
Test(jQuery);

and this:

$(function (){

});

is a call to JQuery, passing in a function which it should execute once the document has finished loading.