Modèles de conception modulaires en javascript

Points de base

• Compréhension du type de membre: Maître les différences entre les membres publics, privés, privilégiés et protégés en JavaScript.
• Variations du mode du module: Découvrez les nuances entre les modes de module de base et les modes de module révélant, qui fournissent un style de codage interne cohérent et un contrôle flexible de la divulgation.
• Utilisation des membres privilégiés: Utilisez des membres privilégiés pour exposer en toute sécurité les variables privées via des méthodes publiques, permettant un accès contrôlé tout en maintenant l'encapsulation.
• Protéger la politique des membres: Activer la protection dans JavaScript en exposant temporairement les données dans une portée contrôlée, puis en revenant aux données privées, partageant ainsi les données entre plusieurs modules sans accès externe, sans accès externe.
• Technologie améliorée: Explorer des méthodes telles que apply() pour lier des modules supplémentaires dans un contexte unique, atteignant ainsi l'état et la gestion partagés tout en maintenant l'indépendance et la gestion des modules.

Cet article expliquera la structure et les avantages du modèle de conception du module d'extension, qui comprend quatre types de membres principaux:

• Membre public: membres accessibles de n'importe où.
• Membre privé: membres qui ne peuvent être accessibles qu'à partir d'un objet.
• Membres privés: Les membres qui ne peuvent être accessibles que directement à partir de l'objet, mais qui sont accessibles indirectement de l'extérieur par la méthode publique . Protéger les membres:
des membres qui ne peuvent être accessibles que des objets intérieurs ou de l'un de leurs modules.
• Cet article ne concerne pas la programmation orientée objet, car la structure que nous créerons est un modèle singleton, qui est une structure d'instance unique qui ne peut pas être instanciée plusieurs fois. En fait, il n'est pas du tout instancié (du point de vue de la possession d'un constructeur), il s'agit donc d'un modèle basé sur des objets, et non d'un modèle orienté objet.
Pour plus d'informations sur les différences entre la programmation basée sur les objets et les objets, et une introduction à la programmation orientée objet en JavaScript, je vous suggère de lire l'article de Ryan Frishberg: Programmation orientée objet JavaScript.

Modèle de conception modulaire

ici sera utilisé comme modèle de conception de base, qui est une variante du motif de module classique mais avec plus de contrôle. Bien que plusieurs articles aient décrit ces modèles, peu expliquent vraiment comment ils fonctionnent, et peu ont un ensemble de fonctionnalités aussi complet!

Mode du module de base

Le motif de module classique enveloppe tout le code du script dans un littéral de fonction anonyme qui est affecté à une seule variable lors du retour. Une fonction littérale n'est qu'une fonction qui s'appelle, donc l'affectation finale d'une fonction littérale n'est pas une fonction, mais toute valeur renvoyée par la fonction. Pour donner un exemple simple, la fonction littérale contient un calcul, donc la valeur attribuée à la somme est le résultat de ce calcul:

<code class="language-javascript">var sum = (function() { return 6 * 7; })();</code>

Pour illustrer la signification de cette syntaxe, ce qui suit est le même code, abstrait en une fonction nommée:

<code class="language-javascript">function calculate() { return 6 * 7; }
var sum = (calculate)();</code>

Dans ce cas, nous n'avons pas vraiment besoin de mettre des supports autour de calculate, mais lorsque nous utilisons des fonctions anonymes, nous devons le faire afin de l'évaluer comme une seule expression sans pré-assignment.

membres publics et privés

Ainsi, dans les littéraux de fonction, nous pouvons mettre tout autre code, comme les variables, les propriétés et les fonctions - et les différents types de syntaxe utilisés pour définir les données internes déterminent les membres publics et la division entre les membres privés. Voici un exemple:

Puisque nous renvoyons un objet d'attribut et que l'objet est affecté à

<code class="language-javascript">var MyModule = (function() {
  var myPrivateData = 303;
  function myPrivateFunction() {
    alert('private');
  }
  return {
    myPublicData : 42,
    myPublicFunction : function() {
      alert('public');
    }
  };
})();</code>

, ces attributs sont accessibles à partir de l'extérieur de l'objet, tels que

et MyModule. Mais nous ne pouvons tout simplement pas accéder à MyModule.myPublicData ou MyModule.myPublicFunction car les variables ne sont accessibles que dans leur portée d'origine. La portée d'une variable est de définir son contexte, déterminé par l'instruction myPrivateData. Dans cet exemple, la portée des variables privées est myPrivateFunction objets, donc ils ne peuvent être accessibles que depuis cet objet. var MyModule

Mode du module révélateur

En utilisant le mode module, nous utilisons deux syntaxes différentes pour créer la différence entre les membres publics et privés. La révélation du motif du module est une variante de ce modèle qui nous permet d'utiliser la même syntaxe pour toutes les constructions internes, ne se reportant qu'à la notation littérale de l'objet à la fin pour retourner (ou révéler) les membres publics. Regardons à nouveau cet objet, mais cette fois en utilisant le mode du module de révélation:

La division entre les membres publics et privés est toujours la même, mais cette fois, elle n'est pas mise en œuvre par la syntaxe originale utilisée pour définir ces membres, mais simplement par le contenu retourné. Cela fait du modèle de module révélateur une variante utile, car elle permet d'utiliser des styles de codage cohérents en interne. Cela signifie également que vous pouvez modifier le nom du membre public à votre retour, et même changer les membres qui seront des membres publics à tout moment.

<code class="language-javascript">var MyModule = (function() {
  var myPrivateData = 303;
  function myPrivateFunction() {
    alert('private');
  }
  var myPublicData = 42;
  function myPublicFunction() {
    alert('public');
  }
  return {
    myPublicData : myPublicData,
    myPublicFunction : myPublicFunction
  };
})();</code>

Ce modèle a été innové par Christian Heilmann, qui a expliqué ce modèle et son modèle de module sous-jacent dans son article: Utilisation du modèle de module - révèle quelque chose au monde.

(Le contenu suivant sera sorti dans les segments en raison de la durée de l'article)

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!