Detaillierte Analyse der modularen JavaScript-Entwicklung

Modulare Entwicklung ist ein sehr wichtiges Konzept in der Programmierung Entwicklung. Die späteren Wartungskosten eines hervorragenden modularen Projekts können erheblich reduziert werden. In diesem Artikel werden hauptsächlich die Dinge zur JavaScriptmodularen-Entwicklung vorgestellt. Der Artikel erklärt den modularen Entwicklungsprozess intuitiver anhand einer Kurzgeschichte.

Little A ist Front-End-Ingenieur eines Unternehmerteams und verantwortlich für das Schreiben des Javascript-Programms des Projekts.

GlobalVariableKonflikt

Basierend auf seiner eigenen Erfahrung extrahierte Little A zunächst einige häufig verwendete Funktionen und schrieb sie als Die Funktion wird in einer öffentlichen Datei base.js abgelegt:

var _ = {
    $: function(id) { return document.getElementById(id); },
    getCookie: function(key) { ... },
    setCookie: function(key, value) { ... }
};

Little A fügt diese Funktionen in das _Objekt ein, um Konflikte durch zu viele globale Variablen zu verhindern. Er teilte anderen Teammitgliedern mit, dass jeder, der diese Funktionen nutzen möchte, einfach base.js importieren solle.

Little C ist ein Kollege von Little A. Er berichtete Little A, dass seine Seite eine Klassenbibliothek namens underscore.js eingeführt hat und diese Klassenbibliothek auch globale Variablen besetzen wird, this wird mit _ in base.js in Konflikt geraten. Little A dachte bei sich, dass underscore.js eine Bibliothek eines Drittanbieters ist und wahrscheinlich schwer zu ändern ist, aber base.js wurde auf vielen Seiten bereitgestellt und es ist unmöglich, es zu ändern. Am Ende hatte Little A keine andere Wahl, als die von underscore.js belegten globalen Variablen zu ändern.

Zu diesem Zeitpunkt entdeckte Little A, dass die Platzierung aller Funktionen in einem Namensraum die Wahrscheinlichkeit globaler Variablenkonflikte verringern kann, das Problem globaler Variablenkonflikte jedoch nicht löst.

Abhängigkeiten

Mit der Geschäftsentwicklung hat Xiao A eine Reihe von Funktionsbibliotheken und UI-Komponenten geschrieben, beispielsweise die Tab-Switching-Komponente tabs.js. Diese Komponente muss base.js aufrufen und Funktionen in util.js.

Eines Tages berichteten die neuen Kollegen Xiao D und Xiao A, dass sie tabs.js auf der Seite zitiert hatten, die Funktion jedoch nicht normal war. Little A entdeckte das Problem auf den ersten Blick. Es stellte sich heraus, dass Little D nicht wusste, dass tabs.js von base.js und util.js abhängt, und er fügte keine Verweise auf diese beiden Dateien hinzu. Also nahm er sofort Änderungen vor:

<script src="tabs.js"></script>
<script src="base.js"></script>
<script src="util.js"></script>

Die Funktion war jedoch immer noch abnormal. Zu diesem Zeitpunkt brachte Little A Little D bei: „Sie sagen, es sei Abhängigkeit, also muss die abhängige Partei vor der platziert werden.“ vertrauende Partei. Es stellt sich heraus, dass Xiao D base.js und util.js nach tabs.js eingefügt hat.

Little A dachte bei sich, dass er als Autor natürlich die Abhängigkeiten von Komponenten kennt, es aber für andere, insbesondere für Neulinge, schwer zu sagen ist.

Nach einiger Zeit fügte Xiao A der Tab-Switching-Komponente eine Funktion hinzu. Um diese Funktion zu realisieren, muss tabs.js die Funktion auch in ui.js aufrufen. Zu diesem Zeitpunkt entdeckte Little A ein ernstes Problem. Er musste auf allen Seiten, die tabs.js aufriefen, Verweise auf ui.js hinzufügen! ! !

Nach einiger Zeit optimierte Xiao A tabs.js nicht mehr von util.js, daher entfernte er util.js von allen Seiten, die tabs.js verwenden, um die Leistung zu verbessern. Seine Änderung verursachte ein großes Problem. Das Testteam MM teilte ihm mit, dass einige Seiten abnormal seien. Little A warf einen Blick darauf und stellte plötzlich fest, dass andere Funktionen einiger Seiten Funktionen in util.js verwendeten. Er entfernte den Verweis auf diese Datei und es trat ein Fehler auf. Um die normale Funktionalität sicherzustellen, stellte er den Code wieder her.

Noch einmal ein kleiner Gedanke: Gibt es eine Möglichkeit, Abhängigkeiten zu ändern, ohne die Seiten einzeln zu ändern, ohne andere Funktionen zu beeinträchtigen?

Modularisierung

Als Little A im Internet surfte, entdeckte er zufällig eine neuartige modulare Codierungsmethode, die alle Probleme lösen konnte, auf die er zuvor gestoßen war.

Bei der modularen Programmierung ist jede Datei ein Modul. Jedes Modul wird durch eine Funktion namens „define“ erstellt. Nach der Umwandlung von base.js in ein Modul sieht der Code beispielsweise wie folgt aus:

define(function(require, exports, module) {
    exports.$ = function(id) { return document.getElementById(id); };
    exports.getCookie = function(key) { ... };
    exports.setCookie = function(key, value) { ... };
});

Die von base.js bereitgestellten

Schnittstellen werden alle dem Exportobjekt hinzugefügt. Und Exporte sind lokale Variablen, und der Code des gesamten Moduls belegt nicht die Hälfte der globalen Variablen.

Wie rufe ich die von einem Modul bereitgestellte Schnittstelle auf? Nehmen Sie tabs.js als Beispiel, es hängt von base.js und util.js ab:

define(function(require, exports, module) {
    var _ = require('base.js'), util = require('util.js');
    var p_tabs = _.$('tabs');
    // .... 其他代码
});

Ein Modul kann die Schnittstellen anderer Module über die lokale Funktion require abrufen. Zu diesem Zeitpunkt sind die Variablen _ und util beide lokale Variablen, und der

Variablenname wird vollständig vom Entwickler gesteuert. Wenn Ihnen _ nicht gefällt, können Sie auch base:

Sobald Sie util.js entfernen und ui.js hinzufügen möchten, müssen Sie nur tabs.js ändern:

define(function(require, exports, module) {
    var base = require('base.js'), util = require('util.js');
    var p_tabs = base.$('tabs');
    // .... 其他代码
});

Loader

define(function(require, exports, module) {
    var base = require('base.js'), ui = require('ui.js');
    var p_tabs = base.$('tabs');
    // .... 其他代码
});

Aufgrund des Fehlens eines nativen Browsers Unterstützung, wenn wir modular programmieren wollen, müssen wir einen sogenannten Loader verwenden.

Derzeit gibt es viele Implementierungen von Loadern, wie zum Beispiel require.js und seajs. Die JRaiser-Klassenbibliothek verfügt außerdem über einen eigenen Loader.

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse der modularen JavaScript-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!