原文： http://tech.pro/tutorial/1300/deep-dive-into-requirejs
by：Jonathan Creamer
?
現在，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:
"_"
}
}
});
?
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
