require.js data-main主模塊使用


在如何加載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。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM