Detaillierte Erläuterung der modularen Javascript-Programmierung

Modulare Programmierung ist ein sehr verbreitetes Javascript-Programmiermodell. Im Allgemeinen erleichtert es das Verständnis des Codes, es gibt jedoch viele bewährte Methoden, die nicht allgemein bekannt sind.

Grundlagen

Beginnen wir mit einem kurzen Überblick über einige modulare Muster, seit Eric Miraglia (der Entwickler von YUI) vor drei Jahren erstmals einen Blog veröffentlicht hat, in dem das modulare Muster beschrieben wird. Wenn Sie mit diesen modularen Modi bereits sehr vertraut sind, können Sie diesen Abschnitt überspringen und mit dem Lesen im „Erweiterten Modus“ beginnen.

Anonyme Schließung

Das ist die Grundstruktur, die alles möglich macht, und es ist auch das beste Feature von Javascript. Wir erstellen einfach eine anonyme Funktion und führen sie sofort aus. Der gesamte Code wird innerhalb dieser Funktion ausgeführt und befindet sich in einem Abschluss, der eine Privatisierung ermöglicht. Dies reicht aus, um die Variablen in diesen Abschlüssen während des gesamten Lebenszyklus unserer Anwendung verfügbar zu machen.

Code kopieren Der Code lautet wie folgt:

(Funktion () {

// ... alle Variablen und Funktionen liegen nur in diesem Bereich

// behält weiterhin Zugriff auf alle Globals

}());

Beachten Sie das Paar äußerster Klammern, die die anonyme Funktion umgeben. Aufgrund der Spracheigenschaften von Javascript ist dieses Klammerpaar erforderlich. In JavaScript gelten Anweisungen, die mit dem Schlüsselwort function beginnen, immer als Funktionsdeklarationen. Wenn Sie diesen Code in Klammern setzen, wird dem Interpreter mitgeteilt, dass es sich um einen Funktionsausdruck handelt.

Globaler Variablenimport

Javascript verfügt über eine Funktion namens implizite globale Variablen. Unabhängig davon, wo ein Variablenname verwendet wird, folgt der Interpreter der Bereichskette rückwärts, um die var-Deklarationsanweisung der Variablen zu finden. Wenn keine var-Deklaration gefunden wird, wird die Variable als globale Variable behandelt. Wenn diese Variable in einer Zuweisungsanweisung verwendet wird und die Variable nicht existiert, wird eine globale Variable erstellt. Dies bedeutet, dass es einfach ist, globale Variablen in anonymen Abschlüssen zu verwenden oder zu erstellen. Leider führt dies zu Code, der äußerst schwierig zu warten ist, da das menschliche Auge nicht auf den ersten Blick erkennen kann, welche Variablen global sind.

Glücklicherweise bietet unsere Anonymitätsfunktion eine einfache Lösung. Indem wir einfach globale Variablen als Argumente an unsere anonymen Funktionen übergeben, erhalten wir saubereren und schnelleren Code als implizite globale Variablen. Hier ist ein Beispiel:

Code kopieren Der Code lautet wie folgt:

(Funktion ($, YAHOO) {

// habe jetzt Zugriff auf die Globals jQuery (als $) und YAHOO in diesem Code

}(jQuery, YAHOO));

Modulexport

Manchmal möchten Sie globale Variablen nicht nur verwenden, sondern sie auch für die wiederholte Verwendung deklarieren. Das geht ganz einfach, indem wir sie exportieren – über den Rückgabewert der anonymen Funktion. Dadurch wird ein grundlegender Prototyp des modularen Musters fertiggestellt, gefolgt von einem vollständigen Beispiel:

Code kopieren Der Code lautet wie folgt:

var MODULE = (function () {

var my = {},

        privateVariable = 1;

Funktion privateMethod() {

               // ...

}

My.moduleProperty = 1;

My.moduleMethod = function () {

               // ...

};

Gib mein zurück;

}());

Beachten Sie, dass wir ein globales Modul namens MODULE deklariert haben, das zwei öffentliche Eigenschaften hat: eine Methode namens MODULE.moduleMethod und eine Variable namens MODULE.moduleProperty. Darüber hinaus behält es mithilfe anonymer Funktionsabschlüsse einen privaten integrierten Zustand bei. Gleichzeitig können wir die benötigten globalen Variablen problemlos importieren und dieses modulare Muster verwenden, wie wir zuvor gelernt haben.

Erweiterter Modus

Die im obigen Abschnitt beschriebene Grundlage reicht für viele Situationen aus, und jetzt können wir dieses modulare Muster weiterentwickeln, um leistungsfähigere und erweiterbare Strukturen zu schaffen. Beginnen wir mit dem MODULE-Modul und stellen diese erweiterten Modi nacheinander vor.

Vergrößerungsmodus

