require.js data-main主模組使用

在如何載入require.js檔案介紹瞭如何載入require.js檔案。

當require.js檔案載入完畢之後，就可以開始它的模組管理工作，看一段程式碼:

[HTML] 純文字檢視 複製程式碼
<script src="js/require.js" data-main="js/main"></script>

require.js在載入的時候會檢查data-main屬性，當載入完畢，data-main屬性規定的js檔案會第一個被require.js載入並執行。由於require.js預設的檔案字尾名是js，所以可以把main.js簡寫成main。

假設main.js程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
console.log("螞蟻部落")

上面的程式碼沒有任何的依賴，也就沒有必要使用require.js，下面再來看一個有依賴關係的:

[JavaScript] 純文字檢視 複製程式碼
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
  // 程式碼
});

require()方法具有兩個引數，下面分別做一下介紹:

（1）.第一個引數是陣列，每一個元素都是所依賴的模組。

（2）.第二個引數是回撥函式，依賴模組載入完畢後，會執行此回撥函式，引數是對應的依賴模組。

假如main.js的程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
  // 程式碼
});

程式碼分析如下:

（1）.jQuery、underscore和backone是main.js所依賴的模組。

（2）.回撥函式會在前面三個模組載入完畢後執行，引數是對應的模組（名稱可以自己定義）。

特別說明:main.js的載入也是非同步的，如果頁面中配置了其它JS載入，則不能保證它們所依賴的JS已經載入成功。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<script data-main="scripts/main" src="scripts/require.js"></script>
<script src="scripts/other.js"></script>

main.js程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
require.config({
  paths: {
    foo: 'libs/foo-1.1.3'
  }
});

other.js程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
require( ['foo'], function( foo ) {
  // 程式碼
});

可能other.js需要載入foo模組的時候，main.js還有執行完對foo-1.1.3的重新命名，所以會導致other.js載入foo.js而不是libs/foo-1.1.3.js。

關於require.config()方法可以參閱require.config()用法一章節。