Comment fonctionne la syntaxe JavaScript/jQuery suivante : (function( window, undefined ) { })(window) ?

Question

Avez-vous déjà jeté un coup d'œil sous le capot de l'appareil ? jQuery 1.4 et j'ai remarqué que le code source est encapsulé de la manière suivante :

(function( window, undefined ) {

  //All the JQuery code here 
  ...

})(window);

J'ai lu un article sur Espaces de noms JavaScript et un autre appelé " Une paire de parens importante donc je sais un peu ce qui se passe ici.

Mais je n'ai jamais vu cette syntaxe particulière auparavant. Quelle est cette undefined fait là-bas ? Et pourquoi est-ce que window doivent être passés et réapparaître à la fin ?

Answer 1

L'indéfini est une variable normale et peut être changé simplement avec undefined = "new value"; . Ainsi, jQuery crée une variable locale "undefined" qui est VRAIMENT indéfinie.

La variable de la fenêtre est rendue locale pour des raisons de performance. En effet, lorsque JavaScript recherche une variable, il passe d'abord par les variables locales jusqu'à ce qu'il trouve le nom de la variable. S'il ne le trouve pas, JavaScript passe par la portée suivante, etc. jusqu'à ce qu'il filtre les variables globales. Ainsi, si la variable de la fenêtre est rendue locale, JavaScript peut la rechercher plus rapidement. Plus d'informations : Accélérez votre JavaScript - Nicholas C. Zakas

Answer 2

Indéfini

En déclarant undefined en tant qu'argument, mais sans jamais lui transmettre de valeur, garantit qu'elle est toujours indéfinie, car il s'agit simplement d'une variable dans la portée globale qui peut être écrasée. Cela rend a === undefined une alternative sûre à typeof a == 'undefined' ce qui permet de gagner quelques caractères. Cela rend également le code plus facile à minifier, puisque undefined peut être raccourci en u par exemple, en économisant quelques caractères supplémentaires.

Fenêtre

Passing window comme argument conserve une copie dans la portée locale, ce qui affecte les performances : http://jsperf.com/short-scope . Tous les accès à window devra désormais remonter un niveau de moins dans la chaîne des responsabilités. Comme pour undefined une copie locale permet à nouveau une minification plus agressive.

---

Sidenote :

Bien que cela n'ait pas été l'intention des développeurs de jQuery, le fait de passer en window permet à la bibliothèque d'être plus facilement intégrée dans des environnements Javascript côté serveur, par exemple node.js - où il n'y a pas de window objet. Dans une telle situation, une seule ligne doit être modifiée pour remplacer l'objet window avec un autre objet. Dans le cas de jQuery, un objet fantaisie window peut être créé et transmis dans le but de faire du scraping HTML (une bibliothèque telle que jsdom peut le faire).

Answer 3

D'autres ont expliqué undefined . undefined est comme une variable globale qui peut être redéfinie à n'importe quelle valeur. Cette technique permet d'éviter que toutes les vérifications d'indéfinition ne se brisent si quelqu'un écrivait par exemple , undefined = 10 quelque part. Un argument qui n'est jamais passé est garanti comme étant réel. undefined quelle que soit la valeur de la variable undefined .

La raison de passer la fenêtre peut être illustrée par l'exemple suivant.

(function() {
   console.log(window);
   ...
   ...
   ...
   var window = 10;
})();

Qu'est-ce que la console enregistre ? La valeur de window objet droit ? Faux ! 10 ? Faux ! Il enregistre undefined . L'interpréteur Javascript (ou le compilateur JIT) le réécrit de cette manière : -.

(function() {
   var window; //and every other var in this function

   console.log(window);
   ...
   ...
   ...
   window = 10;

})();

Cependant, si vous obtenez le window comme argument, il n'y a pas de var et donc pas de surprise.

Je ne sais pas si jQuery le fait, mais si vous redéfinissez window une variable locale n'importe où dans votre fonction pour n'importe quelle raison, c'est une bonne idée de l'emprunter à la portée globale.

Answer 4

window est transmis comme ça, juste au cas où quelqu'un déciderait de redéfinir l'objet fenêtre dans IE, je suppose qu'il en va de même pour l'objet undefined au cas où il serait réaffecté d'une manière ou d'une autre plus tard.

Le sommet window dans la mesure où script ne fait que nommer l'argument "window", un argument plus local que l'argument global "window". window et c'est ce que le code à l'intérieur de cette fermeture va utiliser. Le site window à la fin spécifie en fait ce qu'il faut passer comme premier argument, dans ce cas la signification actuelle de window ...l'espoir est que vous n'avez pas foiré window avant que cela n'arrive.

Il est peut-être plus facile d'y penser en montrant le cas le plus typique utilisé dans jQuery, le plugin .noConflict() donc pour la majorité du code vous pouvez toujours utiliser $ même si cela signifie quelque chose autre que jQuery en dehors de ce champ d'application :

(function($) {
  //inside here, $ == jQuery, it was passed as the first argument
})(jQuery);

Answer 5

Testé avec 1000000 itérations. Ce type de localisation n'a eu aucun effet sur les performances. Pas même une seule milliseconde sur 1000000 itérations. C'est tout simplement inutile.