Explication détaillée de l'utilisation du mode module JS

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du mode module JS. Quelles sont les précautions lors de l'utilisation du mode module JS. Voici des cas pratiques, jetons un oeil.

Il n'y a pas de concept de classe en JS, alors comment refléter les attributs Public et Private de Object La réponse est le modèle de module (Module Pattern).

Il y a une fonctionnalité non négligeable en JS : Fonction anonyme (anonyme fonction), grâce à la création et à l'exécution de fonctions anonymes, le code de la fonction anonyme forme une fermeture, formant, encapsulant et contrôlant ainsi les caractéristiques privées et publiques d'un objet, évitant la prolifération de variables globales et les conflits avec d'autres conflits de script.

(function () {
  // 所有的变量和函数只在这个范围内有效
  // 仍然可以使用全局变量
}());

Modèle de modèle de module classique

var myNamespace = (function () {
 var myPrivateVar, myPrivateMethod;
 // A private counter variable
 myPrivateVar = 0;
 // A private function which logs any arguments
 myPrivateMethod = function( foo ) {
   console.log( foo );
 };
 return {
  // A public variable
  myPublicVar: "foo",
  // A public function utilizing privates
  myPublicFunction: function( bar ) {
   // Increment our private counter
   myPrivateVar++;
   // Call our private method using bar
   myPrivateMethod( bar );
  }
 };
})();

Grâce à la fermeture, nous pouvons voir que lorsque nous utilisons myNamespace, nous ne pouvons voir que les propriétés et méthodes de myPublic*, mais les propriétés et méthodes de myPrivate* ne sont pas accessibles directement.

Extensions du mode de base

Importer des mixins

JS possède une fonctionnalité importante appelée variables globales implicites, ce qui signifie que chaque fois que l'interpréteur JS recherche une déclaration var pour une variable, si elle n'est pas trouvée, elle est considérée comme une variable globale. Cela semble être une chose facile à faire lors de l'utilisation de variables globales dans les fermetures, mais en même temps, cela peut facilement provoquer une confusion dans le code. Heureusement, les fonctions anonymes peuvent également recevoir des paramètres, donc grâce au passage de paramètres, nous pouvons importer les variables globales que nous souhaitons utiliser dans la fonction anonyme, fournissant ainsi une méthode d'utilisation plus claire et plus propre.

(function ($, YAHOO) {
  // 这样就可以访问jQuery (as $) 和 YAHOO 库
}(jQuery, YAHOO));

Exportations de modules

Parfois, vous utilisez non seulement des variables globales, mais vous souhaitez également déclarer votre propre variable globale. Cela peut être facilement réalisé grâce à la valeur de retour d'une fonction anonyme.

var MODULE = (function () {
  var my = {},
    privateVariable = 1;
  function privateMethod() {
    // ...
  }
  my.moduleProperty = 1;
  my.moduleMethod = function () {
    // ...
  };
  return my;
}());

Extensions avancées

Sur la base du modèle de base ci-dessus, nous pouvons continuer à nous développer.

Augmentation

La limitation du mode module de base est que nous devons mettre le module entier dans un seul fichier. Alors, que devons-nous faire lorsque nous devons répartir un module sur plusieurs fichiers ?

Une solution consiste à augmenter les modules. Nous entrons d'abord dans le module, puis ajoutons des méthodes d'attribut, puis sortons. Les exemples sont les suivants

var MODULE = (function (my) {
  my.anotherMethod = function () {
    // added method...
  };
  return my;
}(MODULE));

Augmentation lâche

L'exemple ci-dessus nécessite d'abord un module, puis ajoute de nouvelles fonctionnalités basées sur celui-ci. Mais parfois, nous chargeons des scripts JS de manière asynchrone, nous avons donc besoin d'une méthode de création de module à faible couplage, qui peut être réalisée grâce à la structure suivante.

var MODULE = (function (my) {
  // add capabilities...
  return my;
}(MODULE || {}));

Sous-modules

Des sous-modules peuvent être construits en fonction du module. C'est très simple. L'exemple est le suivant :

MODULE.sub = (function () {
  var my = {};
  // ...
  return my;
}());

. Jusqu’à présent, nous avons brièvement présenté le mode module, qui est le mode JS le plus classique et largement utilisé par divers frameworks JS. Cela rend votre code plus encapsulé, plus structuré et plus POO.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser la séquence de chargement de Vue

Comment configurer l'en-tête BootStrap pour interdire le croisement des lignes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!