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

En bref

Résumé

Dans sa forme la plus simple, cette technique vise à envelopper le code à l'intérieur d'un portée de la fonction.

Il aide diminue les chances de:

• en conflit avec d'autres applications/bibliothèques
• polluantes supérieure (global le plus probable) portée

Il ne pas détecter lorsque le document est prêt, il n'est pas une sorte de document.onload ni window.onload

Il est communément connu comme un Immediately Invoked Function Expression (IIFE) ou Self Executing Anonymous Function.

Code Expliqué

var someFunction = function(){ console.log('wagwan!'); };

(function() {                   /* function scope starts here */
  console.log('start of IIFE');

  var myNumber = 4;             /* number variable declaration */
  var myFunction = function(){  /* function variable declaration */
    console.log('formidable!'); 
  };
  var myObject = {              /* object variable declaration */
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
})();                           /* function scope ends */

someFunction();            //reachable, hence works: see in the console
myFunction();              //unreachable, will throw an error, see in the console
myObject.anotherFunc();    //unreachable, will throw an error, see in the console

Dans l'exemple ci-dessus, toute variable définie dans la fonction (c'est à dire déclarées à l'aide de var) sera "privé" et accessible à l'intérieur de la portée de la fonction SEULE (Vivin Paliath met). En d'autres termes, ces variables ne sont pas visibles/accessibles en dehors de la fonction. Voir la démo en direct.

Javascript a la fonction de cadrage. "Les paramètres et les variables définies dans une fonction ne sont pas visibles à l'extérieur de la fonction, et qu'une variable définie n'importe où à l'intérieur d'une fonction est visible partout dans la fonction." (à partir de "Javascript: Les Bonnes Parties").

---

Plus de détails

Code Alternatif

En fin de compte, le code posté avant peut également être fait comme suit:

var someFunction = function(){ console.log('wagwan!'); };

var myMainFunction = function() {
  console.log('start of IIFE');

  var myNumber = 4;
  var myFunction = function(){ console.log('formidable!'); };
  var myObject = { 
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
};

myMainFunction();          //I CALL "myMainFunction" FUNCTION HERE
someFunction();            //reachable, hence works: see in the console
myFunction();              //unreachable, will throw an error, see in the console
myObject.anotherFunc();    //unreachable, will throw an error, see in the console

Voir la démo en direct.

---

Les Racines

Itération 1

Un jour, quelqu'un a probablement pensé "il doit y avoir un moyen d'éviter de nommer 'myMainFunction", puisque tout ce que nous voulons c'est de l'exécuter immédiatement."

Si vous aller à l'essentiel, vous découvrez que:

• expression: quelque chose de l'évaluation de la valeur. c'est à dire 3+11/x
• statement: ligne(s) de code à faire quelque chose, MAIS il ne pas évaluer la valeur. c'est à dire if(){}

De même, les expressions de fonction d'évaluer la valeur. Et l'une des conséquences (je suppose?) c'est qu'ils peuvent être immédiatement appelé:

 var italianSayinSomething = function(){ console.log('mamamia!'); }();

Donc notre exemple plus complexe devient:

var someFunction = function(){ console.log('wagwan!'); };

var myMainFunction = function() {
  console.log('start of IIFE');

  var myNumber = 4;
  var myFunction = function(){ console.log('formidable!'); };
  var myObject = { 
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
}();

someFunction();            //reachable, hence works: see in the console
myFunction();              //unreachable, will throw an error, see in the console
myObject.anotherFunc();    //unreachable, will throw an error, see in the console

Voir la démo en direct.

Itération 2

La prochaine étape est la pensée "pourquoi avez - var myMainFunction = si on ne peut même pas l'utiliser!?".

La réponse est simple: essayez de supprimer, comme ci-dessous:

 function(){ console.log('mamamia!'); }();

Voir la démo en direct.

Il ne fonctionnera pas parce que "les déclarations de fonction ne sont pas invokable".

Le truc, c'est qu'en supprimant var myMainFunction = nous avons transformé le expression de fonction dans un déclaration de fonction. Voir les liens dans "Ressources" pour plus de détails sur cette.

La prochaine question est "pourquoi je ne peux pas le garder comme une expression de fonction avec autre chose que var myMainFunction =?

La réponse est "vous pouvez", et il ya effectivement beaucoup de façons que vous pourriez faire ceci: l'ajout d'un +, un !, un -, ou peut-être enveloppant dans une paire de parenthèses (comme c'est maintenant fait par convention), et de plus je crois. À titre d'exemple:

 (function(){ console.log('mamamia!'); })(); //live demo: jsbin.com/zokuwodoco/1/edit?js,console.

ou

 +function(){ console.log('mamamia!'); }(); //live demo: jsbin.com/wuwipiyazi/1/edit?js,console

ou

 -function(){ console.log('mamamia!'); }(); //live demo: jsbin.com/wejupaheva/1/edit?js,console

• Quel est le point d'exclamation faire avant la fonction?
• JavaScript signe + devant le nom de la fonction

Donc, une fois que la modification est ajoutée à ce qui a été une fois notre "Code Alternatif", nous avons retour à exactement le même code que celui utilisé dans le "Code Expliqué" exemple

var someFunction = function(){ console.log('wagwan!'); };

(function() {
  console.log('start of IIFE');

  var myNumber = 4;
  var myFunction = function(){ console.log('formidable!'); };
  var myObject = { 
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
})();

someFunction();            //reachable, hence works: see in the console
myFunction();              //unreachable, will throw an error, see in the console
myObject.anotherFunc();    //unreachable, will throw an error, see in the console

Lire plus sur Expressions vs Statements:

• developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators
• developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions#Function_constructor_vs._function_declaration_vs._function_expression
• Javascript: différence entre une déclaration et une expression?
• Expression Versus Déclaration

---

Démystifier Les Étendues

Une chose que l'on peut se demander est "ce qui arrive quand vous ne définissez PAS la variable "correctement" à l'intérieur de la fonction -- c'est à dire de faire une simple affectation à la place?"

(function() {
  var myNumber = 4;             /* number variable declaration */
  var myFunction = function(){  /* function variable declaration */
    console.log('formidable!'); 
  };
  var myObject = {              /* object variable declaration */
    anotherNumber : 1001, 
    anotherFunc : function(){ console.log('formidable!'); }
  };
  myOtherFunction = function(){  /* oops, an assignment instead of a declaration */
    console.log('haha. got ya!');
  };
})();
myOtherFunction();         //reachable, hence works: see in the console
window.myOtherFunction();  //works in the browser, myOtherFunction is then in the global scope
myFunction();              //unreachable, will throw an error, see in the console

Voir la démo en direct.

En gros, si une variable n'a pas été déclarée dans son champ d'application actuel est affectée une valeur, puis "d'un regard l'étendue de la chaîne se produit jusqu'à ce qu'il trouve la variable ou de la frappe de la portée mondiale (qui sera le créer)".

Quand, dans un environnement de navigateur (vs un environnement de serveur comme nodejs) la portée globale est définie par la window objet. Par conséquent, nous pouvons faire window.myOtherFunction().

Mes "Bonnes pratiques" astuce à ce sujet est à toujours utiliser var lors de la définition de quelque chose: si c'est un nombre, objet ou la fonction, & même quand, dans la portée globale. Cela rend le code beaucoup plus simple.

Remarque:

• javascript ne pas ont block scope (mise à Jour: le bloc de portée des variables locales ajouté dans ES6.)
• javascript a seulement function scope & global scope (window champ d'application dans un environnement de navigateur)

Lire plus sur Javascript Scopes:

• Quel est le but du mot-clé var et quand l'utiliser (ou de les omettre)?
• Quelle est la portée des variables en JavaScript?

---

Ressources

• youtu.être/i_qE1iAmjFg?t=2m15s - Paul Irish présente les IIFE au min 2:15, ne regardez!
• developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions
• Livre: Javascript, les bonnes pièces - fortement recommandé
• youtu.être/i_qE1iAmjFg?t=4m36s - Paul Irish présente le motif de module à 4:36

---

Prochaines Étapes

Une fois que vous obtenez cette IIFE concept, il conduit à la module pattern, ce qui est généralement fait en tirant parti de cette IIFE modèle. Amusez-vous 🙂

Que l'on 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.

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

Nous devons également utiliser 'use strict' dans le champ d'application de la fonction pour vous assurer que le code doit être exécuté en "mode strict". Exemple de code ci-dessous

(function() {
    'use strict';

    //Your code from here
})();