Syntaxe des fonctions de fermeture JavaScript / jQuery

Question

Quelqu'un peut-il expliquer les différences entre les fonctions suivantes ?

(function($){
  // can do something like 
  $.fn.function_name = function(x){};

})(jQuery);

Puis-je utiliser jQuery dans la fonction suivante ?

(function(){

}());

Et ce qui suit est la même chose que jquery.ready() ?

$(function(){

});

Merci !

Answer 1

---

(function($){
  // can do something like 
  $.fn.function_name = function(x){};

})(jQuery);

C'est une fonction anonyme auto-exécutoire qui utilise $ en argument afin que vous puissiez l'utiliser ( $ ) au lieu de jQuery à l'intérieur de cette fonction et sans crainte d'entrer en conflit avec d'autres bibliothèques car dans d'autres bibliothèques aussi $ a une signification particulière. Ce modèle est particulièrement utile lors de l'écriture de plugins jQuery.

Vous pouvez y écrire n'importe quel caractère à la place de $ aussi :

(function(j){
  // can do something like 
  j.fn.function_name = function(x){};

})(jQuery);

Ici j rattrapera automatiquement le jQuery spécifié à la fin (jQuery) . Ou vous pouvez omettre complètement l'argument mais alors vous devrez utiliser jQuery tout autour au lieu de $ sans crainte de collision encore. Donc $ est enveloppé dans l'argument pour faire court afin que vous puissiez écrire $ au lieu de jQuery tout autour à l'intérieur de cette fonction.

---

(function(){

}());

Il s'agit à nouveau d'une fonction anonyme auto-exécutrice, mais sans argument, qui s'exécute et s'appelle elle-même en raison de la fonction () à la fin.

Ce modèle s'avère extrêmement utile dans certaines situations. Par exemple, disons que vous voulez exécuter un morceau de code après 500 milli secondes à chaque fois, vous opteriez naturellement pour setInterval .

setInterval(doStuff, 500);

Mais si doStuff prend plus de 500 millisecondes pour faire ce qu'elle fait ? Vous obtiendriez des résultats inattendus mais setInterval continuera à appeler cette fonction encore et encore à un moment précis, indépendamment du fait que doStuff terminé.

C'est là que le motif entre en jeu et vous pouvez faire la même chose avec setTimeout en combinaison avec une fonction anonyme auto-exécutoire et d'éviter mauvais setInterval comme ça :

(function foo(){
   doStuff;

   setTimeout(foo, 500);

})()

Ce code va également se répéter encore et encore, à une différence près. setTimeout ne sera jamais déclenché, sauf si doStuff est terminé. Une bien meilleure approche que l'utilisation de mauvais setInterval .

Vous pouvez le tester ici.

Notez que vous pouvez également écrire une fonction anonyme auto-exécutrice comme ceci :

function(){
  // some code
}();

En utilisant des accolades supplémentaires autour (comme avant function mot-clé) est simplement convention de codage et peut être vu dans les écrits de Crackford, jQuery et ailleurs.

---

$(function(){

});

C'est la syntaxe abrégée de ready handler :

$(document).ready(function(){

});

Plus d'informations :

• Comment fonctionnent les fonctions anonymes auto-exécutées

Answer 2

Je sais que cette question est ancienne, mais je suis tombée dessus tout de suite et d'autres personnes aussi. Je voulais juste souligner que, bien que la réponse de Sarfraz soit excellente, il faut dire que non, écrire un livre sur l'histoire de l'humanité n'est pas une bonne idée. fonction auto-exécutoire et anonyme entre accolades est pas a convention de codage .

function(){
  // some code
}();

Ne fonctionne pas et donne un SyntaxError parce que la fonction est analysée comme un FunctionDeclaration et le nom de la fonction n'est pas facultatif dans ce cas.

D'autre part, le Opérateur de groupement s'assure que le contenu est évalué comme un FunctionExpression .

Voir : Expliquez la syntaxe des fonctions anonymes encapsulées de JavaScript.