Quel est le but de l'habillage de l'ensemble des fichiers Javascript dans les fonctions anonymes comme “(fonction(){ ... })()”?

Question

J'ai lu beaucoup de Javascript, dernièrement, et j'ai remarqué que le fichier entier est enveloppé comme suit dans le .js fichiers à importer.

(function() {
    ... 
    code
    ...
})();

Quelle est la raison pour faire cela plutôt que d'un simple ensemble de fonctions constructeur?

Answer 1

C'est généralement l'espace de noms (voir plus loin) et le contrôle de la visibilité des fonctions de membre et/ou des variables. Pensez-y comme à une définition de l'objet. jQuery plugins sont généralement écrites comme ceci.

En Javascript, vous pouvez imbriquer des fonctions. Donc, la suivante est valide:

function outerFunction() {
   function innerFunction() {
      // code
   }
}

Maintenant, vous pouvez appeler outerFunction(), mais le visiblity d' innerFunction() est limitée à la portée de outerFunction(), c'est à dire privé d' outerFunction(). Essentiellement, il suit le même principe que les variables en Javascript:

var globalVariable;

function someFunction() {
   var localVariable;
}

En conséquence:

function globalFunction() {

   var localFunction1 = function() {
       //I'm anonymous! But localFunction1 is a reference to me!
   };

   function localFunction2() {
      //I'm named!
   }
}

Dans le scénario ci-dessus, vous pouvez appeler globalFunction() à partir de n'importe où, mais vous ne pouvez pas appeler localFunction1 ou localFunction2.

Ce que vous faites lorsque vous écrivez (function() { ... code ... })(), c'est que vous êtes du code à l'intérieur d'une fonction littérale (le sens de l'ensemble de "l'objet" est en fait une fonction). Après cela, vous êtes auto-invocation de la fonction (le final ()). Donc, l'avantage majeur de cette comme je l'ai mentionné avant, est que vous pouvez avoir privé des méthodes/fonctions et propriétés:

(function() {
   var private_var;

   function private_function() {
     //code
   }
})()

La chose intéressante est que vous pouvez également définir les choses à l'intérieur et à l'exposer au monde extérieur (un exemple de namespacing de sorte que vous pouvez créer votre propre bibliothèque/plugin):

var myPlugin = (function() {
 var private_var;

 function private_function() {
 }

 return {
    public_function1: function() {
    },
    public_function2: function() {
    }
 }
})()

Maintenant, vous pouvez appeler myPlugin.public_function1(), mais vous ne pouvez pas accéder private_function()! Donc, assez semblable à une définition de classe. Pour mieux comprendre ce processus, je vous recommande les liens suivants pour certains plus de lecture:

• Namespacing votre Javascript
• Les députés d'en Javascript (par Douglas Crockford)

MODIFIER

J'ai oublié de mentionner. Dans cette dernière (), vous pouvez passer tout ce que vous voulez à l'intérieur. Par exemple, lorsque vous créez des plugins jQuery, vous passez en jQuery ou $ comme:

(function(jQ) { ... code ... })(jQuery) 

Donc, ce que vous faites ici est de définir une fonction qui prend un paramètre (appelé jQ, une variable locale, et connu seulement à cette fonction). Alors vous êtes auto-invocation de la fonction et en lui passant un paramètre (également appelés jQuery, mais c' est à partir du monde extérieur et une référence à la réalité de jQuery). Il n'y a aucune urgence à le faire, mais il ya certains avantages:

• Vous pouvez redéfinir un paramètre global et de lui donner un nom qui fait sens dans la portée locale.
• Il y a un léger avantage en termes de performances, car il est plus rapide de chercher des choses dans la portée locale au lieu d'avoir à marcher jusqu'à la portée de la chaîne dans la portée globale.
• Il ya des avantages pour la compression (minification).

Answer 2

Javascript dans un navigateur ne prend véritablement un couple de efficace étendues: la fonction de l'étendue et de la portée globale.

Si une variable n'est pas dans la portée de la fonction, c'est dans la portée globale. Et les variables globales sont généralement mauvais, c'est donc une construction de garder une bibliothèque de variables à lui-même.

Answer 3

Cela s'appelle une fermeture. Essentiellement, il scelle le code à l'intérieur de la fonction, de sorte que d'autres bibliothèques ne pas interférer avec elle. Il est similaire à la création d'un espace de noms dans les langages compilés.

Exemple. Supposons que j'écris:

(function() {

    var x = 2;

    // do stuff with x

})();

Maintenant, d'autres bibliothèques ne peuvent pas accéder à la variable x j'ai créé pour une utilisation dans ma bibliothèque.

Answer 4

Vous pouvez utiliser la fonction de fermeture de certaines données dans les plus grandes expressions, comme dans cette méthode de détermination de la prise en charge du navigateur pour certains de l'html5 objets.

   navigator.html5={
     canvas: (function(){
      var dc= document.createElement('canvas');
      if(!dc.getContext) return 0;
      var c= dc.getContext('2d');
      return typeof c.fillText== 'function'? 2: 1;
     })(),
     localStorage: (function(){
      return !!window.localStorage;
     })(),
     webworkers: (function(){
      return !!window.Worker;
     })(),
     offline: (function(){
      return !!window.applicationCache;
     })()
    }

Answer 5

En plus de garder les variables locales, un très pratique d'utilisation est lors de l'écriture d'une bibliothèque à l'aide d'une variable globale, vous pouvez donner un plus court nom de la variable à utiliser dans la bibliothèque. Il est souvent utilisé dans l'écriture de plugins jQuery, depuis jQuery vous permet de désactiver la variable $ pointant vers jQuery, à l'aide de jQuery.noConflict(). Dans le cas où il est désactivé, votre code peut toujours utiliser $ et de ne pas se briser si vous venez de le faire:

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