使用 AMD 載入器整合多種主流 JavaScript 架構

AMD 簡要介紹

AMD 是 Asynchronous Module Definition 的簡稱，即非同步模組載入機制。該規範是由 CommonJS 提出的一種非同步動態載入 JavaScript 代碼的 API 規範。AMD 以簡潔優雅的運行方式得到了很多主流 JavaScript 架構的 青睞，主流 JavaScript 開源架構逐漸開始用 AMD 規範來實現對其代碼模組的動態載入。在 AMD 日益流行的情況下，開發 過程中的 JavaScript 架構遷移變得更加方便，同時，在一個應用中引入多個具有不同優勢和功能特點的 JavaScript 架構 也變得剛加容易。

AMD 工作原理

AMD 的 API 規範非常簡潔，僅包含一個名為 define 的函數：

define([module-name?], [array-of-dependencies?], [module-factory-or-object]);

其中：

   module-name：模組標識，可以省略。
   array-of-dependencies：所依賴的模組，可以 省略。
   module-factory-or-object：模組的具體實現，或者一個 JavaScript 對象。

第一個 參數 module-name 指的是模組名稱標識，該參數在 AMD 載入中沒有實際性作用，只做為一個名稱標識。如果第一個參數被 省略，那麼這個模組就成為了一個匿名模組。

匿名模組最大的優勢就是可以降低代碼本身和所屬模組的耦合程度。 這類別模組符合 DRY (Don't repeat yourself) 原則，即模組檔案可以放置在任何位置而不需要修改檔案內容本身。如 比較熟悉的 Java 類，它的類名和包名必須符合一定的格式，檔案名稱和類名需要一致，檔案也必須放置在相應的包路徑下。 而在 AMD 載入的 dojo 中，如果一個模組為匿名模組，那麼該模組的檔案名稱就是模組標識。

AMD 的優勢

匿 名模組的優勢

下面來對比一下傳統模組載入方式和 AMD 方式，看看匿名模組有什麼樣的優勢：

在 dojo 的 早期版本中，建立一個 dog 類，該類繼承自 animal 類。檔案結構如下圖所示：

圖 1

在基類 animal 中有如下聲明 ：

清單 1

dojo.provide("animal"); // 用於初始化該 js 檔案，使之成為 dojo 的模組

在非 AMD 情況下檔案名稱和 provide 中參數必須保 持一致性 ( 即檔案名稱與模組標識最後小數點右邊部分保持一致 )，否則 dojo.require 就無法正確初始化調用該模組。

此時，繼續引入子類，如 cat 類、tiger 類，為了區別基類與之類，將 animal 基類移到一個獨立的檔案夾，如下 圖：

圖 2