web-dev-qa-db-fra.com

fonction auto-exécutante jquery vs différence javascript

Quelle est la différence entre -

Premier :-

(function () {

    var Book = 'hello';

}());

Seconde:-

(function () {

    var Book = 'hello';

})();

La première et la seconde ressemblent quelque peu au travail ..

Troisième :-

(function ($) {

    var Book = 'hello';

})(jQuery);

Quel modèle dois-je utiliser et où dans mon codage? Troisième modèle de module que j'ai vu en lisant un article relatif à backboneJS.

Ce que j'ai compris de la troisième "fonction à exécution automatique avec l'argument" jQuery "" ....

Pouvez-vous me donner une idée des expressions de fonction immédiatement appelées (IIFE).

Merci !!

javascriptjqueryiife
41
Javascript Coder

Dans tous les cas, vous faites une fonction anonyme. Je pense que 1 est identique à 2 . Dans le troisième cas, vous passez jQuery comme argument. Ceci est fait lorsque vous souhaitez encapsuler jQuery dans la portée de votre fonction.

Par exemple, dans votre application, jQuery var pourrait être jQuery. Mais dans votre fonction anonyme, vous voudrez peut-être l'utiliser comme $.

(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();
29
Jorgeblom

Cela s'appelle une fermeture pour éviter les conflits avec d'autres bibliothèques telles quemootoolsqui utilisent $. De cette façon, vous pouvez vous assurer d'utiliser $ dans cette fonction en passant jQuery en tant que paramètre.

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

Les expressions de fonction appelées immédiatement (IIFE) sont l’une des fonctionnalités JavaScript essentielles. Son objectif principal n'est pas d'encombrer les espaces de noms de fonctions et de variables à usage unique. 

si vous utilisez une variable ou une fonction une seule fois, vous n'avez pas besoin de la rendre disponible pour le reste du code (par conséquent, vous créez un accès privé, par exemple). En cas de fonctions, vous pouvez simplement les laisser être anonymes, comme ceci: 

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

S'il vous plaît vérifier avec ce lien

7
Neil

Comme les autres réponses l'ont souligné, il s'agit de fonctions anonymes à exécution automatique ou de fonctions anonymes immédiates.

Le troisième exemple est utilisé pour créer des alias pour des variables extérieures à la fonction. C'est un bon moyen d'éviter les conflits de noms et la création de code permettant de modifier facilement un module utilisé dans la fonction. C'est essentiellement une forme d'injection de dépendance.

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

doc, win, $ et myModule sont des variables injectées. Avec ce modèle, il est facile de changer l’un des composants injectés. Comme ça

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

Comme toutes les réponses l'ont dit, dans la troisième fonction, vous passez JQuery à la fonction.

J'aimerais prendre un moment pour expliquer pourquoi les deux premiers sont identiques.

Lorsque vous créez une fonction, le nom de cette fonction est en réalité un pointeur fonction. Par exemple, dans function foo(){}, foo est un pointeur sur la fonction que vous venez de créer (ce qui explique des choses comme this ). Vous déréférenciez ce pointeur (et exécutez ainsi la fonction) en ajoutant des parenthèses à la fin du nom de la fonction: foo(). 

Donc, si nous regardons à nouveau ce code, dans le numéro un, vous créez d'abord la fonction:

function () {

    var Book = 'hello';

}

Et puis vous déréférencez, en exécutant efficacement la fonction: ()

Dans le deuxième exemple, vous entourez l'intégralité de la création de fonction entre parenthèses:

(function () {

    var Book = 'hello';

})

Cela garantit que vous effectuez l'opération de création avant votre prochaine commande, qui consiste à déréférencer à nouveau la fonction: (). Dans ce cas, les parenthèses ne sont pas vraiment nécessaires, car la fonction sera créée avant qu'elle ne soit exécutée.

4
MirroredFate

Les trois exemples sont Expressions de fonction immédiatement appelées ( IIFE ).

La seule différence est que dans le troisième exemple, jQuery est transmis en tant que variable vous permettant de l'utiliser dans le système IIFE en utilisant sa convention de dénomination en dollars. par exemple.

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

Ce sont toutes des fonctions auto-exécutables. De nos jours, il est également connu sous le nom d'expressions de fonctions immédiatement appelées (IIFE). 

Les deux premiers sont exactement les mêmes avec une syntaxe légèrement différente et le troisième passe une parameter en tant qu’objet jQuery. 

1
Gurpreet Singh

Tous ces exemples sont des exemples de fonction invoquant soi-même. 

Cela vous donnera une vue claire: -

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);

En utilisant cet exemple, vous pouvez le comparer avec la méthode First , Second et Third .

0
Deepak Dixit

En fait, tous les trois sont des fonctions à exécution automatique et cela dépend vraiment de ce que vous devez faire.

La seule différence entre est entre 3. 1 et 2 sont les mêmes.

La différence avec 3 est que vous passez une référence à jquery en tant qu'argument. Maintenant, toutes les fonctions de cette fonction annoyomus ont accès à jque

0
Jamie Hutber