js AMD規範介紹

關於javascript AMD規範更為基礎的內容可以參閱javascript的AMD規範簡單介紹一章節。

下面再來介紹一下AMD規範的相關知識。

AMD是"Asynchronous Module Definition"的縮寫，意思是"非同步模組定義"。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
define([id], [dependencies], factory);

引數解析:

（1）.id:可選，模組標識，可以省略。

（2）.dependencies: 可選，所依賴的模組，可以省略。

（3）.factory: 模組的實現，或者一個javascript物件。

程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
  exports.verb = function () {
    return beta.verb();
    //或者return require("beta").verb();
  }
});

定義一個alpha模組，依賴require，exports，beta模組。

[JavaScript] 純文字檢視 複製程式碼
define(["alpha"], function (alpha) {
  return {
    verb: function () {
      return alpha.verb() + 2;
    }
  };
});

定義個匿名模組，依賴alpha模組。

[JavaScript] 純文字檢視 複製程式碼
define({
  add: function (x, y) {
    return x + y;
  }
});

使用JSON定義一個沒有依賴的匿名模組。

[JavaScript] 純文字檢視 複製程式碼
define(function (require, exports, beta) {
  exports.verb = function() {
    return beta.verb();
    //或者return require("beta").verb();    
  }
});

定義一個相容Modules/Wrappings模組化規範的匿名模組。

Modules/Wrappings是CommonJS Modules的瀏覽器端解決方案。AMD規範相容Modules/Wrappings。

模組載入:

require([module], callback)

AMD模組化規範中使用全域性或區域性的require函式實現載入一個或多個模組，所有模組載入完成之後的回撥函式。

[module]：是一個陣列，裡面的成員就是要載入的模組。

callback：是模組載入完成之後的回撥函式。

程式碼示例：載入一個math模組，然後呼叫方法 math.add(2, 3)：

[JavaScript] 純文字檢視 複製程式碼
require(['math'], function (math) {
  math.add(2, 3);
});