Question

Is this jQuery code

(function(jQuery){
})(jQuery);

equivalent to

$(document).ready(function () {
});

If yes, what are the differences between the two? If not, what does the first do?

EDIT:

Thanks everybody. Most response are similar with different flavours and sample

Answer 1

Absolutely not, the first one is a self-executing anonymous function and the second is the ready handler.

(function(jQuery){
  //jQuery in this scope is referencing whatever is passed-in
})(jQuery);

So, the jQuery inside of the function isn t necessarily the same jQuery outside the function. But you typically do not want to mix-n-match global variable names with local ones.

Take this example:

(function(obj) {
   alert(obj);
})( Hello );

This defines a function, then immediately invokes it, passing in "Hello"

Answer 2

They are not equivalent.

Your first example is an Immediately-Invoked Function Expression (IIFE). It creates a closure around locally defined variables.

Your second example specifies a function to execute when the DOM is fully loaded. It is used to ensure that all element nodes in the DOM are available before executing the enclosed code. This is also a closure.

Both examples use anonymous functions.

It is worth pointing out that it is good practice to use both of your examples, like so:

(function($){
    // locally-scoped, DOM-is-NOT-Ready-code here.
    $(function () {
        // your locally-scoped, DOM-is-ready-code here.
    });
}(jQuery)); // note that I ve moved the invocation into the parens
            // that contain the function.  This makes JSLint happy!

Answer 3

$(document).ready(function () {

});

is equivalent to this:

$(function() {

});

The first snippet is an immediately invoked anonymous function which creates a local scope:

(function() {
    var x = 2;
})();

alert(x); // undefined

Answer 4

No. The first one isn t really doing much. Just separating any variables inside from the surrounding scope, and creating a local jQuery variable inside.

The second one passes a function that is run after the DOM is ready (in other words after the <body> has loaded).

A common equivalent to:

$(document).ready(function () {
});

is:

$(function () {
});

which does the same thing.

While this:

(function(jQuery){
})(jQuery);

is often written as:

(function($){
})(jQuery);

so that the $ variable is no longer a global variable. Useful if the global $ variable is already in use.

Answer 5

Not at all. The first one is a closure - a function that you create and then immediately call. However, typically you would combine the two like this:


  (function($) {
    // use the $ variable
    $(document).ready(function(){
      // ...
    });
  })(jQuery);

By creating the closure you are renaming "jQuery" to "$" just locally for that block of code. The reason why you use the closure syntax is so that you can use the $ variable even though it might not be defined as a jQuery object in the global scope (i.e. some JavaScript frameworks like prototype use $ as a variable).

Whenever you write a jQuery plugin you should enclose all jQuery code in this kind of closure so it doesn t interfere with any other JavaScript frameworks. If you aren t writing plugins and you don t use any other JavaScript frameworks you probably don t have to bother enclosing your code in a closure.

友情链接