Comment la (function() {})() la construction d'un projet et pourquoi l'utiliser?

Question

(function() {})() et ses jQuery spécifiques cousin (function($) {})(jQuery) de la pop de tous les temps dans le code Javascript.

Comment ces constructions de travail, et quels sont les problèmes qu'ils en résolvent?

Exemples apprécié

Answer 1

Avec la popularité croissante des frameworks JavaScript, l' $ signe a été utilisé dans de nombreuses occasions différentes. Donc, pour pallier à d'éventuels conflits, vous pouvez utiliser ces constructions:

(function ($){
  // Your code using $ here.
})(jQuery);

Plus précisément, c'est un anonyme déclaration de fonction qui est exécutée immédiatement en passant le principal objet jQuery en tant que paramètre. À l'intérieur de cette fonction, vous pouvez utiliser $ pour se référer à l'objet, sans se soucier des autres cadres dans le champ d'application.

Answer 2

C'est une technique utilisée pour limiter la portée des variables; c'est la seule façon de prévenir les variables de polluer l'espace de noms global.

var bar = 1; // bar is now part of the global namespace
alert(bar);

(function () {
   var foo = 1; // foo has function scope
   alert(foo); 
   // code to be executed goes here
})();

Answer 3

1) Il définit une fonction anonyme et exécute tout de suite.

2) Ce qui se fait habituellement, afin de ne pas polluer l'espace de noms global avec du code non désirés.

3) Vous devez exposer certaines méthodes d'elle, rien déclaré à l'intérieur sera "privé", par exemple:

MyLib = (function(){
    // other private stuff here
    return {
        init: function(){
        }
    };

})();

Ou bien:

MyLib = {};
(function({
    MyLib.foo = function(){
    }
}));

Le point est, il ya beaucoup de façons que vous pouvez utiliser, mais le résultat reste le même.

Answer 4

C'est juste une fonction anonyme qui est appelée immédiatement. Vous pourriez d'abord créer la fonction, puis l'appeler, et vous obtenez le même effet:

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

des œuvres comme:

temp = function(){ ... };
temp();

Vous pouvez également faire la même chose avec un nom de fonction:

function temp() { ... }
temp();

Le code que vous appelez jQuery-spécifique est seulement que dans le sens que vous utilisez l'objet jQuery. C'est juste une fonction anonyme avec un paramètre, qui est appelée immédiatement.

Vous pouvez faire la même chose en deux étapes, et vous pouvez le faire avec tous les paramètres que vous souhaitez:

temp = function(answer){ ... };
temp(42);

Le problème que cela résout, c'est qu'il crée un closuse pour le code de la fonction. Vous pouvez déclarer des variables dans il sans polluer l'espace de noms global, réduisant ainsi les risques de conflits lors de l'utilisation d'un script avec un autre.

Dans le cas spécifique de jQuery vous l'utilisez en mode de compatibilité, où il n'a pas de déclarer le nom $ comme un alias pour jQuery. Par l'envoi de l'objet jQuery dans la fermeture et de nommer le paramètre $, vous pouvez toujours utiliser la même syntaxe que sans mode de compatibilité.

Answer 5

Il explique ici que votre première construction offre la possibilité de variables.

Les Variables sont définies au niveau de la fonction en javascript. C'est différent de ce que vous pourriez être utilisée dans un langage comme C# ou Java, où les variables sont définies dans le bloc. Ce que cela signifie est que si vous déclarez une variable à l'intérieur d'une boucle ou d'une instruction if, il sera disponible pour l'ensemble de la fonction.

Si jamais vous vous trouvez dans le besoin explicitement la portée d'une variable à l'intérieur d'une fonction, vous pouvez utiliser une fonction anonyme pour ce faire. Vous pouvez en fait créer une fonction anonyme, et puis l'exécuter tout de suite et toutes les variables à l'intérieur vont être portée à la fonction anonyme:

(function() {
  var myProperty = "hello world";
  alert(myProperty);
})();
alert(typeof(myProperty)); // undefined