Erforderndejs Einführung
RequestJs wurde von James Burke gegründet, der auch der Gründer von AMD -Spezifikationen ist.
Erforderlich können Sie JavaScript auf andere Weise als gewöhnlich schreiben. Sie verwenden keine Skript -Tags mehr, um JS -Dateien in HTML einzuführen, und Sie müssen Abhängigkeiten nicht mehr über Skript -Tags verwalten.
RequiredJS ist ein sehr kleines JavaScript -Modul -Lade -Framework und einer der besten Implementierer der AMD -Spezifikation. Die neueste Version von RequestJS ist nur 14.000 nach der Komprimierung, was sehr leicht ist. Es kann auch in Verbindung mit anderen Frameworks funktionieren, und die Verwendung von RequestJs verbessert sicherlich die Qualität Ihres Front-End-Code.
Es sind einige Punkte zu erwähnen, die bei der Verwendung von RequestJS für asynchrones Modul -Ladungen beachtet werden müssen:
1. zwei Möglichkeiten, Moduldefinition zu schreiben
1. Funktionsdefinitionen, die in Abhängigkeiten vorhanden sind
Wenn das Modul Abhängigkeiten hat: Der erste Parameter ist das Namensarray von Abhängigkeiten; Der zweite Parameter ist eine Funktion. Nachdem alle Abhängigkeiten des Moduls geladen wurden, wird die Funktion aufgerufen, um das Modul zu definieren, sodass das Modul ein Objekt zurückgeben sollte, das das Modul definiert. Die Abhängigkeitsbeziehung wird in die Funktion als Parameter injiziert, und die Parameterliste entspricht der Liste der Abhängigkeitsname eins nach dem anderen.
define (['a'], function (aj) {var Hallo = function () {aj.hello ('Ich bin c.js');} return {Hallo: Hallo}});PS: Der Rückgabewerttyp des Moduls ist nicht gezwungen, ein Objekt zu sein, und der Rückgabewert einer Funktion ist zulässig.
2. Definition des CommonJS -Modulformats
Erforderlich: Wird verwendet, um Methoden einzuführen, die von anderen Modulen abhängen.
Exporte: Exportiert ein Objekt, das eine Modulvariable oder -methode exportiert.
Modul: Enthält Informationen zu diesem Modul.
Required.config ({BaseUrl: "", config: {'b': {size: 'groß'}}, Pfade: {a: 'base/a', b: 'base/b', c: 'base/c'}}); Define (function (fordern, exports, modul) {var aj = required ("a"); var hloy = function () {aj.hello ('i Am b.js');} var hello2 = function () {aj.hello ('i Am B.js22'); Exporte); console.log ("b.js: modul", modul); console.log ("b.js: config", modul.config ()); // kann nicht zusammen verwendet werden, return wird die vorherigen Exporte überschreiben/*return {hello: hello2}*/});PS: Das Rückgabeobjekt und die Exporte können nicht zusammen verwendet werden. Die Rückgabe überschreibt die vorherigen Exporte.
Das Folgende sind die nach dem Anruf gedruckten Informationen:
Exporte: Es ist zu erkennen, dass Exporte ein Attribut des Moduls sind.
Modul: Es enthält Alias, URI-, Exportobjekt- und Konfigurationsinformationsmethoden des Moduls.
Konfiguration: Wir müssen häufig Konfigurationsinformationen an ein Modul übergeben. Diese Konfigurationen sind häufig Informationen auf Anwendungsebene und erfordern ein Mittel, um sie an das Modul weiterzugeben.
In RequiredJS wird es basierend auf dem Konfigurationskonfigurationselement von RequestJs.config () implementiert.
2. Vorsicht vor Singleton -Variablen
Achten Sie auf Variablen in Singletons, da nach Bedarf Js einmal die nachfolgende erfordert den vorherigen Cache. Wenn also eine Variable im Modul definiert wird, bleiben andere Anforderungen konsistent.
Define (function () {var index = 0; var Hallo = Funktion (msg) {console.log (msg);} var addIndex = function () {index ++;} var getIndex = function () {return index;} return {Hallo: Hallo, addIndex, getIndex: getIndex}}});Angerufen:
require(['a',], function (A) {require(['a'], function (A) {console.log(A.getIndex());A.addIndex();A.addIndex();});require(['a'], function (A) {console.log(A.getIndex());});});Die obigen gedruckten sind:
0
2
3. Löschen Sie den Cache
Da RequiredJS die Funktion des Caching hat, aber während der Entwicklung möchten wir nicht, dass es sich um einen Cache handelt, sodass wir Urlargs in Request.config einstellen können.
URLARGS: ErforderndeJs findet nach der URL zusätzliche Abfrageparameter bei, wenn Sie die Ressource erhalten.
Beispiel:
Urlargs: "Bust =" + (neues Datum ()). GetTime ()
Dies ist in der Entwicklung nützlich, aber denken Sie daran, es vor dem Einsatz in der Build -Umgebung zu entfernen.
4. Lastmodule aus anderen Paketen
RequiredJS unterstützt Lademodule aus der CommonJS -Paketstruktur, erfordert jedoch eine zusätzliche Konfiguration.
Die Paketkonfiguration kann die folgenden Eigenschaften für ein bestimmtes Paket angeben:
1. Name: Paketname (für Modulname/Präfixzuordnung).
2. Ort: Der Ort auf der Festplatte. Die Positionen sind relativ zu den BasisaRL -Werten in der Konfiguration, es sei denn, sie enthalten Protokolle oder beginnen mit "/".
3. Main: Nachdem der Anforderungsanruf mit dem "Paketnamen" initiiert wurde, wird das Modul in einem Paket angewendet.
Die Standardeinstellung ist "Haupt", sofern hier nicht anders angegeben.
Dieser Wert ist relativ zum Paketverzeichnis.
Beispiel:
main.js
Required.config ({BaseUrl: "", Pakete: [{Name: "Student", Ort: "Package-stu"}, {Name: "Lehrer", Ort: "Paket-Tea"}, Urlargs: "Bust =" + (New Date (). Tea.hello ();Tea.js:
Define (function (fordert, exports, modul) {exports.hello = function () {console.log ('Ich bin ein Lehrer');}});stu.js:
Define (Funktion (erfordern, exportieren, modul) {exports.name = 'cape';});store.js:
Define (Funktion (Anforderung, Exportieren, Modul) {var stu = required ("student/stu"); exports.hello = function () {console.log ('i Am' + stu.name);}});Ich habe das Gefühl, dass es zwei seltsame Dinge über diese Art zum Laden von Modulen aus anderen Paketen gibt (ich verstehe nicht sehr gut):
1. Wenn sich die Module in anderen Paketen auf die Schreibmethode anderer Module beziehen, wirkt sich der Benutzer auf die Schreibmethode des Moduls aus?
2. Die main.js in anderen Paketen scheinen nutzlos zu sein, und es gibt kein Problem ohne Inhalt.
Der obige Inhalt ist die Details der vom Herausgeber verwendeten Anforderungen, und ich hoffe, es wird für alle hilfreich sein!