require.js的誕生是為了解決兩大問(wèn)題，第一實(shí)現(xiàn)js文件的異步加載，避免網(wǎng)頁(yè)失去響應(yīng)，第二管理模塊之間的依賴性，便于代碼的編寫和維護(hù)。

使用require.js的第一步，是先去官方網(wǎng)站下載最新版本。

下載后，假定把它放在js子目錄下面，就可以加載了。

?

1

? ?

<script src="js/require.js"></script>

? ?

有人可能會(huì)想到，加載這個(gè)文件，也可能造成網(wǎng)頁(yè)失去響應(yīng)。解決辦法有兩個(gè)，一個(gè)是把它放在網(wǎng)頁(yè)底部加載，另一個(gè)是寫成下面這樣：

?

1

? ?

<script src="js/require.js" defer async="true" ></script>

? ?

async屬性表明這個(gè)文件需要異步加載，避免網(wǎng)頁(yè)失去響應(yīng)。IE不支持這個(gè)屬性，只支持defer，所以把defer也寫上。

加載require.js以后，下一步就要加載我們自己的代碼了。假定我們自己的代碼文件是main.js，也放在js目錄下面。那么，只需要寫成下面這樣就行了：

?

1

? ?

<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。

三、主模塊的寫法

上一節(jié)的main.js，我把它稱為"主模塊"，意思是整個(gè)網(wǎng)頁(yè)的入口代碼。它有點(diǎn)像C語(yǔ)言的main()函數(shù)，所有代碼都從這兒開(kāi)始運(yùn)行。

下面就來(lái)看，怎么寫main.js。

如果我們的代碼不依賴任何其他模塊，那么可以直接寫入javascript代碼。

　　// main.js
　　alert("加載成功！");

但這樣的話，就沒(méi)必要使用require.js了。真正常見(jiàn)的情況是，主模塊依賴于其他模塊，這時(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)行，解決了依賴性的問(wèn)題。