*AMD* 規範，全稱 *Asynchronous Module Definition*，非同步模塊定義，模塊之間的依賴可以被非同步載入。 AMD 規範由 Common JS 規範演進而來，前文介紹 Common JS 規範時說過，瀏覽器端無法直接使用 Common JS，需要使用 *browseri... ...
1 AMD 規範介紹
AMD 規範，全稱 Asynchronous Module Definition，非同步模塊定義，模塊之間的依賴可以被非同步載入。
AMD 規範由 Common JS 規範演進而來，前文介紹 Common JS 規範時說過，瀏覽器端無法直接使用 Common JS，需要使用 browserify 編譯後才能運行。而 AMD 規範規範則專註於瀏覽器端。
1.1 定義模塊
AMD 規範定義模塊使用 define 函數，函數聲明如下：
define(id?, dependencies?, factory)
參數含義：
- id：非必填，模塊的名字。如果沒有傳該參數，模塊的名字預設為模塊載入器請求的指定腳本的名字
- dependencies：非必填，數組，定義的這個模塊所需要依賴的模塊的數組。如果定義的這個模塊不依賴於其他模塊，則不需要傳遞該參數。
- factory：必填，工廠方法。如果為對象，則表示這個模塊輸出的值；如果為函數，則是這個模塊要乾的事。
如果傳遞了 dependencies，dependencies 中依賴的每項模塊會在當前模塊的 factory 之前執行。
1.2 載入模塊
與 Common JS 規範類似，載入模塊使用 require 函數，但 AMD 規範中該函數有兩個參數，語法格式如下：
require([module], callback)
參數含義：
- module：數組，要載入的模塊數組。
- callback：模塊載入成功之後要乾的事。
2 Require JS
require.js 是符合 AMD 規範的 JS 庫，使用 require.js 可以實現 AMD 規範，進行模塊的定義和載入。
2.1 使用準備
首先下載 require.js 文件。require.js 可以從 github 下載。（不知道是不是網路原因，官網我打不開）
在項目中創建 lib 目錄，將 require.js 文件複製到 lib 目錄中。
2.2 初始化目錄
在 lib 同級目錄創建目錄 modules，在 modules 目錄中分別創建 module1.js 和 module2.js 代表兩個模塊。
同時下載 moment.js 文件，將其複製到 lib 目錄中。
在 lib 同級目錄創建入口 HTML 和 JS 文件，名字分別為：index.html 和 index.js.
此時目錄結構為：
|- 03_AMD/
|- lib/
|- require.js
|- moment.js
|- modules/
|- module1.js
|- module2.js
|- index.html
|- index.js
在 index.html 文件中通過 script 標簽引入 require.js 文件，同時指定 data-main 屬性：
<script src="./lib/require.js" data-main="./index.js"></script>
data-main 屬性指定了在載入完 require.js 屬性後，執行的入口文件，該文件也稱為 主模塊 。咱們的主模塊為 index.html 同級路徑下的 index.js 。
2.3 路徑配置
在入口 JS 文件 index.js 中對模塊進行配置：
requirejs.config({
baseUrl: './',
paths: {
m1: './modules/module1',
m2: './modules/module2',
moment: './lib/moment'
},
shim: {
moment: {
exports: 'moment'
},
}
})
- baseUrl 屬性：指定了基本路徑，後面模塊路徑配置都是相對於這個基本路徑。
- paths 屬性：配置各個模塊的名稱及對應文件路徑（省略 .js 尾碼）。上面分別給 module1.js、module2.js、moment.js 三個模塊命名為 m1， m2， moment。名字可以取其他名字，但路徑要正確。
- shim 屬性：當使用其他不符合 AMD 規範的模塊時，可以使用該屬性導出模塊。（這裡選擇的 moment.js 是相容 AMD 規範的庫，無須配置到 shim 屬性中，此處僅為了簡單演示）
2.4 定義模塊
前面創建了兩個自定義模塊，現在分別編寫這兩個模塊。
module1.js 中定義一個簡單的加法運算：
define(function () {
console.log('in module1.')
function sum(num1, num2) {
console.log('module1 sum function.', num1, num2)
return num1 + num2
}
return {
sum
}
})
module2.js 定義一個 calculate 函數，在該函數中需要調用 moment.js 中的格式化函數、 module1.js 中的 sum 函數，也就是說該模塊（m2）依賴於 moment 模塊 和 m1 模塊：
define(['m1', 'moment'], function (m1, moment) {
console.log('in module2.')
function calculate (n1, n2) {
console.log('begin calc: ', moment().format('YYYY MMM Do h:mm:ss a'))
return m1.sum(n1, n2)
}
return {
calculate
}
})
2.5 使用模塊
前面在主模塊 index.js 中定義了模塊的路徑，現在繼續在該文件中通過 require 函數使用其他模塊：
// ...
require(['m2'], function (m2) {
const result = m2.calculate(10, 20)
console.log(result)
})
主模塊中載入 m2 模塊（module2.js），並調用 m2 模塊中的 calculate 函數。
2.6 運行
在瀏覽器中運行 index.html，瀏覽器控制台輸出如下：
主模塊（index.js）依賴於 m2 模塊（module2.js），m2 模塊又依賴於 m1 模塊（module1.js），故 require.js 會首先載入 module1.js，輸出 in module1.，然後載入 module2.js， 輸出 in module2.。
m1、m2、moment 三個模塊都載入完畢後，才會執行主模塊中的 factory 工廠函數。
3 總結
AMD 規範的使用：
- 定義模塊：define 函數
- 載入模塊：require 函數
感謝你閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支持一下，點贊、關註、收藏，作者會持續與大家分享更多乾貨
