JavaScript verwendet Schließungen, um Modularität zu erreichen

Nutzen Sie die Macht von Schließungen, aber oberflächlich betrachtet scheinen sie nichts mit Rückrufen zu tun zu haben. Werfen wir einen Blick auf die leistungsstärksten von allen: Module.

function foo() {
  var something = "cool";
  var another = [1, 2, 3];
  function doSomething() {
    console.log( something );
  }
  function doAnother() {
    console.log( another.join( " ! " ) );
  }
}

Wie Sie in diesem Code sehen können, gibt es hier keinen offensichtlichen Abschluss, sondern nur zwei private Datenvariablen, etwas und ein anderes, sowie die beiden Bei den internen Funktionen doSomething() und doAnother() ist ihr lexikalischer Gültigkeitsbereich (und dies ist der Abschluss) der interne Gültigkeitsbereich von foo().

Betrachten Sie als Nächstes den folgenden Code:

function CoolModule() {
  var something = "cool";
  var another = [1, 2, 3];
  function doSomething() {
    alert( something );
  }
  function doAnother() {
    alert( another.join( " ! " ) );
  }
  return {
    doSomething: doSomething,
    doAnother: doAnother
  };
}
var foo = CoolModule();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

Dieses Muster wird in JavaScript als Modul bezeichnet. Die gebräuchlichste Methode zur Implementierung des Modulmusters wird häufig als Modulexposition bezeichnet. Eine Variante davon wird hier gezeigt. Schauen wir uns den Code genauer an.

Zuallererst ist CoolModule() nur eine Funktion, die aufgerufen werden muss, um eine Modulinstanz zu erstellen. Weder der innere Bereich noch der Abschluss können erstellt werden, ohne die äußere Funktion auszuführen. Zweitens gibt CoolModule() ein Objekt zurück, das durch die Objektliteralsyntax { key: value, ... } dargestellt wird. Das zurückgegebene Objekt enthält Verweise auf interne Funktionen und nicht auf interne Datenvariablen. Wir halten interne Datenvariablen verborgen und privat. Sie können sich den Rückgabewert dieses Objekttyps im Wesentlichen als die öffentliche API des Moduls vorstellen. Der Rückgabewert dieses Objekttyps wird schließlich der externen Variablen foo zugewiesen, und Sie können ihn dann verwenden, um auf die Eigenschaftsmethoden in der API zuzugreifen, z. B. foo.doSomething().

Es ist nicht notwendig, ein tatsächliches Objekt vom Modul zurückzugeben, Sie können auch direkt eine interne Funktion zurückgeben. jQuery ist ein gutes Beispiel. jQuery und der $-Bezeichner sind die öffentliche API des jQuery-Moduls, aber sie sind selbst Funktionen (da Funktionen auch Objekte sind, können sie auch selbst Eigenschaften haben).

Die Funktionen doSomething() und doAnother() verfügen über Abschlüsse, die den Bereich innerhalb der Modulinstanz abdecken (implementiert durch den Aufruf von CoolModule()). Wenn wir eine Funktion außerhalb des lexikalischen Bereichs übergeben, indem wir ein Objekt zurückgeben, das eine Eigenschaftsreferenz enthält, haben wir die Bedingungen geschaffen, unter denen Abschlüsse beobachtet und geübt werden können. Wenn Sie es einfacher beschreiben möchten, muss das Modulmuster zwei notwendige Bedingungen erfüllen.

1. Es muss eine externe umschließende Funktion vorhanden sein, die mindestens einmal aufgerufen werden muss (bei jedem Aufruf wird eine neue Modulinstanz erstellt).

2. Die geschlossene Funktion muss mindestens eine interne Funktion zurückgeben, damit die interne Funktion einen Abschluss im privaten Bereich bilden und auf den privaten Status zugreifen oder ihn ändern kann.

Ein Objekt mit funktionalen Eigenschaften ist nicht wirklich ein Modul für sich. Aus praktischer Sicht ist ein von einem Funktionsaufruf zurückgegebenes Objekt, das nur Datenattribute und keine Abschlussfunktion enthält, kein echtes Modul. Der vorherige Beispielcode verfügt über einen separaten Modulersteller namens CoolModule(), der beliebig oft aufgerufen werden kann und bei jedem Aufruf eine neue Modulinstanz erstellt. Wenn nur eine Instanz benötigt wird, kann dieses Muster einfach verbessert werden, um das Singleton-Muster zu implementieren:

var foo = (function CoolModule() {
  var something = "cool";
  var another = [1, 2, 3];
  function doSomething() {
    alert( something );
  }
  function doAnother() {
    alert( another.join( " ! " ) );
  }
  return {
    doSomething: doSomething,
    doAnother: doAnother
  };
})();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

Rufen Sie diese Funktion sofort auf und geben Sie den Wert Assign direkt zurück zum Modulinstanzbezeichner foo des Singletons.

Module sind ebenfalls gewöhnliche Funktionen, daher können sie Parameter akzeptieren:

function CoolModule(id) {
  function identify() {
    console.log( id );
  }
  return {
    identify: identify
  };
}
var foo1 = CoolModule( "foo 1" );
var foo2 = CoolModule( "foo 2" );
foo1.identify(); // "foo 1"
foo2.identify(); // "foo 2"

Eine weitere einfache, aber leistungsstarke Variation des Modulmusters ist: Benennen Sie das Objekt, das als öffentliche API zurückgegeben werden soll:

var foo = (function CoolModule(id) {
function change() {
  // 修改公共API
  publicAPI.identify = identify2;
}
function identify1() {
  alert( id );
}
function identify2() {
  alert( id.toUpperCase() );
}
var publicAPI = {
  change: change,
  identify: identify1
};
return publicAPI;
})( "foo module" );
foo.identify(); // foo module
foo.change();
foo.identify(); // FOO MODULE

Auf ein Modul kann von innen zugegriffen werden, indem ein interner Verweis auf das öffentliche API-Objekt darin beibehalten wird Die Modulinstanz ändern, einschließlich des Hinzufügens oder Entfernens von Methoden und Eigenschaften sowie der Änderung ihrer Werte.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen oder Arbeiten helfen kann. Ich hoffe auch, die PHP-Chinese-Website zu unterstützen.

Weitere Artikel zum Thema JavaScript mit Schließungen zur Erzielung von Modularität finden Sie auf der chinesischen PHP-Website!