Retour Javascript avec deux points

Question

Je suis en train d'apprendre le JavaScript et je suis tombé sur la structure ci-dessous :

var Test = (function () {

  function func1() {
      //do something.....
  }

  function func2() {
      //do something.....
  }

  function func3() {
      //do something.....
  }

  return {
      func1: func1,
      func2: func2,
      func3: func3
  };

})();

Je me demande ce que fait le bloc de retour. S'agit-il d'une structure JavaScript très couramment utilisée ? Merci de m'indiquer où je peux obtenir plus d'informations à ce sujet.

Answer 1

Il s'agit de la Révéler le modèle de module .

L'objet renvoyé contient des références aux fonctions définies dans l'IIFE. Les fonctions définies à l'intérieur sont donc privé à la fonction anonyme.

Mais si vous voulez utiliser les fonctions internes à l'extérieur, vous pouvez utiliser l'objet retourné.

La valeur de Test sera

var Test = {
    func1: func1,
    func2: func2,
    func3: func3
};

Et vous pouvez appeler func1 de l'extérieur comme

Test.func1();

C'est la voie du Javascript émuler classe . Comme il n'y a pas de spécificateurs de visibilité en utilisant le modèle Module, les variables/méthodes peuvent être rendues publiques/privées.

Le modèle de module révélateur est inspiré du modèle de module. Dans le modèle du module révélateur, seule la référence à l'élément privé est renvoyée dans un formulaire objet .

L'idée principale de ce modèle est d'éviter variables globales maléfiques . Cette méthode est similaire à l'IIFE, sauf qu'un objet est renvoyé au lieu d'une fonction. Les variables/méthodes définies à l'intérieur de l'IIFE sont les suivantes privé à la fonction. Pour accéder à une variable/méthode à l'intérieur de l'IIFE, il faut l'ajouter à l'objet retourné, puis on peut y accéder depuis l'extérieur de l'IIFE. Ce modèle tire parti de la fonction fermetures Les variables/méthodes définies à l'intérieur de l'IIFE sont donc accessibles même après le retour de l'objet.

Extrait du livre d'Addy Osmani Apprendre Javascript Design patterns

Le modèle du module révélateur est né de la frustration de Heilmann de devoir répéter le nom de l'objet principal lorsque nous voulions appeler une méthode publique à partir d'une autre ou accéder à des variables publiques. Il n'aimait pas non plus l'obligation de passer à la notation littérale de l'objet pour les choses qu'il souhaitait rendre publiques.

Le résultat de ses efforts a été un modèle actualisé dans lequel nous définissons simplement toutes nos fonctions et variables dans le champ d'application privé et renvoyons un objet anonyme avec des pointeurs vers la fonctionnalité privée que nous souhaitons rendre publique.

Avantages :

1. Encapsulation. Le code à l'intérieur de l'IIFE est encapsulé dans le monde extérieur
2. Code propre, organisé et réutilisable
3. Vie privée. Il permet de créer des variables/méthodes privées. Les variables/méthodes privées ne peuvent pas être touchées depuis l'extérieur de l'IIFE.

Inconvénients :

1. Si une fonction privée fait référence à une fonction publique, cette dernière ne peut pas être remplacée.

Pour en savoir plus :

1. https://en.wikipedia.org/wiki/Module_pattern
2. https://carldanley.com/js-revealing-module-pattern/
3. Comment utiliser le modèle de module révélateur en JavaScript ?

Answer 2

Il s'agit d'un objet littéral dans l'instruction de retour. C'est comme si l'on créait un objet et qu'on le renvoyait :

var obj = {
    func1: func1,
    func2: func2,
    func3: func3
};
return obj;

La syntaxe de l'objet littéral crée un objet et définit ses propriétés, tout comme :

var obj = new Object();
obj.func1 = func1;
obj.func2 = func2;
obj.func3 = func3;
return obj;

Le renvoi de l'objet a pour but de révéler les fonctions à l'intérieur de la fonction au code extérieur, tout en créant un espace pour les variables privées que les fonctions peuvent utiliser.

Si l'on n'utilise pas de variables privées, le code fait la même chose que :

var Test = {
  func1: function() {
      //do something.....
  },
  func2: function() {
      //do something.....
  },
  func3: function() {
      //do something.....
  }
};

Les variables privées sont déclarées à l'intérieur de la portée de la fonction et ne peuvent être atteintes que par les fonctions qui s'y trouvent. Exemple : les variables privées sont déclarées à l'intérieur de la portée de la fonction :

var Test = (function () {

  var name;

  function setName(str) {
    name = str;
  }

  function getName() {
    return name;
  }

  return {
      setName: setName,
      getName: getName
  };

})();

Test.setName("John Doe");
var name = Test.getName();

Answer 3

Cela fonctionne comme une classe dans d'autres langages de programmation. Par conséquent, vous pouvez accéder à la classe publique func1 membre utilisant Test.func1 et l'appeler comme une fonction normale en utilisant Test.func1() .