Eine Einschränkung des modularen Modus besteht darin, dass sich das gesamte Modul in einer Datei befinden muss. Jeder, der an einem großen Projekt gearbeitet hat, wird den Wert der Aufteilung von JS in mehrere Dateien verstehen. Glücklicherweise haben wir eine großartige Implementierung für Verstärkungsmodule. Zuerst importieren wir ein Modul, fügen ihm Eigenschaften hinzu und exportieren es schließlich. Hier ist ein Beispiel – vergrößern Sie es vom ursprünglichen MODUL:

Code kopieren Der Code lautet wie folgt:

var MODULE = (function (my) {

My.anotherMethod = function () {

// Methode hinzugefügt...

};

Gib mein zurück;

}(MODUL));

Wir verwenden das Schlüsselwort var, um die Konsistenz sicherzustellen, obwohl es hier nicht erforderlich ist. Nachdem dieser Code ausgeführt wurde, verfügt unser Modul bereits über eine neue öffentliche Methode namens MODULE.anotherMethod. Diese Amplifikationsdatei verwaltet auch ihren eigenen privaten integrierten Zustand und importierte Objekte.

Weitwinkel-Zoommodus

In unserem obigen Beispiel muss zuerst unser Initialisierungsmodul ausgeführt werden, und dann kann das Verstärkungsmodul ausgeführt werden. Natürlich ist dies manchmal nicht unbedingt erforderlich. Eines der besten Dinge, die eine Javascript-Anwendung tun kann, um die Leistung zu verbessern, ist die asynchrone Ausführung von Skripten. Wir können flexible mehrteilige Module erstellen und ermöglichen, dass diese durch den permissiven Vergrößerungsmodus in beliebiger Reihenfolge geladen werden können. Jede Datei muss gemäß der folgenden Struktur organisiert werden:

Code kopieren Der Code lautet wie folgt:

var MODULE = (function (my) {

// Funktionen hinzufügen...

Gib mein zurück;

}(MODULE || {}));

In diesem Muster ist der var-Ausdruck erforderlich. Beachten Sie, dass diese Importanweisung MODULE erstellt, wenn MODULE noch nicht initialisiert wurde. Das bedeutet, dass Sie ein Tool wie LABjs verwenden können, um alle Ihre Moduldateien parallel zu laden, ohne sie zu blockieren.

Enger Zoommodus

Der Wide-Zoom-Modus ist großartig, bringt aber auch einige Einschränkungen für Ihre Module mit sich. Am wichtigsten ist, dass Sie die Eigenschaften eines Moduls nicht sicher überschreiben können. Sie können während der Initialisierung auch keine Eigenschaften aus anderen Dateien verwenden (Sie können sie jedoch zur Laufzeit verwenden). Der enge Verstärkungsmodus beinhaltet eine sequentielle Abfolge von Lasten und ermöglicht das Überschreiben von Eigenschaften. Hier ist ein einfaches Beispiel (vergrößert unser Originalmodul):

Code kopieren Der Code lautet wie folgt:

var MODULE = (function (my) {

var old_moduleMethod = my.moduleMethod;

My.moduleMethod = function () {

// Methodenüberschreibung, hat Zugriff auf old über old_moduleMethod...

};

Gib mein zurück;

}(MODUL));

Wir haben die Implementierung von MODULE.moduleMethod im obigen Beispiel überschrieben, können aber bei Bedarf einen Verweis auf die ursprüngliche Methode beibehalten.

Klonen und Vererbung

Code kopieren Der Code lautet wie folgt:

var MODULE_TWO = (Funktion (alt) {

var my = {},

         Taste;

for (alt eingeben) {

If (old.hasOwnProperty(key)) {

                my[key] = old[key];

}

}

var super_moduleMethod = old.moduleMethod;

My.moduleMethod = function () {

// Methode auf dem Klon überschreiben, Zugriff auf Super über super_moduleMethod

};

Gib mein zurück;

}(MODUL));

Dieser Modus ist wahrscheinlich die am wenigsten flexible Option. Dadurch sieht der Code zwar sauberer aus, aber das geht zu Lasten der Flexibilität. Wie ich oben geschrieben habe, wird eine Eigenschaft, wenn sie ein Objekt oder eine Funktion ist, nicht kopiert, sondern zu einem zweiten Verweis auf das Objekt oder die Funktion. Wenn Sie einen davon ändern, wird gleichzeitig auch der andere geändert (Anmerkung des Übersetzers: Weil sie im Grunde gleich sind!). Dieses Problem beim Klonen von Objekten kann durch den rekursiven Klonprozess gelöst werden, das Klonen von Funktionen kann es jedoch möglicherweise nicht lösen. Möglicherweise kann eval zur Lösung verwendet werden. Daher beschreibe ich diese Methode in diesem Artikel nur der Vollständigkeit halber.

