Javascript Girl
  1. Javascript Girl
  3. Quels sont les cas de bonne utilisation pour les fonctions anonymes auto-exécutables JavaScript?
Intereting Posts
Bluebird Promise.all – plusieurs promesses ont complété le succès global et les rejets Est-il possible de classer un titre? (Et avec CSS ou js?) TypeError: $ (…) .selectize n'est pas une fonction Impression d'impression PDF dans Internet Explorer Html5 glisser le fichier à l'entrée – puis-je faire plusieurs fois dans la même entrée et avoir un fichier ajouté au lieu de remplacer? Augmenter 10 à une puissance en javascript, y a-t-il de meilleures façons que cela Recherchez des contacts au lieu de comptes sur les emails dans MS Dynamics CRM 2013 Comment ajouter une règle de validation personnalisée à un modèle dans Sencha Touch Comment puis-je arrêter l'authentification / session des formulaires ASP.net de renouveler dans l'appel de service Web setInterval ajax? Comment ajouter un gestionnaire d'image dans l'éditeur Summernote WYSIWYG? Remplacez efficacement tous les caractères accentués d'une chaîne? Array.prototype.fill () avec objet passe une référence et pas une nouvelle instance AngularJS $ http dans un service, retourner les données résolues, pas promesses Obtenir un style de style d'élément dans JavaScript Le moyen le plus précis de vérifier le type d'objet JS?

Quels sont les cas de bonne utilisation pour les fonctions anonymes auto-exécutables JavaScript?

Je comprends ce qu'est une fonction anonyme auto-exécutable, mais j'ai du mal à comprendre où je les utiliserais et pourquoi. Cela pourrait être parce que j'utilise souvent jQuery. Pourriez-vous fournir des exemples de cas de bonne utilisation?

Fondamentalement, une fonction anonyme auto-exécutante (plus techniquement appelée une expression de fonction IIFE ou immédiatement invoquée) est identique à déclarer une fonction nommée et à l'appeler immédiatement. La seule différence avec un IIFE est qu'il n'y a pas de nom, donc il ne peut être exécuté en place (pas appelé d'ailleurs) et, par conséquent, n'ajoute pas de nom à l'espace de noms actuel.

Ainsi, vous pouvez utiliser une fois que de nombreux codes dans une fonction seraient utiles et lorsque ce code n'a plus besoin d'être appelé dans le contexte actuellement défini.

Quelques endroits où cela est commun:

  1. Dans tout type de boucle qui implique certaines variables locales et certaines opérations asynchrones (ajax, timeout, etc …) où vous souhaitez accéder à ces variables locales séparément pour chaque itération en cours dans la fonction d'achèvement asynchrone.

  2. Pour encapsuler un code de niveau supérieur qui s'exécute une fois avec sa propre portée et ses propres variables locales qui sont privées et séparées de l'espace de noms global.

  3. Pour créer une portée de fonctions sans nom pour quelque raison que ce soit.

Exemples:

Loop Index (gèle l'index de boucle séparément pour chaque invocation de setTimeout() ): 

 for (var i = 0; i < max; i++) { // capture the loop index into in a closure (function(index) { setTimeout(function() { console.log(index); }, 2000); })(i); }

Encapsulation de code de niveau supérieur (crée une variable privée mais persistante qui n'est pas dans la portée globale): 

 (function() { var cntr = 0; window.getUniqueId = function() { return ++cntr; }; })();

Créez des variables contextuelles localement disponibles dans un code qui serait autrement une portée de niveau supérieur. 

 function Dictionary(initialData) { // call parent constructor Set.apply(this, arguments); } (function() { // inherit from Set var proto = Dictionary.prototype = new Set(); var base = Set.prototype; // Set constructor back to us proto.constructor = Dictionary; // override of the base class .add() // add(key, value) // add(Dictionary) // add({key1: value1, key2: value2}) proto.add = function(arg1, arg2) { if (arg1 instanceof Set) { // call base class to just add another Set base.add.call(this, arg1); } else if (typeof arg1 === "object") { // cycle through the object and add all properties/values to the Set for (var prop in arg1) { if (arg1.hasOwnProperty(prop)) { this._add(prop, arg1[prop]); } } } else if (typeof arg2 !== "undefined") { // must be add(key, value) this._add(arg1, arg2); } return this; } proto.get = function(key) { return this.data[key]; } // See rest of code here: https://github.com/jfriend00/Javascript-Set/blob/master/dictionary.js })();

Ce dont vous parlez est IIFE .

Il est utilisé de plusieurs façons communes:

  1. Il est autonome et toute variable déclarée dans l'IIFE ne contaminera pas l'espace global. Exemple: (function() { var foo = 123; $(".pop-up-trigger").click(function() { // ... }); }());

  2. Pour créer des "variables privées" en JavaScript. En déclarant certaines variables locales, puis en retournant certaines fonctions, ces fonctions peuvent accéder à ces variables locales (les affecter ou obtenir les valeurs). En dehors de l'IIFE, aucun code ne peut toucher ces variables locales et donc elles sont privées.

  3. Pour créer une portée. JavaScript n'a pas de portée de bloc mais n'a que la portée de la fonction, donc, en ayant une fonction et en l'invitant, il y a une nouvelle portée créée.