Jetzt ist fordern.js meine bevorzugte Art, JavaScript zu programmieren. Es macht Code-Brechen in Stücke und einfach zu verwalten. Required.js Optimizer kann uns helfen, eine größere Anwendung in mehrere kleinere Anwendungen zu verteilen, diese über Abhängigkeiten zu verbinden und schließlich während der Zusammenstellung und Verpackung zusammenzuführen. Diese Gründe veranlassen uns, fordert.js zu verwenden.
Schauen wir uns also an, was großartige Funktionen erfordern.Js haben!
Kompatibel mit CommonJs
AMD (Asynchronmodul -Definitionsspezifikation) erscheint aus der CommonJS -Arbeitsgruppe. CommonJS zielt darauf ab, ein Ökosystem von JavaScript zu erstellen. Ein wichtiger Bestandteil von CommonJS ist Transport/C, der Vorgänger von AMD und fordert.js eine Implementierung dieser Spezifikation.
Der Syntaxunterschied zwischen dem CommonJS -Modul und dem AMD -Modul ist hauptsächlich auf die Notwendigkeit der AMD zurückzuführen, die asynchronen Merkmale des Browsers zu unterstützen. Das CommonJS -Modul muss beispielsweise synchronisiert werden:
Die Codekopie lautet wie folgt:
var somemodule = required ("somemodule");
var Othermodule = Request ("OtherModule");
exporte.asplode = function () {
somemodule.dotehawesome ();
othermodule.domoarawesome ();
};
Das AMD -Modul lädt das Modul asynchron, sodass die Moduldefinition ein Array als erster Parameter benötigt und die Rückruffunktion nach dem Laden des Moduls als zweiter Parameter übergeben wird.
Die Codekopie lautet wie folgt:
Define (["Somemodule"], Funktion (Somemodule) {
zurückkehren {
ASPLODE: function () {
somemodule.dotehawesome ();
// Dies wird asynchron ausgeführt
erfordern (["othermodule"], function (othermodule) {
othermodule.domoarawesome ();
});
}
};
});
AMD ist jedoch auch mit der CommonJS -Syntax in Request.js kompatibel. Durch das Einwickeln des CommonJS -Moduls durch AMDs Define -Funktion können Sie beispielsweise ein CommonJS -Modul in AMD haben:
Die Codekopie lautet wie folgt:
Definieren Sie (Funktion (Erforderliche, Exporte, Modul)
var somemodule = required ("somemodule");
var Othermodule = Request ("OtherModule");
somemodule.dotehawesome ();
othermodule.domoarawesome ();
exporte.asplode = function () {
somemodule.dotehawesome ();
othermodule.domoarawesome ();
};
});
Tatsächlich interpretiert Required.js den Modulinhalt der Rückruffunktion durch die Funktion .ToString, findet seine korrekte Abhängigkeit und verwandelt sie in ein normales AMD -Modul. Es ist zu beachten, dass, wenn Sie auf diese Weise Module schreiben, es möglicherweise mit anderen AMD -Ladern unvereinbar ist, da dies gegen die AMD -Spezifikation verstößt. Es kann jedoch verstehen, wie dieses Format gut geschrieben ist.
Was hier vor sich geht, benötigt. Js. Es ist wichtig zu beachten, dass, wenn Sie solche Module schreiben, höchstwahrscheinlich mit anderen AMD -Modulladern unvereinbar sind, da dies gegen die AMD -Spezifikation verstößt, aber es ist eine gute Idee, dieses Format zu verstehen!
CDN zurück
Ein weiterer versteckter Schatz. Wir können dies durch Request.Config erreichen:
Die Codekopie lautet wie folgt:
fordernjs.config ({{
Pfade: {
JQuery: [
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',,
"lib/jQuery"
]
}
});
Keine Abhängigkeiten? Objekt wörtlich? Kein Problem!
Wenn Sie ein Modul schreiben, das keine Abhängigkeiten hat und nur ein Objekt zurückgibt, das einige funktionale Funktionen enthält, können wir eine einfache Syntax verwenden:
Die Codekopie lautet wie folgt:
definieren({
Forcechoke: function () {
},
Ausgangslicht: function () {
},
Forcerun: function () {
}
});
Es ist einfach und nützlich, wenn das Modul nur eine Sammlung von Funktionen oder nur ein Paket ist.
Zirkularabhängigkeit
In einigen Fällen benötigen wir möglicherweise die Funktionen in Modulenmodulea und Modulea, um sich auf einige Anwendungen zu verlassen. Dies ist kreisförmige Abhängigkeit.
Die Codekopie lautet wie folgt:
// JS/App/modulea.js
Definieren (["Erforderlich", "App/App"],
Funktion (erfordern, App) {
zurückkehren {
foo: function (title) {
var app = required ("App/App");
return app.something ();
}
}
}
);
Holen Sie sich die Moduladresse
Wenn Sie die Adresse des Moduls erhalten müssen, können Sie dies tun ...
Die Codekopie lautet wie folgt:
var path = required.tourl ("./ style.css");
BasisaRl
Normalerweise kann Ihr Quellcode bei der Durchführung von Einheitstests in einem Ordner ähnlich wie SRC platziert werden. Gleichzeitig kann Ihr Test in einem Ordner ähnelt wie bei Tests. Dies kann schwierig sein, die Testkonfiguration korrekt zu machen.
Beispielsweise haben wir im Ordner Tests eine Index.html -Datei und müssen tests/*. JS lokal laden. Und unter der Annahme, dass sich der gesamte Quellcode in SRC/JS/*. JS befindet und in diesem Ordner ein Main.js enthält.
In Index.html wird die Datenmarke nicht festgelegt, wenn erforderlich.js geladen wird.
Die Codekopie lautet wie folgt:
<script src = "src/js/perversor/forder.js"> </script>
<Script>
fordern (["../src/js/main.js"], function () {
fordern.config ({{
BasisaRl: "../src/js/"
});
erfordern([
"./spec/test.spec.js",
"./spec/moar.spec.js"
], function () {
// Starten Sie Ihr Testframework
});
});
</script>
Sie können feststellen, dass Main.js geladen ist. Da die Datenmain jedoch nicht festgelegt ist, müssen wir eine BasisaRl so formulieren, wie wir es möchten. Bei der Verwendung von Data-Main wird BaseURL automatisch gemäß der festgelegten Datei festgelegt.
Hier können Sie sehen, dass Main.js geladen ist. Da es jedoch nicht das Data Main Skript -Tag geladen wird, müssen Sie eine Basis angeben. Wenn die Daten hauptsächlich für BaseURL verwendet werden, abgeleitet aus dem Ort in der Hauptdatei. Durch das Anpassen von BaseURL können wir den Testcode und den Anwendungscode einfach separat speichern.
JSONP
Wir können mit JSONP -Terminals wie folgt umgehen:
Die Codekopie lautet wie folgt:
erfordern( [
"http://someapi.com/foo?callback=define"
], Funktion (Daten) {
console.log (Daten);
});
Verwenden Sie für Nicht-AMD-Bibliotheken Shim, um zu lösen
Unter vielen Anfragen müssen wir nicht-AMD-Bibliotheken verwenden. Backbone und Unterstrich passen sich beispielsweise nicht an die AMD -Spezifikation an. Und JQuery definiert sich nur als globale Variable namens JQuery, sodass Sie mit JQuery nichts tun müssen.
Glücklicherweise können wir die Shim -Konfiguration verwenden, um dieses Problem zu lösen.
Die Codekopie lautet wie folgt:
fordern.config ({{
Pfade: {
"Backbone": "Verkäufer/Backbone",
"Unterstrich": "Verkäufer/Unterstich"
},
Shim: {
"Backbone": {
DEPs: ["Unterstrich"],
Exporte: "Backbone"
},
"Unterstrich": {
Exporte: "_"
}
}
});