JavaScript utilise des fermetures pour atteindre la modularité

Profitez de la puissance des fermetures, mais à première vue, elles ne semblent rien avoir à voir avec les rappels. Jetons un coup d'œil au plus puissant de tous : les modules.

function foo() {
  var something = "cool";
  var another = [1, 2, 3];
  function doSomething() {
    console.log( something );
  }
  function doAnother() {
    console.log( another.join( " ! " ) );
  }
}

Comme vous pouvez le voir dans ce code, il n'y a pas de fermeture évidente ici, seulement deux variables de données privées quelque chose et une autre, ainsi que les deux fonctions internes doSomething() et doAnother(), leur portée lexicale (et c'est la fermeture) est la portée interne de foo().

Considérons ensuite le code suivant :

function CoolModule() {
  var something = "cool";
  var another = [1, 2, 3];
  function doSomething() {
    alert( something );
  }
  function doAnother() {
    alert( another.join( " ! " ) );
  }
  return {
    doSomething: doSomething,
    doAnother: doAnother
  };
}
var foo = CoolModule();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

Ce modèle est appelé un module en JavaScript. La manière la plus courante de mettre en œuvre le modèle de module est souvent appelée exposition de module, dont une variante est présentée ici. Regardons de plus près le code.

Tout d'abord, CoolModule() n'est qu'une fonction, qui doit être appelée pour créer une instance de module. Ni la portée interne ni la fermeture ne peuvent être créées sans exécuter la fonction externe. Deuxièmement, CoolModule() renvoie un objet représenté par la syntaxe littérale d'objet { key: value, ... }. L'objet renvoyé contient des références à des fonctions internes plutôt qu'à des variables de données internes. Nous gardons les variables de données internes cachées et privées. Vous pouvez considérer la valeur de retour de ce type d'objet comme essentiellement l'API publique du module. La valeur de retour de ce type d'objet est finalement affectée à la variable externe foo, et vous pouvez ensuite l'utiliser pour accéder aux méthodes de propriété dans l'API, telles que foo.doSomething().

Il n'est pas nécessaire de renvoyer un objet réel depuis le module, vous pouvez également renvoyer directement une fonction interne. jQuery est un bon exemple. jQuery et l'identifiant $ sont l'API publique du module jQuery, mais ce sont eux-mêmes des fonctions (puisque les fonctions sont aussi des objets, elles peuvent aussi avoir elles-mêmes des propriétés).

Les fonctions doSomething() et doAnother() ont des fermetures qui couvrent la portée à l'intérieur de l'instance de module (implémentées en appelant CoolModule()). Lorsque nous transmettons une fonction en dehors de la portée lexicale en renvoyant un objet contenant une référence de propriété, nous avons créé les conditions dans lesquelles les fermetures peuvent être observées et pratiquées. Si vous souhaitez le décrire plus simplement, le modèle de module doit remplir deux conditions nécessaires.

1. Il doit y avoir une fonction englobante externe, qui doit être appelée au moins une fois (chaque appel créera une nouvelle instance de module).

2. La fonction fermée doit renvoyer au moins une fonction interne, afin que la fonction interne puisse former une fermeture dans la portée privée et pouvoir accéder ou modifier l'état privé.

Un objet avec des propriétés fonctionnelles n'est pas vraiment un module en soi. D'un point de vue pratique, un objet renvoyé par un appel de fonction avec uniquement des attributs de données et aucune fonction de fermeture n'est pas un vrai module. L'exemple de code précédent a un créateur de module distinct appelé CoolModule() qui peut être appelé un nombre illimité de fois, créant une nouvelle instance de module à chaque appel. Lorsqu'une seule instance est nécessaire, ce modèle peut être simplement amélioré pour implémenter le modèle singleton :

var foo = (function CoolModule() {
  var something = "cool";
  var another = [1, 2, 3];
  function doSomething() {
    alert( something );
  }
  function doAnother() {
    alert( another.join( " ! " ) );
  }
  return {
    doSomething: doSomething,
    doAnother: doAnother
  };
})();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

Appelez cette fonction immédiatement et renvoyez la valeur Assign directement à l'identifiant d'instance de module foo du singleton.

Les modules sont également des fonctions ordinaires, ils peuvent donc accepter des paramètres :

function CoolModule(id) {
  function identify() {
    console.log( id );
  }
  return {
    identify: identify
  };
}
var foo1 = CoolModule( "foo 1" );
var foo2 = CoolModule( "foo 2" );
foo1.identify(); // "foo 1"
foo2.identify(); // "foo 2"

Une autre variante simple mais puissante du modèle de module est : Nommez l'objet à renvoyer en tant qu'API publique :

var foo = (function CoolModule(id) {
function change() {
  // 修改公共API
  publicAPI.identify = identify2;
}
function identify1() {
  alert( id );
}
function identify2() {
  alert( id.toUpperCase() );
}
var publicAPI = {
  change: change,
  identify: identify1
};
return publicAPI;
})( "foo module" );
foo.identify(); // foo module
foo.change();
foo.identify(); // FOO MODULE

Un module est accessible de l'intérieur en conservant une référence interne à l'objet API public à l'intérieur l'instance du module. Modifier l'instance, notamment en ajoutant ou en supprimant des méthodes et des propriétés, et en modifiant leurs valeurs.

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter de l'aide à l'étude ou au travail de chacun. J'espère également soutenir le site Web PHP chinois !

Pour plus d'articles liés à JavaScript utilisant des fermetures pour obtenir la modularité, veuillez faire attention au site Web PHP chinois !