在如何加載require.js文件介紹了如何加載require.js文件。
當require.js文件加載完畢之后,就可以開始它的模塊管理工作,看一段代碼:
[HTML] 純文本查看 復制代碼
1
require.js在加載的時候會檢查data-main屬性,當加載完畢,data-main屬性規定的js文件會第一個被require.js加載並執行。由於require.js默認的文件后綴名是js,所以可以把main.js簡寫成main。
假設main.js代碼如下:
[JavaScript] 純文本查看 復制代碼
1
console.log("螞蟻部落")
上面的代碼沒有任何的依賴,也就沒有必要使用require.js,下面再來看一個有依賴關系的:
[JavaScript] 純文本查看 復制代碼
1
2
3
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// 代碼
});
require()方法具有兩個參數,下面分別做一下介紹:
(1).第一個參數是數組,每一個元素都是所依賴的模塊。
(2).第二個參數是回調函數,依賴模塊加載完畢后,會執行此回調函數,參數是對應的依賴模塊。
假如main.js的代碼如下:
[JavaScript] 純文本查看 復制代碼
1
2
3
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
// 代碼
});
代碼分析如下:
(1).jQuery、underscore和backone是main.js所依賴的模塊。
(2).回調函數會在前面三個模塊加載完畢后執行,參數是對應的模塊(名稱可以自己定義)。
特別說明:main.js的加載也是異步的,如果頁面中配置了其它JS加載,則不能保證它們所依賴的JS已經加載成功。
代碼如下:
[HTML] 純文本查看 復制代碼
1
2
main.js代碼如下:
[JavaScript] 純文本查看 復制代碼
1
2
3
4
5
require.config({
paths: {
foo: 'libs/foo-1.1.3'
}
});
other.js代碼如下:
[JavaScript] 純文本查看 復制代碼
1
2
3
require( ['foo'], function( foo ) {
// 代碼
});
可能other.js需要加載foo模塊的時候,main.js還有執行完對foo-1.1.3的重命名,所以會導致other.js加載foo.js而不是libs/foo-1.1.3.js。