Modèle de module JavaScript expliqué en détail

Cet article présente principalement le mode module JavaScript et analyse en détail les concepts, fonctions, extensions et autres techniques de fonctionnement pertinents du mode module js sous forme d'exemples. J'espère qu'il pourra s'y référer. aider tout le monde.

Il n'y a pas de concept de classe en JS, alors comment refléter les attributs publics et privés de l'objet La réponse est le modèle de module ?

Il existe une fonctionnalité importante dans JS : la fonction anonyme. Grâce à l'établissement et à l'exécution de la fonction anonyme, le code de la fonction anonyme forme une fermeture, formant ainsi, encapsulant et contrôlant les caractéristiques privées et publiques d'un. objet pour éviter la prolifération de variables globales et les conflits avec d’autres scripts.

(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, vous pouvez 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.

Extension du mode de base

Importer des mixins

JS a une fonctionnalité importante appelée variables globales implicites , c'est-à-dire que chaque fois que l'interpréteur JS recherche une déclaration var pour une variable, si elle n'est pas trouvée, la variable 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 une variable globale de votre own. Ceci peut être facilement réalisé grâce à la valeur de retour de la 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. Ainsi, lorsque nous devons répartir un module sur plusieurs fichiers, que devons-nous faire ?

Une solution consiste à augmenter les modules. Nous entrons d'abord dans le module, puis ajoutons des méthodes d'attribut, puis sortons. L'exemple est le suivant

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 un nouveau un basé sur ses caractéristiques. 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

Vous pouvez créer des sous-modules basés sur le module. C'est très simple. comme suit :

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

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

Recommandations associées :

Un mode module pour les compétences Javascript_YUI.Ext

Un mode module pour les compétences Javascript _javascript

Comment rendre le module js plus utile

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!