JavaScript-Modulmuster im Detail erklärt

In diesem Artikel wird hauptsächlich der JavaScript-Modulmodus vorgestellt und die relevanten Konzepte, Funktionen, Erweiterungen und anderen Betriebstechniken des js-Modulmodus anhand von Beispielen detailliert analysiert allen helfen.

Es gibt kein Klassenkonzept in JS. Wie spiegelt man also die öffentlichen und privaten Attribute von Objekten wider? Die Antwort ist das Modulmuster.

Es gibt ein wichtiges Merkmal in JS: Durch die Einrichtung und Ausführung der anonymen Funktion bildet der Code in der anonymen Funktion einen Abschluss und bildet so die privaten und öffentlichen Eigenschaften einer Objekt, um die Verbreitung globaler Variablen und Konflikte mit anderen Skripten zu vermeiden.

(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 Sie 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-Erweiterung

Mixins importieren

JS verfügt über eine wichtige Funktion namens implizite globale Variablen Das heißt, wenn der JS-Interpreter nach einer var-Deklaration für eine Variable sucht und diese nicht gefunden wird, wird die Variable als globale Variable betrachtet. 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 globale Variable von Ihnen deklarieren Dies kann leicht durch den Rückgabewert der 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 .

Erweiterung

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

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

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

Loose Augmentation

Das obige Beispiel muss zuerst ein Modul haben und dann hinzufügen eine neue auf dieser Basis Eigenschaften. 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

Sie können Untermodule basierend auf Modulen erstellen. Das Beispiel ist wie folgt:

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

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

Verwandte Empfehlungen:

Ein Modulmodus für Javascript_YUI.Ext-bezogene

Ein Modulmodus für Javascript-_Javascript-Kenntnisse

So machen Sie das js-Modul nützlicher

Das obige ist der detaillierte Inhalt vonJavaScript-Modulmuster im Detail erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!