Modulare JavaScript-Programmierung (1): So schreiben Sie Module

Da Websites nach und nach zu „Internetanwendungen“ werden, werden die in Webseiten eingebetteten Javascript-Codes immer größer und komplexer.

Webseiten ähneln immer mehr Desktop-Programmen und erfordern die Arbeitsteilung eines Teams, Fortschrittsmanagement, Unit-Tests usw. Entwickler müssen Software-Engineering-Methoden verwenden um die Geschäftslogik von Webseiten zu verwalten.

JavaScript-ModularisierungProgrammierung ist zu einem dringenden Bedarf geworden. Im Idealfall müssen Entwickler nur die Kerngeschäftslogik implementieren und andere Module können von anderen geladen werden.

Javascript ist jedoch keine modulare Programmiersprache. Es unterstützt keine „Klassen“, geschweige denn „Module“. (Die sechste Ausgabe des ECMAScript-Standards, die derzeit formuliert wird, wird offiziell „Klassen“ und „Module“ unterstützen, aber es wird lange dauern, bis sie in die Praxis umgesetzt wird.)

Die Javascript-Community hat Es wurden große Anstrengungen unternommen, um das Vorhandene zu verbessern. In der laufenden Umgebung wird der Effekt des „Moduls“ realisiert. Dieser Artikel fasst die aktuellen Best Practices der „Modularen Javascript-Programmierung“ 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.

1. Originalschrift

Ein Modul ist eine Reihe von Methoden zur Implementierung bestimmter Funktionen.

Solange verschiedene Funktionen (und Variablen, die den Status aufzeichnen) einfach zusammengefügt werden, wird daraus ein Modul.

function m1(){
　　//...
}
function m2(){
　　//...
}

Die oben genannten Funktionen m1() und m2() bilden ein Modul. Wenn Sie es verwenden, rufen Sie es einfach direkt auf.

Die Nachteile dieses Ansatzes liegen auf der Hand: Er „verschmutzt“ globale Variablen, es gibt keine Garantie dafür, dass Variablennamen nicht mit anderen Modulen in Konflikt geraten, und es besteht keine direkte Beziehung zwischen Modulmitgliedern.

2. Objektschreiben

Um die oben genannten Mängel zu beheben, kann das Modul als Objekt geschrieben werden und alle Modulmitglieder werden in diesem Objekt platziert.

　　var module1 = new Object({
　　　　_count : 0,
　　　　m1 : function (){
　　　　　　//...
　　　　},
　　　　m2 : function (){
　　　　　　//...
　　　　}
　　});

Die oben genannten Funktionen m1() und m2() sind im Modul1-Objekt gekapselt. Bei Verwendung werden die Eigenschaften dieses Objekts aufgerufen.

module1.m1();

Diese Schreibweise macht jedoch alle Modulmitglieder verfügbar und der interne Status kann extern neu geschrieben werden. Beispielsweise kann externer Code den Wert eines internen Zählers direkt ändern.

module1._count = 5;

3. So schreiben Sie eine sofort ausgeführte Funktion

Die Verwendung von „Immediately-Invoked Function Expression (IIFE)“ kann den Zweck erreichen, private Mitglieder nicht offenzulegen.

　　var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();

Mit der oben genannten Schreibmethode kann externer Code die interne Variable _count nicht lesen.

console.info(module1._count); //undefined

Modul1 ist die grundlegende Schreibmethode des Javascript-Moduls. Als nächstes werden wir diese Schreibmethode verarbeiten.

4. Verstärkungsmodus

Wenn ein Modul sehr groß ist und in mehrere Teile aufgeteilt werden muss oder ein Modul ein anderes Modul erben muss, muss der „Erweiterungsmodus“ verwendet werden.

　　var module1 = (function (mod){
　　　　mod.m3 = function () {
　　　　　　//...
　　　　};
　　　　return mod;
　　})(module1);

Der obige Code fügt eine neue Methode m3() zum Modul module1 hinzu und gibt dann das neue Modul module1 zurück.

5. Lose Erweiterungsmodus (Loose Erweiterung)

In der Browserumgebung wird normalerweise jeder Teil des Moduls aus dem Internet bezogen, und manchmal ist es unmöglich zu wissen, welcher Teil geladen wird Erste. Wenn die Schreibmethode im vorherigen Abschnitt verwendet wird, kann es sein, dass der erste ausgeführte Teil ein nicht vorhandenes leeres Objekt lädt. In diesem Fall muss der „Erweiterungsmodus“ verwendet werden.

　　var module1 = ( function (mod){
　　　　//...
　　　　return mod;
　　})(window.module1 || {});

Im Vergleich zum „Vergrößerungsmodus“ bedeutet der „große Vergrößerungsmodus“, dass die Parameter der „Sofortausführungsfunktion“ leere Objekte sein können.

6. Globale Variablen eingeben

Unabhängigkeit ist ein wichtiges Merkmal des Moduls. Es ist am besten, nicht direkt mit anderen Teilen des Programms innerhalb des Moduls zu interagieren.

Um globale Variablen innerhalb eines Moduls aufzurufen, müssen andere Variablen explizit in das Modul eingetragen werden.

　　var module1 = (function ($, YAHOO) {
　　　　//...
　　})(jQuery, YAHOO);

Das obige Modul1-Modul muss die jQuery-Bibliothek und die YUI-Bibliothek verwenden, daher werden diese beiden Bibliotheken (eigentlich zwei Module) als Parameter in Modul1 eingegeben. Dadurch wird nicht nur die Unabhängigkeit der Module gewährleistet, sondern auch die Abhängigkeiten zwischen Modulen deutlich. Weitere Informationen zu diesem Thema finden Sie in Ben Cherrys berühmtem Artikel „JavaScript Module Pattern: In-Depth“.

Im zweiten Teil dieser Serie wird erläutert, wie verschiedene Module organisiert und Abhängigkeiten zwischen Modulen in der Browserumgebung verwaltet werden.

Das Obige ist der Inhalt der modularen JavaScript-Programmierung (1): Wie man Module schreibt. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!