JavaScript模塊化思想requireJS的使用

我們需要在html頁面中引入require.js：

1 <script src="js/require.js" type="text/javascript" charset="utf-8" defer="defer" async="async"></script>

接下來，在js目錄下新建我們的入口js文件，我們把它命名為“main.js”。這個文件就相當於java語言中的main函數，是整個js模塊體系的入口，我們在main.js中引用我們需要依賴的js文件。

在剛剛引入require.js的script標簽中添加一行一個data-main屬性，並賦值為“js/main”。

1 <script src="js/require.js" data-main = "js/main" type="text/javascript" charset="utf-8" defer="defer" async="async"></script>

這個屬性的值就是指定main.js文件的路徑，可以省略.js尾碼。

1 // main.js
2 console.log("main.js被執行");

1 require(['firstModule','secondModule','thirdModule'],function(firstModule,secondModule,thirdModule){
2     //模塊載入完成後執行的回調函數
3 });

1 require.config({  // main.js文件的路徑是js/main.js
2     paths:{
3         "firstModule":"lib/firstModule.js"  // 路徑是js/lib/firstModule.js
4         "secondModule":"lib/secondModule.js"    // 路徑是js/lib/secondModule.js
5         "thirdModule":"lib/thirdModule.js"    // 路徑是js/lib/thirdModule.js
6     }
7 });

我們發現這三個依賴的js文件都在js目錄下的lib目錄下，為了書寫簡單，我們可以設置“基目錄”：

1 require.config({  // main.js文件的路徑是js/main.js
2     baseUrl:"js/lib",
3     paths:{
4         "firstModule":"firstModule.js"  // 路徑是js/lib/firstModule.js
5         "secondModule":"secondModule.js"    // 路徑是js/lib/secondModule.js
6         "thirdModule":"thirdModule.js"    // 路徑是js/lib/thirdModule.js
7     }
8 });

我們發現這樣寫有一個問題，就是依賴幾個js模塊，就得發送幾次js請求，require.js針對這個問題有一個優化工具，可以把多個模塊合併在一個文件中，減少js請求。這個等我瞭解之後再單獨說... ...

5. 接下來，我們看一個完整的使用AMD寫法實現的模塊載入到調用執行的例子：

 1 /*
 2  * js/lib/dates.js
 3  */
 4 define(function(){
 5     let date = new Date();
 6     let outDate = function(){
 7         console.log(date.getDate());
 8     };
 9     return {
10         outDate:outDate
11     };
12 });
13 
14 
15 
16 /*
17  *  js/main.js
18  */
19 require(['lib/dates'],function(dates){
20     dates.outDate();
21 });

執行結果：

6. 如何載入沒有使用AMD規範的模塊（沒有使用define()函數定義）

1 shim:{
2    "jquery.scroll":{
3         deps:['jquery'],
4         exports:'jQuery.fn.scroll'
5    }
6 }