Cajon adalah pemuat modul JavaScript untuk browser yang dapat memuat modul CommonJS/node dan AMD. Itu dibangun di atas RequireJS.
Anda dapat menggunakannya untuk mengkodekan modul untuk proyek Anda dalam gaya CommonJS/node, lalu menggunakan RequireJS Optimizer untuk membangun semua modul ke dalam bundel yang sesuai dengan AMD. Hal ini memungkinkan Anda untuk kemudian menggunakan shim AMD API kecil, seperti almond, untuk mendapatkan kode yang dioptimalkan dengan baik tanpa memerlukan runtime loader penuh.
Mengapa menggunakan ini alih-alih RequireJS? Beberapa kemungkinan alasan:
define ( function ( require ) {
/*module code here */
} ) ;
Jika tidak, Anda harus menggunakan RequireJS, atau pemuat AMD lainnya.
Perhatikan bagian Pembatasan di bawah. Kemungkinan besar Anda akan mengertakkan gigi karena frustrasi jika tidak mengindahkannya.
Jika Anda tidak menyukai pemuat khusus ini, tetapi menyukai gagasan pemuat modul ganda AMD dan CommonJS/node style, maka Anda mungkin lebih menyukai pemuat Inject LinkedIn.
Cajon dibangun dengan:
//@ sourceURL=
untuk menentukan nama skrip untuk debugger skrip. Cajon hanya akan menggunakan pendekatan XHR+eval jika permintaannya ke domain yang sama dengan dokumen HTML. Jika permintaan skrip dianggap berada di domain lain, permintaan tersebut hanya akan didelegasikan ke fungsi requirejs.load() default, yang akan memuat skrip dengan tag , dan mengharapkannya dalam format AMD, atau a skrip "browser globals" tradisional.
Anda dapat mengganti perilaku ini untuk menggunakan XHR untuk beberapa permintaan lintas domain jika Anda tahu pengguna Anda akan menggunakan browser dan server yang mendukung CORS. Lihat bagian Konfigurasi di bawah.
Skrip yang diambil dibungkus dalam pembungkus AMD berikut:
define ( function ( require , exports , module ) {
/* module code here */
} ) ;
dan itu memungkinkan penggunaan __dirname dan __filename di dalam kode yang dibungkus itu.
Cajon menetapkan variabel cajon
sama dengan variabel requirejs
, sehingga Anda dapat menggunakannya jika Anda ingin secara khusus memanggil penggunaan cajon. Namun, pengoptimal requirejs hanya memahami require
, requirejs
dan define
, ia tidak akan memahami cajon
. Hal ini sangat penting jika Anda menggunakan opsi mainConfigFile
pengoptimal.
Yang terbaik adalah menggunakan require
global jika Anda ingin kode tersebut portabel ke RequireJS, almond, dan pemuat AMD lainnya, dan hanya melakukan deteksi cajon
jika Anda ingin mengetahui apakah cajon tersedia.
Ada direktori demo
yang menunjukkan contoh penggunaan, tetapi pada dasarnya, letakkan cajon.js dalam tag dan muat modul melalui
require([])
. Perhatikan bagian Pembatasan di bawah ini.
Untuk mengoptimalkan demo, jalankan:
node tools/r.js -o demo/app.build.js
Ini akan menghasilkan proyek yang dioptimalkan dalam direktori demo-built
. Semua modul dalam keluaran build akan dikonversi ke gaya AMD, sehingga dapat dimuat lintas domain tanpa memerlukan pertimbangan CORS khusus.
Profil build app.build.js memerlukan pengoptimal r.js menjadi versi 2.0.2 atau lebih baru, karena menggunakan opsi build cjsTranslate
2.0.2 yang mengonversi modul CommonJS/node menjadi didefiniskan() untuk build tersebut.
Jika menggunakan volo:
volo add cajon
Jika menggunakan npm:
npm install cajon
Atau URL ke rilis terbaru:
https://raw.github.com/requirejs/cajon/latest/cajon.js
Jadi jangan berharap npm install
beberapa kode, lalu bisa membutuhkannya menggunakan cajon.
Node menggunakan beberapa pencarian jalur node_modules
untuk menemukan kode dan ini tidak efisien untuk dilakukan dalam konteks browser. Selain itu, banyak modul node bergantung pada pustaka standar node atau lingkungan Node, yang tidak tersedia secara default di browser web.
Jika Anda ingin menggunakan beberapa kode yang diinstal npm, dan Anda tahu kode itu akan berjalan di browser, Anda bisa membuatnya berfungsi dengan cajon, tetapi Anda mungkin perlu menggunakan konfigurasi path , map , dan paket yang memerlukan konfigurasi untuk mendapatkannya bekerja.
Sistem modul CommonJS/node adalah sistem IO file lokal yang sinkron. Jadi mereka mengizinkan konstruksi semacam ini:
//first example
var id = someCondition ? 'a' : 'b' ;
var a = require ( id ) ;
//second example
var a ;
if ( someCondition ) {
a = require ( 'a' ) ;
} else {
b = require ( 'b' ) ;
}
Contoh pertama akan gagal di lingkungan browser AMD, karena semua dependensi harus diketahui, diunduh, dan dieksekusi sebelum kode dijalankan. Jika 'a' dan 'b' belum berada dalam keadaan tersebut, contoh pertama tersebut kemungkinan besar akan menghasilkan kesalahan.
Contoh kedua dapat berfungsi, tetapi ketahuilah bahwa pemuat AMD akan mengunduh dan mengeksekusi 'a' dan 'b' sebelum menjalankan kode tersebut.
Jika Anda menggunakan keputusan runtime untuk mengambil ketergantungan, gunakan gaya panggilan balik require() yang didukung oleh pemuat AMD:
var id = someCondition ? 'a' : 'b' ;
require ( [ id ] , function ( mod ) {
//do something with mod now
//that it has been asynchronously
//loaded and executed.
} )
Atau pertimbangkan untuk membuat plugin pemuat AMD yang dapat melakukan logika keputusan tetapi masih diperlakukan sebagai ketergantungan literal string tunggal:
var dep = require ( 'has!condition?succesModuleId:failModuleId' ) ;
Plugin require dan loader gaya panggilan balik dapat digunakan dengan cajon karena hanya menggunakan requirejs di belakang layar.
Cajon hanya akan menggunakan pendekatan XHR+eval jika permintaannya ke domain yang sama dengan dokumen HTML. Anda dapat mengesampingkan perilaku ini jika Anda mengetahui browser dan server yang mendukung CORS akan digunakan.
Siapkan fungsi useXhr
dalam konfigurasi cajon
yang diteruskan ke loader:
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.
}
}
} ) ;
Jika Anda perlu mengonfigurasi setiap objek XHR sebelum mengirimkan permintaannya, Anda dapat mengimplementasikan metode onXhr
yang dipanggil setelah xhr.open(), namun sebelum xhr.onreadystatechange() disiapkan dan sebelum xhr.send() dipanggil :
require . config ( {
cajon : {
onXhr : function ( xhr , url ) {
//xhr is the XHMLHttpRequest object.
//url is the URL the xhr object is set to use.
}
}
} ) ;
MIT
Kode Etik Yayasan jQuery.