Detaillierte Erläuterung der Verwendung des JS-Modulmodus

Dieses Mal werde ich Ihnen eine detaillierte Erklärung zur Verwendung des JS-Modulmodus geben. Was sind die Vorsichtsmaßnahmen, wenn Sie den JS-Modulmodus verwenden?

In JS gibt es kein Klassenkonzept. Wie spiegelt man also die öffentlichen und privaten Attribute von Objekt wider? Die Antwort ist das Modulmuster (Module Muster).

Es gibt eine wichtige Funktion in JS: Anonyme Funktion (anonym Durch die Erstellung und Ausführung anonymer Funktionen bildet der Code in der anonymen Funktion einen Abschluss und bildet, kapselt und kontrolliert so die privaten und öffentlichen Eigenschaften eines Objekts und vermeidet so die Verbreitung globaler Variablen und Konflikte mit anderen Skriptkonflikten.

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

Klassische Modulmustervorlage

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 );
  }
 };
})();

Durch den Abschluss können wir sehen, dass wir bei Verwendung von myNamespace nur die Eigenschaften und Methoden von myPublic* sehen können, auf die Eigenschaften und Methoden von myPrivate* jedoch nicht direkt zugegriffen werden kann.

Basismodus-Erweiterungen

Mixins importieren

JS verfügt über eine wichtige Funktion namens implizite globale Variablen. Dies bedeutet, dass der JS-Interpreter immer dann, wenn er nach einer var-Deklaration für eine Variable sucht und diese nicht findet, als globale Variable betrachtet wird. Dies scheint bei der Verwendung globaler Variablen in Abschlüssen eine einfache Sache zu sein, kann aber gleichzeitig leicht zu Verwirrung im Code führen. Glücklicherweise können anonyme Funktionen auch Parameter empfangen, sodass wir durch Parameterübergabe die globalen Variablen, die wir verwenden möchten, in die anonyme Funktion importieren können, wodurch eine klarere und sauberere Verwendungsmethode bereitgestellt wird.

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

Modulexporte

Manchmal verwenden Sie nicht nur globale Variablen, sondern möchten auch eine eigene globale Variable deklarieren. Dies kann einfach über den Rückgabewert einer anonymen Funktion erreicht werden.

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

Erweiterte Erweiterungen

Basierend auf dem oben genannten Grundmuster können wir weiter expandieren.

Augmentation

Die Einschränkung des Basismodulmodus besteht darin, dass wir das gesamte Modul in einer Datei ablegen müssen. Was sollten wir also tun, wenn wir ein Modul auf mehrere Dateien verteilen müssen?

Eine Möglichkeit besteht darin, Module zu erweitern. Wir geben zuerst das Modul ein, fügen dann Attributmethoden hinzu und geben dann aus. Beispiele sind wie folgt

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

Lose Augmentation

Das obige Beispiel erfordert zunächst ein Modul und fügt dann darauf basierend neue Funktionen hinzu. Aber manchmal laden wir JS-Skripte asynchron, daher benötigen wir eine Methode zur Modulerstellung mit geringer Kopplung, die durch die folgende Struktur erreicht werden kann.

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

Untermodule

Untermodule können basierend auf dem Modul erstellt werden. Das Beispiel ist wie folgt:

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

Bisher haben wir kurz den Modulmodus vorgestellt, der der klassischste JS-Modus ist und von verschiedenen JS-Frameworks häufig verwendet wird. Dadurch wird Ihr Code gekapselter, strukturierter und OOP-fähiger.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So bedienen Sie die Vue-Ladesequenz

So stellen Sie den BootStrap-Header ein, um sich kreuzende Zeilen zu verhindern

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des JS-Modulmodus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!