CODEWITHSUNDEEP
javascriptjqueryfunction
Vincent Chua
Vincent Chua

Reputation: 1009

Jquery function?

Before writing any jquery they always recommend us using

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

and place all our code within this function, but I noticed certain tutorial use this instead

(function($){})(jQuery)

and 

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

what is the difference actually?

Upvotes: 1

Views: 316

Answers (4)

tb11
tb11

Reputation: 3106

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

1. This code wraps YOUR CODE in jQuery's on document ready handler. This makes sure all the HTML is loaded before you start running your script. Also, since YOUR CODE is part of an anonymous function (a closure), this keeps your global scope clean.

...

$(function(){ YOUR CODE });

2. This is the same thing as #1, just using shorthand.

...

(function($){ YOUR CODE })(jQuery)

3. This does not wrap anything in an on ready handler, so it'll run immediately, without regard to what HTML has been loaded so far. However, it does wrap YOUR CODE in an anonymous function, where you'll be able to reference the jQuery object with $.

...

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

4. This is the same thing as #3.

Upvotes: 4

Matyas
Matyas

Reputation: 13702

The first one makes the method run on document ready. Read more here.

(function($){/*Your code*/})(jQuery)

The last two encapsulate variable / function declarations in your code to a local scope, that gets as a prameter the jQuery object. This approach is used for not littering the global scope with declarations,ie localizing variables.

The difference between the last two is just that the first one delimits function with an extra set of parentheses, to make it visually more clear.

Basically this is how modules are constructed in javascript and making sure one block of code doesn't affect the other.

For more information here's a good article about js development patterns.

Example:

var f = function (str) {
   window.alert(str);
};

var name = "John Doe";

f();

Functionally is the same as 

(function (w) {
    var f = function (str) {
       w.alert(str);
    };

    var name = "John Doe";

    f();
})(window);

And as you can see, the first one creates variables in the global scope, that might affect other scripts, while the second one does everything locally. Moreover in the second example I did rename the reference to window, and made it available for the method through w. The same happens in your example as well.

Imagine having two js libraries that both use the alias shorthand $. You wouldn't know in your code where, which gets referenced. While on the other hand jQuery always references the jQuery library. And in your case the last two methods just make sure that $ is just a renamed jQuery object, and not anything else coming from another library.

Upvotes: 0

gion_13
gion_13

Reputation: 41533

The first one is executing the function as soon as the document is ready while the others are IIFE's that ensures jQuery can be accessed via it's alias sign $ within that function : 

var $ = 'other plugin';
(function($){
    alert($); // jQuery here
})(jQuery);

Upvotes: 0

EasyBB
EasyBB

Reputation: 6544

$(document).ready(function() {//when document is read

And 

$(function() {

are the same thing, the second is just short hand

You can also do 

$(window).load(function() {

//The window load event executes a bit later when the complete page is fully loaded, including all frames, objects and images.

(function($){})(jQuery)

is an Self-Executing Anonymous Function

So basically it’s an anonymous function that lets jQuery play nicely with other javascript libraries that might have $ variable/function. Also if you notice, all jQuery plugins code is wrapped in this anonymous function.

Upvotes: 2

Related Questions