javascript - $(document).ready shorthand - Stack Overflow

admin管理员组

文章数量:1127989

Is the following shorthand for $(document).ready?

(function($){

//some code

})(jQuery);

I see this pattern used a lot, but I'm unable to find any reference to it. If it is shorthand for $(document).ready(), is there any particular reason it might not work? In my tests it seems to always fire before the ready event.

Is the following shorthand for $(document).ready?

(function($){

//some code

})(jQuery);

I see this pattern used a lot, but I'm unable to find any reference to it. If it is shorthand for $(document).ready(), is there any particular reason it might not work? In my tests it seems to always fire before the ready event.

• javascript
• jquery
• document-ready
• shorthand

Share Improve this question Follow edited Jul 18, 2012 at 0:12 ajax333221 11.7k1616 gold badges6262 silver badges9595 bronze badges asked May 14, 2011 at 18:57 Mark BrownMark Brown 12.5k88 gold badges2929 silver badges3232 bronze badges 2

• Any variable defined inside the mentioned pattern function (e.g. var somevar;) will not change the contents of variables of the same name outside of the function – Timo Huovinen Commented Dec 16, 2013 at 12:42
• 3 The code has the effect of ensuring $ represents jQuery within that function block so the code is portable to places where the $ alias for jQuery is disabled or defined as something else. – AsksAnyway Commented Mar 22, 2014 at 18:56

Add a comment  | 

8 Answers 8

Sorted by: Reset to default 595

The shorthand is:

$(function() {
    // Code here
});

The shorthand for $(document).ready(handler) is $(handler) (where handler is a function). See here.

The code in your question has nothing to do with .ready(). Rather, it is an immediately-invoked function expression (IIFE) with the jQuery object as its argument. Its purpose is to restrict the scope of at least the $ variable to its own block so it doesn't cause conflicts. You typically see the pattern used by jQuery plugins to ensure that $ == jQuery.

The correct shorthand is this:

$(function() {
    // this behaves as if within document.ready
});

---

The code you posted…

(function($){

//some code

})(jQuery);

…creates an anonymous function and executes it immediately with jQuery being passed in as the arg $. All it effectively does is take the code inside the function and execute it like normal, since $ is already an alias for jQuery. :D

Even shorter variant is to use

$(()=>{

});

where $ stands for jQuery and ()=>{} is so called 'arrow function' that inherits this from the closure. (So that in this you'll probably have window instead of document.)

This is not a shorthand for $(document).ready().

The code you posted boxes the inside code and makes jQuery available as $ without polluting the global namespace. This can be used when you want to use both prototype and jQuery on one page.

Documented here: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/#use-an-immediately-invoked-function-expression

The multi-framework safe shorthand for ready is:

jQuery(function($, undefined) {
    // $ is guaranteed to be short for jQuery in this scope
    // undefined is provided because it could have been overwritten elsewhere
});

This is because jQuery isn't the only framework that uses the $ and undefined variables

These specific lines are the usual wrapper for jQuery plugins:

"...to make sure that your plugin doesn't collide with other libraries that might use the dollar sign, it's a best practice to pass jQuery to a self executing function (closure) that maps it to the dollar sign so it can't be overwritten by another library in the scope of its execution."

(function( $ ){
  $.fn.myPlugin = function() {
    // Do your awesome plugin stuff here
  };
})( jQuery );

From http://docs.jquery.com/Plugins/Authoring

What about this?

(function($) { 
   $(function() {
     // more code using $ as alias to jQuery
     // will be fired when document is ready
   });
})(jQuery);

本文标签： javascript(document)ready shorthandStack Overflow