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.
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 );
What about this?
(function($) {
$(function() {
// more code using $ as alias to jQuery
// will be fired when document is ready
});
})(jQuery);
