require.js的誕生是為了解決兩大問題，第一實現js文件的異步加載，避免網頁失去響應，第二管理模塊之間的依賴性，便于代碼的編寫和維護。

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

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

?

1

? ?

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

? ?

有人可能會想到，加載這個文件，也可能造成網頁失去響應。解決辦法有兩個，一個是把它放在網頁底部加載，另一個是寫成下面這樣：

?

1

? ?

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

? ?

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

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

?

1

? ?

<script src="js/require.js" data-main="js/main"></script>

? ?

data-main屬性的作用是，指定網頁程序的主模塊。在上例中，就是js目錄下面的main.js，這個文件會第一個被require.js加載。由于require.js默認的文件后綴名是js，所以可以把main.js簡寫成main。

三、主模塊的寫法

上一節的main.js，我把它稱為"主模塊"，意思是整個網頁的入口代碼。它有點像C語言的main()函數，所有代碼都從這兒開始運行。

下面就來看，怎么寫main.js。

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

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

但這樣的話，就沒必要使用require.js了。真正常見的情況是，主模塊依賴于其他模塊，這時就要使用AMD規范定義的的require()函數。

// main.js

　　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){

　　　　// some code here

　　});

? ??require()函數接受兩個參數。第一個參數是一個數組，表示所依賴的模塊，上例就是['moduleA', 'moduleB', 'moduleC']，即主模塊依賴這三個模塊；第二個參數是一個回調函數，當前面指定的模塊都加載成功后，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可以使用這些模塊。

require()異步加載moduleA，moduleB和moduleC，瀏覽器不會失去響應；它指定的回調函數，只有前面的模塊都加載成功后，才會運行，解決了依賴性的問題。