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.
This question is related to
javascript
jquery
document-ready
shorthand
What about this?
(function($) {
$(function() {
// more code using $ as alias to jQuery
// will be fired when document is ready
});
})(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
.)
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 );
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
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 shorthand is:
$(function() {
// Code here
});
Source: Stackoverflow.com