Heim >Web-Frontend >js-Tutorial >Modulare Entwurfsmuster in JavaScript

Modulare Entwurfsmuster in JavaScript

Christopher Nolan
Christopher NolanOriginal
2025-02-25 19:44:22862Durchsuche

Modular Design Patterns in JavaScript

Kernpunkte

  • Mitgliedstyp: Meister Sie die Unterschiede zwischen öffentlichen, privaten, privilegierten und geschützten Mitgliedern in JavaScript.
  • Modulmodusvariationen: Erfahren Sie die Nuancen zwischen den grundlegenden Modulmodi und den enthüllenden Modulmodi, die einen konsistenten internen Codierungsstil und eine flexible Steuerung der Offenlegung liefern.
  • Verwenden von privilegierten Mitgliedern: Verwenden Sie privilegierte Mitglieder, um private Variablen sicher durch öffentliche Methoden freizulegen und kontrollierter Zugriff bei der Aufrechterhaltung der Einkapselung zu ermöglichen.
  • STRAPTIEREN SIE MITGLIEDERPOLICE: Schutz in JavaScript, indem Daten in einem kontrollierten Bereich vorübergehend freigelegt werden und dann auf private Daten zurückkehren, wodurch Daten zwischen mehreren Modulen ohne externen Zugriff ohne externes Zugriff geteilt werden.
  • Verbesserte Technologie: Methoden wie apply() für die Bindung zusätzlicher Module in einen einzigen Kontext und damit zur Aufrechterhaltung der Unabhängigkeit und der Verwaltungsfähigkeit des Moduls.

In diesem Artikel wird die Struktur und die Vorteile des Entwurfsmusters des Erweiterungsmoduls erläutert, das vier Hauptmitglied -Typen enthält:

  • öffentliches Mitglied: Mitglieder von überall zugänglich.
  • Private Mitglied: Mitglieder, auf die nur innerhalb eines Objekts zugegriffen werden kann.
  • Private Mitglieder: Mitglieder, auf die nur direkt aus dem Objekt zugegriffen werden kann, aber durch die öffentliche Methode indirekt von außen zugegriffen werden kann . Mitglieder schützen:
  • Mitglieder, auf die nur in Objekten oder aus einem ihrer Module zugegriffen werden können.
  • In diesem Artikel geht es nicht um objektorientierte Programmierung, da die Struktur, die wir erstellen, ein Singleton-Muster ist, bei dem es sich um eine einzelne Instanzstruktur handelt, die nicht mehrmals instanziiert werden kann. Tatsächlich wird es überhaupt nicht instanziiert (aus Sicht des Besitzes eines Konstruktors), daher ist es ein objektbasiertes Muster, kein objektorientiertes Muster.
  • Weitere Informationen zu den Unterschieden zwischen objektbasierten und objektorientierten Programmierungen und einer Einführung in die objektorientierte Programmierung in JavaScript empfehlen Sie, den Artikel von Ryan Frishberg zu lesen: JavaScript-objektorientierte Programmierung.

modulares Entwurfsmuster

Hier wird als grundlegendes Designmuster verwendet, bei dem es sich um eine Variante des klassischen Modulmusters handelt, jedoch mit mehr Kontrolle. Obwohl einige Artikel diese Muster beschrieben haben, erklären nur wenige wirklich, wie sie funktionieren, und nur wenige haben ein so komplettes Feature -Set!

Grundmodulmodus

Klassisches Modulmuster wickelt den gesamten Code des Skripts in eine anonyme Funktion wörtlich, die bei der Rückgabe einer einzelnen Variablen zugeordnet ist. Eine Funktionsbuchstätigkeit ist nur eine Funktion, die sich selbst aufruft, daher ist die endgültige Zuordnung einer Funktion wörtlich keine Funktion, sondern jeder Wert, der von der Funktion zurückgegeben wird. Um ein einfaches Beispiel zu geben, enthält die Funktion wörtlich eine Berechnung, so dass der Wert der Summe das Ergebnis dieser Berechnung ist:

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

Um die Bedeutung dieser Syntax zu veranschaulichen, ist Folgendes derselbe Code, der in eine benannte Funktion abstrahiert wird:

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

In diesem Fall müssen wir keine Klammern um calculate umsetzen, aber wenn wir anonyme Funktionen verwenden, müssen wir dies tun, um ihn als einzelne Ausdruck ohne Voraussetzung zu bewerten.

öffentliche und private Mitglieder

In Funktionsliteralen können wir also jeden anderen Code - wie Variablen, Eigenschaften und Funktionen - und die verschiedenen Arten von Syntax, die zur Definition interner Daten verwendet werden, die öffentlichen Mitglieder und die Teilung zwischen privaten Mitgliedern bestimmen. Hier ist ein Beispiel:

Da wir ein Attributobjekt zurückgeben und das Objekt
<code class="language-javascript">var MyModule = (function() {
  var myPrivateData = 303;
  function myPrivateFunction() {
    alert('private');
  }
  return {
    myPublicData : 42,
    myPublicFunction : function() {
      alert('public');
    }
  };
})();</code>
zugewiesen wird, können auf diese Attribute von außerhalb des Objekts zugegriffen werden, z. B.

und MyModule. Wir können jedoch einfach nicht auf MyModule.myPublicData oder MyModule.myPublicFunction zugreifen, da in ihrem ursprünglichen Bereich nur auf Variablen zugegriffen werden können. Der Umfang einer Variablen besteht darin, ihren Kontext zu definieren, der durch die myPrivateData -Anweisung bestimmt wird. In diesem Beispiel ist der Umfang privater Variablen myPrivateFunction Objekte, sodass nur innerhalb dieses Objekts aus zugegriffen werden kann. var MyModule

enthüllen Modulmodus

Verwenden des Modulmodus verwenden wir zwei verschiedene Syntaxe, um den Unterschied zwischen öffentlichen und privaten Mitgliedern zu erzeugen. Das Erkennen des Modulmusters ist eine Variante dieses Musters, die es uns ermöglicht, dieselbe Syntax für alle internen Konstrukte zu verwenden, wodurch nur die Literalbeschreibung am Ende aufgeschoben wird, um öffentliche Mitglieder zurückzugeben (oder zu enthüllen). Schauen wir uns dieses Objekt noch einmal an, aber diesmal mithilfe des Modulmodus von DENCE:

Die Aufteilung zwischen öffentlichen und privaten Mitgliedern ist immer noch gleich, aber diesmal wird sie nicht von der ursprünglichen Syntax implementiert, mit der diese Mitglieder definiert werden, sondern einfach durch den zurückgegebenen Inhalt. Dadurch wird das Aufdecken des Modulmusters zu einer nützlichen Variante, da es die Verwendung intern konsistenter Codierungsstile ermöglicht. Dies bedeutet auch, dass Sie bei der Rückkehr den Namen des öffentlichen Mitglieds ändern und sogar die Mitglieder jederzeit ändern können.
<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>
Dieses Muster wurde von Christian Heilmann innoviert, der dieses Muster und sein zugrunde liegendes Modulmuster in seinem Artikel erklärte: Wieder mit dem Modulmuster - etwas für die Welt enthüllen.

(Der folgende Inhalt wird aufgrund der Länge des Artikels in Segmenten ausgegeben)

Das obige ist der detaillierte Inhalt vonModulare Entwurfsmuster in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:10 JQuery Flip Effect -PluginsNächster Artikel:10 JQuery Flip Effect -Plugins