self executing function jquery vs javascript diffe

问题:

What are the difference among -

First :-

(function () {

    var Book = 'hello';

}());

Second:-

(function () {

    var Book = 'hello';

})();

First and second are similar some how in work..

Third :-

(function ($) {

    var Book = 'hello';

})(jQuery);

What pattern I need to use and where in my coding.. Third module pattern I have seen while I was reading a article related to backboneJS.

What I understood from Third one "self executing function with the argument “jQuery”" ....

Can any please give me some idea about Immediately Invoked Function Expressions (IIFE).

Thanks !!

回答1:

In all cases you are doing an anonymous function. I think 1 is the same as 2. In the third case you are passing jQuery as an argument. This is done when you want to encapsulate jQuery within your function's scope.

For instance, in your application, jQuery var could be jQuery. But within your anonymous function you may want to use it as $.

(function ($) {
    //Here jQuery is $
    var Book = $(document.body).text();    

})(jQuery);

//Out of your function, you user jQuery as jQuery (in this example)
var Book = jQuery(document.body).text();

回答2:

This is called a closure to avoid conflicts with other libraries such as mootools which are using $. This way you can ensure to use $ in that function with passing jQuery as a param.

(function ($) {
   $(function () { // Here in this block you can use '$' in place of jQuery
    .......
   });
})(jQuery); //<----passing jquery to avoid any conflict with other libraries.

回答3:

Immediately-invoked function expressions (IIFE) is one of the core JavaScript features. Its main aim is not to clutter the namespaces with disposable functions and variables.

if you use a variable or a function only once, you don't need to make it available for the rest of the code (therefore you make a private access, for example). In case of functions, you may just let them be anonymous, just like the following:

(function(){
  console.log("Hello symfony world!");
}());

Please check with this link

回答4:

As the other answers pointed out they are all self executing anonymous function or immediate anonymous functions.

The third example is use to create aliases for variables outside the function. This is a good way to prevent name conflicts and creating code where it's possible to easily change a module used in the function. It's essentially a form of dependency injection.

(function (doc, win, $, myModule) {
    // Code
}(document, window, jQuery, window.MYAPP.myModule));

doc, win, $ and myModule are injected variables. With this pattern it's trivial to change any of the injected components. Like this

(function (doc, win, $, myModule) {
    // Code
}(document, window, jQuery, window.MYAPP.myModule2)); //Use myModule2 instead myModule

回答5:

Like every other answer has said, in the third function you are passing JQuery to the function.

I would like to take a moment and explain why the first two are the same.

When you create a function, the name of that function is really a function pointer. For instance, in function foo(){}, foo is a pointer to the function that you just made (which explains stuff like this). You dereference that pointer (and thus execute the function) by adding parenthesis at the end of the function name: foo().

So if we look at that code again, in number one, first you create the function:

function () {

    var Book = 'hello';

}

And then you dereference it, effectively executing the function: ()

In the second example, you surround the entirety of the function creation in parenthesis:

(function () {

    var Book = 'hello';

})

This ensures that you perform the creation operation before your next command, which is to dereference the function again: (). The parenthesis in this case are not really necessary, as the function will be created before it is executed anyway.

回答6:

All three examples are Immediately Invoked Function Expressions (IIFE).

The only difference is that in the third example jQuery is being passed in as a variable allowing you to use it within the IIFE using its dollar naming convention. e.g.

(function ($) {
  var Book = 'hello';
  $('#bookelement').html(Book);
})(jQuery);

回答7:

These all are self executing functions. Now days also known as Immediately Invoked Function Expressions (IIFE).

First two are exactly same with slightly different syntax and third is passing a parameter as jQuery object.

回答8:

In fact, all three are self executing function's and ti really depends on what you are needing to do.

The only difference between is between 3. 1 and 2 are the same.

The difference with 3 is that you are passing a reference to jquery as an argument. Now all functions inside this annoyomus function have access to jque

回答9:

All of these are example of self invoking function.

This will give you a clear view:-

var my_func = function(){
    var internal_var = "Hello";
    return internal_var;
};

var my_func2 = function(name){
    var internal_var = "Hello";
    return internal_var;
};

var long_var_name = "I can be some object or number or object or array";

var result1 = (my_func());
var result2 = (my_func)();
var result3 = (my_func2)(long_var_name);

console.log(result1, result2, result3);

Using this example you can compare it with the First, Second and Third method.