前端為什麼要使用模組化？

這次帶給大家前端為什麼要使用模組化？ ，前端模組化的注意事項有哪些，下面就是實戰案例，一起來看一下。

CMD、AMD、CommonJS 規範分別指什麼？有哪些應用

AMD (Asynchronous Module Definition, 非同步模組定義) 指定一種機制，在該機制下模組和依賴可以移步載入。這對瀏覽器端的非同步載入尤其適用，其也是CommonJS規範的一個延伸。 12

語法

define(id?, dependencies?, factory);1

id: 定義中模組的名字，可選；如果沒有提供該參數，模組的名字應該預設為模組載入器請求的指定腳本的名字。 。

依賴dependencies：是一個目前模組依賴的，已被模組定義的模組標識的陣列字面量。 依賴參數是可選的，如果忽略此參數，它應該預設為[“require”, “exports”, “module”]。然而，如果工廠方法的長度屬性小於3，載入器會選擇以函數的長度屬性指定的參數個數呼叫工廠方法。

工廠方法factory：模組初始化要執行的函數或物件。如果為函數，它應該只被執行一次。如果是對象，此對象應該為模組的輸出值。 
範例

define('modal', ['jQuery', 'dialog'], function($, Dialog){$('.modal').show();
Dialog.open();
});1234

AMD的函式庫有RequireJS 、curl 、Dojo 等。 CommonJS是伺服器端模組的規範，Node.js採用了這個規範。 Node.JS首先採用了js模組化的概念。在一個模組中，存在一個自由的變數”require”，它是一個函數。這個”require”函數接收一個模組標識符。 “require”傳回外部模組所輸出的API。如果出現依賴閉環(dependency cycle)，那麼外部模組在被它的傳遞依（transitivedependencies）所require的時候可能並沒有執行完成；在這種情況下，」require」傳回的物件必須至少包含此外部模組在呼叫require函數（會進入目前模組執行環境）之前就已經準備好的輸出。如果請求的模組不能返回，那麼」require」必須拋出一個錯誤。在一個模組中，會存在一個名為」exports」的自由變量，它是一個對象，模組可以在執行的時候把自身的API加入其中。模組必須使用”exports”物件來做輸出的唯一表示。 
範例

exports.add = function() {
  var sum = 0, i = 0, args = arguments, l = args.length;  while (i < l) {
      sum += args[i++];
  }
  return sum;
};1234567

CMD（Common Module Definition）是 SeaJS推廣過程中產生的。

CMD由國內的玉伯提出，其與AMD規範的主要區別在於定義模組，和依賴引入部分。 AMD需要在宣告模組的時候指定所有的依賴，透過形參傳遞到模組內部 
範例

define(function(require, exports, module) {
  exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;    while (i < l) {
      sum += args[i++];
    }
    return sum;
  };
});123456789

與AMD模組相比，CMD更接近與Node對CommonJS規範的定義：

define(factory);1

在依賴部分，CMD支援動態引入，範例如下：

define(function(require , exports , module){    //the module code goes here
});123

require,exports,module透過形參傳遞給模組，在需要依賴模組的時候，，隨時呼叫模組引入即可。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

前端頁面測試的方法

#javascript中call與apply的應用

以上是前端為什麼要使用模組化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！