Nachteile des normalen JS-Ladens
Die Benutzeroberfläche muss nach dem Laden des js mit dem Rendern beginnen.
Wenn es Abhängigkeiten zwischen js gibt, müssen diese in der Reihenfolge der Abhängigkeiten geladen werden. Wenn die Abhängigkeiten komplex sind, ist es umständlicher, den Code zu schreiben und zu pflegen
So entstand require.js in der Stimme der breiten Massen des Volkes.
Die Rolle der require.js
Implementiere asynchrones Laden von JS, um eine Seitenunreaktion zu vermeiden
Verwaltung von Abhängigkeiten zwischen Modulen, um Code-Schreiben und -Wartung zu erleichtern
require.js Laden
Gehe zuerst auf die [offizielle Website] http://requirejs.org/ lade die neueste Version herunter
Legen Sie die heruntergeladenen oder kopierten require.js in das Projektverzeichnis ab.
Lade require.js auf der gewünschten Seite
Direct Load: Schreibe <scrip{filter}t src="js/require.js"></scrip{filter}t>
Asynchrones Laden: <scrip{filter}t src="js/require.js" defer async="true" ></scrip{filter}t>
Hinweis: Asynchron bedeutet, dass diese Datei asynchron geladen werden muss, um zu verhindern, dass die Webseite nicht mehr reagiert. IE unterstützt keine Asynchronität, also lade das Defer-Attribut;
Sobald die require.js geladen ist, ist der nächste Schritt, unseren eigenen Code zu laden. Angenommen, unsere eigene Codedatei ist main.js, ebenfalls unter dem js-Verzeichnis gelegt. Schreiben Sie also einfach Folgendes: <scrip{filter}t src="js/require.js" data-main="js/main"></scrip{filter}t>
Die Funktion des Attributs data-main besteht darin, das Hauptmodul des Webprogramms anzugeben. Im obigen Beispiel wird diese Datei zuerst require.js die main.js unter dem JS-Verzeichnis geladen. Da require.js Standard-Dateisuffix js ist, kannst du main.js zum Main abkürzen.
Wie man das Hauptmodul schreibt
Das main.js aus dem vorherigen Abschnitt heißt Hauptmodul. Das heißt die Einstiegsmethode für das gesamte Modul.
Wie schreibt man main.js
Methoden, die direkt auf die main.js geschrieben werden, ohne sich auf andere Module zu verlassen
main.function()
Das Hauptmodul hängt von anderen Moduln ab, daher verwenden Sie die Funktion require()
main.js
recarve(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
Hier ein Code
});
Die require()-Funktion akzeptiert zwei Parameter:
Der erste Parameter ist ein Array, das die Module darstellt, auf die man abhängen soll.
Der zweite Parameter ist eine Rückruffunktion, die aufgerufen wird, nachdem alle im Front angegebenen Module geladen wurden. Die hinzugefügten Module werden in Form von Parametern weitergegeben, sodass sie innerhalb der Callback-Funktion verwendet werden können.
Laden von Modulen
Beispiel: Wenn das abhängige Modul des Hauptmoduls (main.js) ['jquery', 'crypto-js', 'anything'] ist,
Laden standardmäßig
Wenn die Dateien dieser drei abhängigen Module im selben Verzeichnis jquery.js, crypto-js.js, anything.js und main.js sind, können sie gemäß dem vorherigen Abschnitt automatisch geladen werden
Config load require.config()
require.config() wird im Kopf des Hauptmoduls (main.js) geschrieben.
Wie AMD-Module geschrieben werden
require.js geladenes Modul nach AMD-Spezifikation. Das heißt, das Modul muss gemäß den Vorschriften von AMD geschrieben werden.
Konkret müssen Moduln durch eine bestimmte define()-Funktion definiert werden. Wenn ein Modul nicht von anderen Moduln abhängt, kann er direkt in der define()-Funktion definiert werden
Angenommen, es gibt jetzt eine math.js Datei, die ein Mathematikmodul definiert. Dann schreibe math.js:
So lädt man:
Wenn das Modul auch von anderen Moduln abhängt, muss das erste Argument der define()-Funktion ein Array sein, das die Abhängigkeiten des Moduls anzeigt.
Wenn die Funktion revire() das obige Modul lädt, lädt sie zuerst myLib.js Datei.
Laden von Nicht-AMD-Modulen
Es gibt viele Module auf dem Markt, die nicht der AMD-Spezifikation entsprechen, require.js geladen werden können
Bevor diese Module geladen werden können, müssen sie auf regore.config() gesetzt werden, um einige ihrer Eigenschaften zu definieren
Zum Beispiel sind noamd.js und noamddeps.js beide Module keine AMD-Module, und wenn du sie laden willst, musst du ihre Eigenschaften definieren:
require.js akzeptiert ein Konfigurationsobjekt, das zusätzlich zur Paths-Eigenschaft auch eine Shim-Eigenschaft speziell für die Konfiguration von Nicht-AMD-Modulen besitzt.
Konkret definiert jedes Modul:
- exportiert Wert (Name der Ausgabevariable): gibt den Namen des Moduls an, wenn es extern aufgerufen wird
- deps-Array: zeigt die Abhängigkeiten dieses Moduls an
Zum Beispiel kann das jQuery-Plugin wie folgt definiert werden:
require.js Plugin
require.js bietet außerdem eine Reihe von Plugins an, die einige besondere Funktionen implementieren
Das Domready-Plugin erlaubt es, die Rückruffunktion nach dem Laden der Seiten-DOM-Struktur auszuführen:
Text- und Bild-Plugins, die es require.js ermöglichen, Text- und Bilddateien zu laden:
Ähnliche Plugins umfassen JSON und MDOWN zum Laden von JSON- und Markdown-Dateien.
|
Veröffentlicht am 11.10.2017 09:31:50
|
|
|
