Cajon 是一個用於瀏覽器的 JavaScript 模組載入器,可以載入 CommonJS/node 和 AMD 模組。它是建構在 RequireJS 之上。
您可以使用它以 CommonJS/node 風格為專案編寫模組程式碼,然後使用 RequireJS 優化器將所有模組建置到符合 AMD 標準的套件中。這使您可以使用小型 AMD API 填充程式(例如 almond)來獲得經過良好優化的程式碼,而無需完整的執行時間載入程式。
為什麼要用這個而不是 RequireJS?一些可能的原因:
define ( function ( require ) {
/*module code here */
} ) ;
否則,您應該使用 RequireJS 或其他 AMD 載入器。
請注意下面的限制部分。如果你不聽從它們,你可能會沮喪地咬牙切齒。
如果您不喜歡這個特定的載入器,但喜歡雙 AMD 和 CommonJS/node 樣式模組載入器的想法,那麼您可能會更喜歡 LinkedIn 的 Inject 載入器。
箱鼓由下列材料構成:
//@ sourceURL=
指定腳本偵錯器的腳本名稱來評估它們。如果請求與 HTML 文件位於同一網域,Cajon 將僅使用 XHR+eval 方法。如果腳本請求被認為是在另一個網域上,它只會委託給預設的 requirejs.load() 函數,它將使用標籤載入腳本,並期望它採用 AMD 格式,或傳統的「瀏覽器全域變數”腳本。
如果您知道您的使用者將使用啟用 CORS 的瀏覽器和伺服器,您可以覆寫此行為以使用 XHR 處理某些跨網域請求。請參閱下面的配置部分。
取得的腳本包裝在以下 AMD 包裝器中:
define ( function ( require , exports , module ) {
/* module code here */
} ) ;
它允許在包裝的程式碼中使用 __dirname 和 __filename。
Cajon 將cajon
變數指派給與requirejs
變數相同的值,因此如果您想專門呼叫 cajon 的用法,可以使用它。然而,requirejs 優化器只理解require
、 requirejs
和define
,它不會理解cajon
。如果您使用優化器的mainConfigFile
選項,這一點尤其重要。
如果您希望程式碼可移植到 RequireJS、almond 和其他 AMD 載入器,最好只使用全域require
,並且僅在您想知道 cajon 是否可用時才檢測cajon
。
有一個demo
目錄顯示範例使用,但基本上,將 cajon.js 放在標記中並透過
require([])
載入模組。但請注意下面的限制部分。
若要優化演示,請運行:
node tools/r.js -o demo/app.build.js
這將在demo-built
目錄中產生最佳化的項目。建構輸出中的所有模組都將轉換為 AMD 樣式,以便可以跨域加載它們,而不需要特殊的 CORS 考慮。
app.build.js 建置設定檔要求 r.js 最佳化器為 2.0.2 或更高版本,因為它使用 2.0.2 的cjsTranslate
建置選項,將 CommonJS/node 模組轉換為 Define() 包裝的建置。
如果使用volo:
volo add cajon
如果使用 npm:
npm install cajon
或最新版本的 URL:
https://raw.github.com/requirejs/cajon/latest/cajon.js
因此,不要指望npm install
一些程式碼,然後就能夠使用 cajon 來要求它。
Node 使用多個node_modules
路徑查找來查找程式碼,這在瀏覽器上下文中效率不高。此外,許多 Node 模組依賴 Node 的標準庫或 Node 的環境,這些在 Web 瀏覽器中預設不可用。
如果你確實想使用一些 npm 安裝的程式碼,並且你知道它將在瀏覽器中運行,你可以讓它與 cajon 一起工作,但你可能需要使用paths 、 map和packages requirejs 配置來讓它工作。
CommonJS/node 模組系統是同步的本機檔案 IO 系統。所以他們允許這些類型的構造:
//first example
var id = someCondition ? 'a' : 'b' ;
var a = require ( id ) ;
//second example
var a ;
if ( someCondition ) {
a = require ( 'a' ) ;
} else {
b = require ( 'b' ) ;
}
第一個範例將在 AMD 瀏覽器環境中失敗,因為在程式碼運行之前需要了解、下載和執行所有依賴項。如果「a」和「b」尚未處於該狀態,則第一個範例可能會產生錯誤。
第二個範例可以工作,但要知道 AMD 載入程式將在運行程式碼之前下載並執行“a”和“b”。
如果您使用執行時間決策來取得依賴項,請使用 AMD 載入器支援的回調式 require():
var id = someCondition ? 'a' : 'b' ;
require ( [ id ] , function ( mod ) {
//do something with mod now
//that it has been asynchronously
//loaded and executed.
} )
或者考慮創建一個 AMD 載入器插件,它可以執行決策邏輯,但仍被視為單一字串文字依賴:
var dep = require ( 'has!condition?succesModuleId:failModuleId' ) ;
回呼風格的 require 和 loader 外掛程式都可以與 cajon 一起使用,因為它只是在幕後使用 requirejs。
如果請求與 HTML 文件位於同一網域,Cajon 將僅使用 XHR+eval 方法。如果您知道將使用啟用 CORS 的瀏覽器和伺服器,則可以覆寫此行為。
在傳遞給載入器的cajon
配置中設定useXhr
函數:
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.
}
}
} ) ;
如果您需要在傳送請求之前配置每個 XHR 對象,您可以實作一個onXhr
方法,該方法在 xhr.open() 之後、設定 xhr.onreadystatechange() 之前以及呼叫 xhr.send() 之前呼叫:
require . config ( {
cajon : {
onXhr : function ( xhr , url ) {
//xhr is the XHMLHttpRequest object.
//url is the URL the xhr object is set to use.
}
}
} ) ;
麻省理工學院
jQuery 基金會行為準則。