Cajon ist ein JavaScript-Modullader für den Browser, der CommonJS/node- und AMD-Module laden kann. Es basiert auf RequireJS.
Sie können damit Module für Ihr Projekt im CommonJS/Node-Stil codieren und anschließend mit dem RequireJS-Optimierer alle Module in einem AMD-kompatiblen Bundle zusammenstellen. Dadurch können Sie dann ein kleines AMD-API-Shim wie Mandel verwenden, um gut optimierten Code zu erhalten, ohne einen vollständigen Laufzeitlader zu benötigen.
Warum dies anstelle von RequireJS verwenden? Einige mögliche Gründe:
define ( function ( require ) {
/*module code here */
} ) ;
Andernfalls sollten Sie RequireJS oder einen anderen AMD-Loader verwenden.
Beachten Sie den Abschnitt „Einschränkungen“ weiter unten. Sie werden wahrscheinlich frustriert mit den Zähnen knirschen, wenn Sie sie nicht beachten.
Wenn Ihnen dieser spezielle Loader nicht gefällt, Ihnen aber die Idee eines Modulladers im Dual-AMD- und CommonJS/Node-Stil gefällt, dann gefällt Ihnen vielleicht der Inject-Loader von LinkedIn besser.
Cajon besteht aus:
//@ sourceURL=
verwendet wird, um die Skriptnamen für Skript-Debugger anzugeben. Cajon verwendet den XHR+eval-Ansatz nur, wenn die Anfrage an dieselbe Domäne wie das HTML-Dokument gerichtet ist. Wenn davon ausgegangen wird, dass sich die Skriptanforderung auf einer anderen Domäne befindet, wird sie einfach an die Standardfunktion requirejs.load() delegiert, wo sie das Skript mit einem -Tag lädt und erwartet, dass es im AMD-Format vorliegt, oder a traditionelles „Browser-Globals“-Skript.
Sie können dieses Verhalten außer Kraft setzen, um XHR für einige domänenübergreifende Anfragen zu verwenden, wenn Sie wissen, dass Ihre Benutzer CORS-fähige Browser und Server verwenden werden. Weitere Informationen finden Sie im Abschnitt „Konfiguration“ weiter unten.
Abgerufene Skripte werden in den folgenden AMD-Wrapper eingeschlossen:
define ( function ( require , exports , module ) {
/* module code here */
} ) ;
und es erlaubt die Verwendung von __dirname und __filename innerhalb dieses umschlossenen Codes.
Cajon weist der Variable cajon
die gleiche Variable wie „ requirejs
“ zu. Sie können diese also verwenden, wenn Sie die Verwendung von „cajon“ ausdrücklich hervorheben möchten. Der Requirejs-Optimierer versteht jedoch nur require
, requirejs
und define
, nicht jedoch cajon
. Dies ist besonders wichtig, wenn Sie die mainConfigFile
-Option des Optimierers verwenden.
Am besten verwenden Sie einfach die globale require
, wenn der Code auf RequireJS, Mandel und andere AMD-Loader portierbar sein soll, und führen Sie die Erkennung von cajon
nur durch, wenn Sie wissen möchten, ob Cajon verfügbar ist.
Es gibt ein demo
-Verzeichnis, das Anwendungsbeispiele zeigt, aber grundsätzlich müssen Sie cajon.js in ein -Tag einfügen und Module über
require([])
laden. Beachten Sie jedoch den Abschnitt „Einschränkungen“ weiter unten.
Um die Demo zu optimieren, führen Sie Folgendes aus:
node tools/r.js -o demo/app.build.js
Dadurch wird das optimierte Projekt in einem demo-built
Verzeichnis generiert. Alle Module in der Build-Ausgabe wurden in den AMD-Stil konvertiert, sodass sie domänenübergreifend geladen werden können, ohne dass besondere CORS-Überlegungen erforderlich sind.
Für das Build-Profil app.build.js muss der r.js-Optimierer Version 2.0.2 oder höher sein, da er die Build-Option cjsTranslate
von 2.0.2 verwendet, die CommonJS-/Knotenmodule so konvertiert, dass sie für den Build in define() verpackt werden.
Bei Verwendung von Volo:
volo add cajon
Bei Verwendung von npm:
npm install cajon
Oder URL zur neuesten Version:
https://raw.github.com/requirejs/cajon/latest/cajon.js
Erwarten Sie also nicht, dass npm install
und ihn dann mit Cajon anfordern kann.
Node verwendet mehrere node_modules
-Pfadsuchen, um Code zu finden, und dies ist in einem Browserkontext nicht effizient. Außerdem hängen viele Node-Module von der Node-Standardbibliothek oder der Node-Umgebung ab, die standardmäßig nicht im Webbrowser verfügbar sind.
Wenn Sie mit npm installierten Code verwenden möchten und wissen, dass er im Browser ausgeführt wird, können Sie ihn mit Cajon zum Laufen bringen. Sie müssen jedoch wahrscheinlich die Pfade , die Karte und die Pakete requirejs config verwenden, um ihn zu erhalten arbeiten.
CommonJS/Knotenmodulsysteme sind synchrone, lokale Datei-IO-Systeme. Sie erlauben also diese Art von Konstrukten:
//first example
var id = someCondition ? 'a' : 'b' ;
var a = require ( id ) ;
//second example
var a ;
if ( someCondition ) {
a = require ( 'a' ) ;
} else {
b = require ( 'b' ) ;
}
Das erste Beispiel schlägt in einer AMD-Browserumgebung fehl, da alle Abhängigkeiten bekannt, heruntergeladen und ausgeführt sein müssen, bevor der Code ausgeführt wird. Wenn sich „a“ und „b“ noch nicht in diesem Zustand befinden, wird dieses erste Beispiel wahrscheinlich einen Fehler erzeugen.
Das zweite Beispiel kann funktionieren, aber beachten Sie, dass der AMD-Loader „a“ und „b“ herunterlädt und ausführt, bevor dieser Code ausgeführt wird.
Wenn Sie eine Laufzeitentscheidung verwenden, um eine Abhängigkeit abzurufen, verwenden Sie den Callback-Stil require(), der von AMD-Loadern unterstützt wird:
var id = someCondition ? 'a' : 'b' ;
require ( [ id ] , function ( mod ) {
//do something with mod now
//that it has been asynchronously
//loaded and executed.
} )
Oder erwägen Sie die Erstellung eines AMD-Loader-Plugins, das die Entscheidungslogik übernehmen kann, aber dennoch als eine einzelne String-Literal-Abhängigkeit behandelt wird:
var dep = require ( 'has!condition?succesModuleId:failModuleId' ) ;
Sowohl Require- als auch Loader-Plugins im Callback-Stil können mit Cajon verwendet werden, da im Hintergrund nur Requirejs verwendet werden.
Cajon verwendet den XHR+eval-Ansatz nur, wenn die Anfrage an dieselbe Domäne wie das HTML-Dokument gerichtet ist. Sie können dieses Verhalten außer Kraft setzen, wenn Sie wissen, dass CORS-fähige Browser und Server verwendet werden.
Richten Sie eine useXhr
-Funktion in einer cajon
-Konfiguration ein, die an den Loader übergeben wird:
require . config ( {
cajon : {
useXhr : function ( url , protocol , hostname , port ) {
//Return true if XHR is usable, false if the
//script tag approach to an AMD module/browser globals
//script should be used.
//url is the url being requested.
//protocol, hostname and port area all values from the
//current page that is using cajon. Compare them with
//what is in `url` to make your decision.
}
}
} ) ;
Wenn Sie jedes XHR-Objekt konfigurieren müssen, bevor es seine Anfrage sendet, können Sie eine onXhr
-Methode implementieren, die nach xhr.open() aufgerufen wird, aber bevor xhr.onreadystatechange() eingerichtet wird und bevor xhr.send() aufgerufen wird :
require . config ( {
cajon : {
onXhr : function ( xhr , url ) {
//xhr is the XHMLHttpRequest object.
//url is the URL the xhr object is set to use.
}
}
} ) ;
MIT
Verhaltenskodex der jQuery Foundation.