一讲冠、為什么要用require.js寇荧？
最早的時(shí)候，所有Javascript代碼都寫在一個(gè)文件里面，只要加載這一個(gè)文件就夠了统阿。后來窄潭，代碼越來越多帆卓，一個(gè)文件不夠了痢毒，必須分成多個(gè)文件，依次加載向挖。下面的網(wǎng)頁(yè)代碼蝌以，相信很多人都見過。
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>
缺點(diǎn) ：
1） 用戶體驗(yàn)差：加載的時(shí)候何之，瀏覽器會(huì)停止網(wǎng)頁(yè)渲染跟畅，加載文件越多，網(wǎng)頁(yè)失去響應(yīng)的時(shí)間就會(huì)越長(zhǎng)
2） 依賴和順序：由于js文件之間存在依賴關(guān)系溶推，因此必須嚴(yán)格保證加載順序徊件；
3） 維護(hù)困難：當(dāng)依賴關(guān)系很復(fù)雜的時(shí)候奸攻，代碼的編寫和維護(hù)都會(huì)變得困難；
二虱痕、require.js的優(yōu)勢(shì)
1睹耐、實(shí)現(xiàn)js文件的異步加載，避免網(wǎng)頁(yè)失去響應(yīng)部翘；
2硝训、管理模塊之間的依賴性，便于代碼的編寫和維護(hù)略就。
三、如何使用
1晃酒、是先去官方網(wǎng)站下載require.js最新版本;
2表牢、假定把它放在js子目錄下面，就可以加載了贝次。加載時(shí)放在頁(yè)面底部：
<script src="js/require.js"></script>
加載這個(gè)文件崔兴，也可能造成網(wǎng)頁(yè)失去響應(yīng)。解決辦法有兩個(gè)蛔翅，一個(gè)是把它放在網(wǎng)頁(yè)底部加載敲茄，另一個(gè)是寫成下面這樣：
<script src="js/require.js" defer async="true" ></script>
3、加載require.js以后山析，下一步就要加載我們自己的代碼了堰燎。假定我們自己的代碼文件是main.js，也放在js目錄下面笋轨。那么秆剪，只需要寫成下面這樣就行了：
<script src="js/require.js" data-main="js/main"></script>
data-main屬性的作用是，指定網(wǎng)頁(yè)程序的主模塊爵政。在上例中仅讽，就是js目錄下面的main.js，這個(gè)文件會(huì)第一個(gè)被require.js加載钾挟。由于require.js默認(rèn)的文件后綴名是js洁灵，所以可以把main.js簡(jiǎn)寫成main。
四掺出、主模塊的寫法
main.js徽千，我把它稱為"主模塊"，意思是整個(gè)網(wǎng)頁(yè)的入口代碼汤锨。它有點(diǎn)像C語(yǔ)言的main()函數(shù)罐栈，所有代碼都從這兒開始運(yùn)行。
下面就來看泥畅，怎么寫main.js荠诬。
- 如果我們的代碼不依賴任何其他模塊琅翻，那么可以直接寫入javascript代碼
//main.js
alert("hello,leilei!");
- 但這樣的話，就沒必要使用require.js了柑贞。真正常見的情況是方椎，主模塊依賴于其他模塊，這時(shí)就要使用AMD規(guī)范定義的的require()函數(shù)钧嘶。
// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});
require()函數(shù)接受兩個(gè)參數(shù)棠众。第一個(gè)參數(shù)是一個(gè)數(shù)組，表示所依賴的模塊有决，上例就是['moduleA', 'moduleB', 'moduleC']闸拿，即主模塊依賴這三個(gè)模塊；第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)书幕，當(dāng)前面指定的模塊都加載成功后新荤，它將被調(diào)用。加載的模塊會(huì)以參數(shù)形式傳入該函數(shù)台汇，從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊苛骨。
require()異步加載moduleA，moduleB和moduleC苟呐，瀏覽器不會(huì)失去響應(yīng)痒芝；它指定的回調(diào)函數(shù)，只有前面的模塊都加載成功后牵素，才會(huì)運(yùn)行严衬，解決了依賴性的問題。
五笆呆、模塊的加載
使用require.config()方法瞳步，我們可以對(duì)模塊的加載行為進(jìn)行自定義。require.config()就寫在主模塊（main.js）的頭部腰奋。參數(shù)就是一個(gè)對(duì)象单起，這個(gè)對(duì)象的paths屬性指定各個(gè)模塊的加載路徑。
require.config({
paths: {
"jquery": "jquery.min", //這個(gè)路徑是相對(duì)路徑
"underscore": "underscore.min",
"backbone": "backbone.min"
}
});
