現在,Require.js是我最喜歡的Javascript編程方式。它可以使代碼化整為零,並易於管理。而Require.js Optimizer能幫助我們將一個較大的應用分散成多個較小的應用,並通過依賴串聯起來,最後在編譯打包時合併起來。這些原因促使我們使用require.js。
那麼,讓我們來看看require.js有什麼牛逼的特性吧!
與CommonJS兼容
AMD (異步模塊定義規範) 出現自CommonJS工作組。 CommonJS旨在創造Javascript的生態系統。 CommonJS的一個重要部分是transport/c, 即AMD的前身,而require.js則是該規範的一個實現。
CommonJS模塊和AMD模塊的語法差異,主要由於AMD需要支持瀏覽器的異步特性。而CommonJS模塊則需要同步進行,例如:
複製代碼代碼如下:
var someModule = require( "someModule" );
var anotherModule = require( "anotherModule" );
exports.asplode = function() {
someModule.doTehAwesome();
anotherModule.doMoarAwesome();
};
AMD模塊是異步加載模塊的,故而模塊定義需要一個數組作為第一個參數,而模塊加載完畢後回調的函數作為第二個參數傳入。
複製代碼代碼如下:
define( [ "someModule"], function( someModule ) {
return {
asplode: function() {
someModule.doTehAwesome();
// 這將會異步執行
require( [ "anotherModule" ], function( anotherModule ) {
anotherModule.doMoarAwesome();
});
}
};
});
然而,在require.js中AMD亦能兼容CommonJS語法。通過AMD的define函數包裝CommonJS模塊,你也可以再AMD中擁有一個CommonJS模塊,例如:
複製代碼代碼如下:
define(function( require, exports, module )
var someModule = require( "someModule" );
var anotherModule = require( "anotherModule" );
someModule.doTehAwesome();
anotherModule.doMoarAwesome();
exports.asplode = function() {
someModule.doTehAwesome();
anotherModule.doMoarAwesome();
};
});
實際上,require.js通過函數.toString解釋回調函數的模塊內容,找到其正確的依賴,將其變成一個通常的AMD模塊。需要注意,如果你使用這種方式編寫模塊,可能會發生與其他AMD加載器不兼容的情況,因為這違背了AMD規範,但它能很好的理解這種格式的寫法。
這裡發生了什麼,require.js實際上做了function.toString的回調函數解析模塊的內容,找到正確的依賴,就像它,如果它是一個正常的AMD模塊。重要的是要注意,如果您選擇這樣寫模塊,他們將最有可能不兼容與其他AMD模塊裝載機,因為這違背了AMD規範,但它是很好的了解這個格式存在!
CDN回退
另一個隱藏的require.js瑰寶是,其支持當CDN加載不正確時,回退加載本地相應的庫。我們可以通過require.config達到這個目的:
複製代碼代碼如下:
requirejs.config({
paths: {
jquery: [
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
'lib/jquery'
]
}
});
沒有依賴?對象字面量?沒問題!
當你寫一個沒有任何依賴的模塊,並且只是返回一個對象包含一些功能函數,那麼我們可以使用一種簡單的語法:
複製代碼代碼如下:
define({
forceChoke: function() {
},
forceLighting: function() {
},
forceRun: function() {
}
});
很簡單,也很有用,如果該模塊僅僅是功能的集合,或者只是一個數據包。
循環依賴
在一些情況中,我們可能需要模塊moduleA和moduleA中的函數需要依賴一些應用。這就是循環依賴。
複製代碼代碼如下:
// js/app/moduleA.js
define( [ "require", "app/app"],
function( require, app ) {
return {
foo: function( title ) {
var app = require( "app/app" );
return app.something();
}
}
}
);
得到模塊的地址
如果你需要得到模塊的地址,你可以這麼做……
複製代碼代碼如下:
var path = require.toUrl("./style.css");
BaseUrl
通常,在進行的單元測試時,你的源代碼可能放在類似src的文件夾裡,同時,可能你的測試放在類似tests的文件夾裡。這可能比較難讓測試配置正確。
比如我們在tests文件夾有一個index.html文件,並需要本地加載tests/spec/*.js。並假設,所有源代碼在為src/js/*.js,並有一個main.js在該文件夾。
index.html中,不在加載require.js時設置data-main。
複製代碼代碼如下:
<script src="src/js/vendor/require.js"></script>
<script>
require( [ "../src/js/main.js" ], function() {
require.config({
baseUrl: "../src/js/"
});
require([
"./spec/test.spec.js",
"./spec/moar.spec.js"
], function() {
// start your test framework
});
});
</script>
你可以發現main.js被加載。然而由於沒有設置data-main,所欲我們需要製定一個baseUrl。而當使用data-main時,baseUrl會根據其設定的文件來自動設置。
在這裡,你可以看到main.js被載入。然而,由於它沒有加載數據主要腳本標記,那麼您必須指定一個base即可。當數據主要是用於baseURL時從主文件中的位置推斷。通過自定義baseUrl我們可以很容易將測試代碼和應用代碼分開存放。
JSONP
我們可以這樣處理JSONP終端:
複製代碼代碼如下:
require( [
"http://someapi.com/foo?callback=define"
], function (data) {
console.log(data);
});
對於非AMD庫,使用shim來解決
在很多請款下,我們需要使用非AMD庫。例如Backbone和Underscore並未適應AMD規範。而jQuery實際上只是將自己定義成一個名為jQuery全局變量,所以對於jQuery什麼都不用做。
幸運的是,我們可以使用shim配置來解決這一問題。
複製代碼代碼如下:
require.config({
paths: {
"backbone": "vendor/backbone",
"underscore": "vendor/underscore"
},
shim: {
"backbone": {
deps: [ "underscore" ],
exports: "Backbone"
},
"underscore": {
exports: "_"
}
}
});