Dateiübergreifende private Variablen

Bei der Aufteilung eines Moduls in mehrere Dateien gibt es eine große Einschränkung: Jede Datei verwaltet ihre eigenen privaten Variablen und kann nicht auf die privaten Variablen anderer Dateien zugreifen. Aber dieses Problem kann gelöst werden. Hier ist ein Beispiel für ein permissives Modul, das private Variablen dateiübergreifend verwaltet:

Code kopieren Der Code lautet wie folgt:

var MODULE = (function (my) {

var _private = my._private = my._private || {},

_seal = my._seal = my._seal ||. function () {

                 delete my._private;

                 delete my._seal;

                                delete my._unseal;

},

_unseal = my._unseal = my._unseal || function () {

                 my._private = _private;

                 my._seal = _seal;

                   my._unseal = _unseal;

        };

// permanenter Zugriff auf _private, _seal und _unseal

Gib mein zurück;

}(MODULE || {}));

Alle Dateien können Attribute für ihre jeweiligen _private-Variablen festlegen, und es versteht sich, dass andere Dateien auf sie zugreifen können. Sobald dieses Modul geladen ist, kann die Anwendung MODULE._seal() aufrufen, um externe Aufrufe des internen _private zu verhindern. Wenn das Modul neu skaliert werden muss, können interne Methoden in beiden Dateien _unseal() aufrufen, bevor die neue Datei geladen wird, und _seal() erneut aufrufen, nachdem die neue Datei ausgeführt wurde. Ich verwende dieses Muster heute bei der Arbeit und habe diesen Ansatz nirgendwo anders gesehen. Ich denke, das ist ein sehr nützliches Muster und es lohnt sich, einen Artikel über das Muster selbst zu schreiben.

Submodul

Unser letzter erweiterter Modus ist bei weitem der einfachste. Es gibt viele hervorragende Beispiele für die Erstellung von Submodulen. Dies ist genau so, als würde man ein reguläres Modul erstellen:

Code kopieren Der Code lautet wie folgt:

MODULE.sub = (function () {

var my = {};

// ...

Gib mein zurück;

}());

Obwohl dies einfach erscheinen mag, denke ich, dass es hier erwähnenswert ist. Untermodule verfügen über alle erweiterten Vorteile allgemeiner Module, einschließlich Verstärkungsmodus und Privatisierungsmodus.

Fazit

Die meisten erweiterten Modi können miteinander kombiniert werden, um einen nützlicheren Modus zu erstellen. Wenn ich ein modulares Muster zum Entwerfen komplexer Anwendungen empfehlen würde, wäre es eine Kombination aus milden Erweiterungsmustern, privaten Variablen und Submodulen.

Ich habe nicht über Leistungsprobleme bei diesen Mustern nachgedacht, aber ich möchte dies lieber auf eine einfachere Art und Weise übersetzen: Wenn ein modulares Muster eine gute Leistung aufweist, minimiert es den Download erheblich diese Skriptdatei schneller. Die Verwendung des milden Verstärkungsmodus ermöglicht einfache, nicht blockierende parallele Downloads, was zu schnelleren Downloads führt. Die Initialisierungszeit ist möglicherweise etwas langsamer als bei anderen Methoden, aber der Kompromiss lohnt sich. Solange globale Variablen korrekt importiert werden, sollte es keine Auswirkungen auf die Laufzeitleistung geben, und es ist möglich, schnellere Ausführungen in Submodulen zu erzielen, indem Referenzketten mit privaten Variablen verkürzt werden.

Abschließend sehen Sie hier ein Beispiel für ein Submodul, das sich dynamisch in sein übergeordnetes Modul lädt (wobei das übergeordnete Modul erstellt wird, wenn es nicht existiert). Der Einfachheit halber habe ich die privaten Variablen entfernt. Natürlich ist das Hinzufügen privater Variablen auch sehr einfach. Dieses Programmiermodell ermöglicht das parallele Laden einer gesamten komplexen hierarchischen Codebasis über Submodule.

Code kopieren Der Code lautet wie folgt:

var UTIL = (function (parent, $) {

var my = parent.ajax = parent.ajax || {};

My.get = Funktion (URL, Parameter, Rückruf) {

// ok, ich schummele also ein bisschen :)

          return $.getJSON(url, params, callback);

};

// usw...

Übergeordnetes Element zurückgeben;

}(UTIL || {}, jQuery));

Dieser Artikel fasst die aktuellen Best Practices der „Javascript Modular Programming“ zusammen und erklärt, wie man sie in die Praxis umsetzt. Obwohl dies kein Einführungstutorial ist, können Sie es verstehen, solange Sie ein wenig Verständnis für die grundlegende Syntax von Javascript haben.

Detaillierte Erläuterung der modularen Javascript-Programmierung_Grundkenntnisse