加載JavaScript文件
index.html
<script data-main="scripts/main.js" src="scripts/require.js"></script>
RJ（require.js）是一個以相對于baseUrl的地址來加載所有的代碼乏悄。
RJ使用<script>上的自定義屬性data-main來啟動腳本加載過程炕柔，例如上述的scripts下main.js文件會作為主模塊第一個被RJ加載。
配置
main.js
require.config({
// baseUrl為所有模塊查找的根路徑娩缰。當(dāng)加載純.js文件（‘/開頭、.js結(jié)尾、含有協(xié)議’）時不會使用baseUrl枝笨。
// baseUrl不設(shè)置時默認(rèn)為main.js所在路徑
// baseUrl設(shè)置時沦寂，相對于RJ所在的HTML頁面的路徑
baseUrl: 'js/lib',
// 用于映射那些不直接放置在baseUrl下的模塊名
// 起始位置是相對于baseUrl的学密，除非以‘/’開頭或含有URL協(xié)議（如：http）
paths: {
app: '../app'
}
})
// 各模塊是異步加載的
require(['module1','module2','module3'], function(m1,m2,m3) {
// 這個函數(shù)在所有依賴模塊被加載完成后才調(diào)用執(zhí)行
})
當(dāng)然，data-main不是必要的传藏。
<script src="scripts/require.js"></script>
<script>
require.config({
baseUrl: 'js/lib',
paths: {
app: '../app'
}
})
require(['module1','module2','module3'], function(m1,m2,m3) {})
</script>
或者
<sctipt>
var require = {
deps: ['module1','module2','module3'],
callback: function(m1,m2,m3) {}
}
</script>
<script src="scripts/require.js"></script>
這時候baseurl為引用RJ的HTML頁面所在的路徑腻暮。
shim：為那些沒有使用define()來聲明依賴關(guān)系、設(shè)置模塊的“瀏覽器全局變量注入”型腳本做依賴和導(dǎo)出配置漩氨。
requirejs.config({
shim: {
'backbone': {
deps: ['underscore','jquery'],
//Once loaded, use the global 'Backbone' as the module value.
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'foo': {
deps: ['bar'],
exports: 'Foo',
// this 被賦值為global對象
// 依賴模塊可以通過參數(shù)傳進去
// 返回值作為global.Foo的值
init: function(bar) {
return this.Foo.noConflict()
}
}
}
})
存在而不導(dǎo)出任何模塊變量的模塊們西壮，shim配置可簡單的設(shè)為依賴數(shù)組。
requirejs.config({
shim: {
'jquery.colorize': ['jquery'],
'jquery.scroll': ['jquery'],
'backbone.layoutmanager': ['backbone']
}
})
定義模塊
簡單的值對
define({
color: 'black',
sieze: 'unsize'
})
函數(shù)是定義
// 自定義模塊名會使模塊不具備移植性
// 依賴模塊可在前面加“./”來引入統(tǒng)一路徑下模塊
define('myDefineModule', ['module1'], function(m1) {
// 返回值也可以是個函數(shù)
return {
color: 'black',
size: 'unsize'
}
})
模塊的引用
require(['module1','module2','module3'], function(m1,m2,m3) {})
