最近在做微信端系統(tǒng)颅悉，用到了該庫(kù)。自己學(xué)習(xí)記錄一下~
首先做WEB網(wǎng)頁(yè)趋急，我們引文件經(jīng)常是這么寫(xiě)的：
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
使用require.js庫(kù)就是防止這種寫(xiě)法驳阎，其優(yōu)點(diǎn)如下：
1.防止js加載阻塞頁(yè)面渲染，避免網(wǎng)頁(yè)失去響應(yīng)；
2.管理模塊之間的依賴(lài)性，便于代碼維護(hù)；
為了避免網(wǎng)頁(yè)可能失去響應(yīng)城侧，在網(wǎng)頁(yè)底部加載
<script src="js/require.js" data-main="js/main"></script>
data-main屬性的作用：指定網(wǎng)頁(yè)程序的主模塊。上例中彼妻，主模塊就是js目錄下的main.js赞庶，
它會(huì)第一個(gè)被require.js加載。
注：require.js默認(rèn)文件后綴名是js澳骤，所以main.js簡(jiǎn)寫(xiě)成main
主模塊的寫(xiě)法：
// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});
require()函數(shù)接受兩個(gè)參數(shù)：
第一個(gè)是數(shù)組歧强，表示所依賴(lài)的模塊；
第二個(gè)是回調(diào)函數(shù)为肮，當(dāng)模塊全部加載成功后摊册，它將被調(diào)用。
加載的模塊會(huì)以參數(shù)形式傳入該函數(shù)颊艳，從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊茅特。
require.config()方法：
寫(xiě)在主模塊（main.js）的頭部
模塊指定具體路徑：
require.config({
paths: {
"jquery": ".../.../jquery.min",
"underscore": ".../.../underscore.min"
}
});
也可以直接改變基目錄baseUrl：
require.config({
baseUrl: ".../...",
paths: {
"jquery": "jquery.min",
"underscore": "underscore.min"
}
});
還可以指定它的網(wǎng)址：如果遠(yuǎn)程加載失敗，就加載本地的庫(kù)
require.config({
paths: {
"jquery": ["https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min",".../.../jquery.min"]
}
});
主模塊加載其他模塊：
require(['jquery', 'underscore'], function ($, _){
// some code here
});
AMD模塊的寫(xiě)法：
require.js加載的模塊棋枕，采用AMD規(guī)范白修。就是模塊必須采用define()函數(shù)來(lái)定義。
如果一個(gè)模塊不依賴(lài)其他模塊重斑，那么可以直接定義在define函數(shù)中兵睛。
比如：
//math.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
})
main.js中加載如下：
require(["math"],function(math){
alert(math.add(1,2));
})
如果math模塊還依賴(lài)其他模塊，那么define函數(shù)第一個(gè)參數(shù)必須是一個(gè)數(shù)組，定義如下：
//math.js
define(["myModule"],function(myModule){
function out(){
myModule.doSth();
}
return{
out: out
}
})
require(["math"],function(math){
alert(math.out());
})
加載非AMD規(guī)范的模塊：要先在require.config()方法定義它們的一些特征祖很。
比如：underscore和backbone這兩個(gè)庫(kù)笛丙，都沒(méi)有采用AMD規(guī)范編寫(xiě)。
require.config({
shim: {
'underscore':{
exports: '_'
},
'backbone':{
deps: ['underscore','jquery'],
exports: 'Backbone'
}
}
});
shim專(zhuān)門(mén)用來(lái)配置不兼容的模塊假颇。
exports的值：表明這個(gè)模塊外部調(diào)用時(shí)的名稱(chēng)
deps數(shù)組：表明該模塊的依賴(lài)性
比如jquery的插件可以這樣定義：
shim: {
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}
require.js的插件
1. text.js用于異步加載文本資源胚鸯，如txt、css笨鸡、html姜钳、xml等。
配置：
paths: {
text:'../require/text'
}
使用：
require(['text!../css/a.css','text!../templates/a.html'], function (aCss,aHtml){
//TODO
});
2. domReady.js形耗，顧名思義哥桥，dom加載完畢需要做什么...
require(['domReady!'],function (doc) {
//本函數(shù)會(huì)在DOM ready時(shí)調(diào)用。
//注意'domReady!'的值為當(dāng)前的document
});
3. i18n.js趟脂，國(guó)際化
以上。
