js 模塊化CommonJS AMD UMD CMD ES6規范詳解

Posted on by

js 的演變

通過這篇文章，筆者將介紹幾種 js 模塊化的規范，以及它們各自的優缺點和差異……

在 js 剛出現的時候，隻是作為腳本語言，但隨著瀏覽器的不斷發展，js 越來越被重視起來，可以實現較為復雜的功能。這個時候開發者為瞭維護方便，會把不同功能的模塊抽離出來寫入單獨的 js 文件，但是當項目更為復雜的時候，html 中可能會引入很多個 js 文件，而這個時候就會出現命名沖突，污染作用域等一系列問題，這個時候 模塊化 的概念及實現方法應運而生。

模塊化

模塊化開發是一種管理方式，一種生產方式，也是一種解決問題的方案。一個模塊就是實現某個特定功能的文件，我們可以很方便的使用別人的代碼，想要什麼模塊，就引入那個模塊。但是模塊開發要遵循一定的規范，後面就出現瞭我們所熟悉的一系列規范。

1. CommonJS 規范

CommonJS 主要用在 node 開發上，每個文件就是一個模塊，每個文件都有自己的一個作用域。通過module.exports 暴露 public 成員。

此外，CommonJS 通過 require 引入模塊依賴，require 函數可以引入 node 的內置模塊、自定義模塊和 npm 等第三方模塊。

定義模塊：

// 定義模塊 math.js
var basicNum = 0;
function add(a, b) {
  return a + b;
}
// 在這裡寫上需要向外暴露的函數、變量
module.exports = { 
  add: add,
  basicNum: basicNum
}

加載模塊：

// 引入 math.js 模塊
var math = require('./math');
math.add(2, 3); // 5

優點：

  • 簡單並且容易使用
  • 服務器端模塊便於重用

缺點：

  • 同步的模塊加載方式不適合在瀏覽器環境中
  • 不能非阻塞的並行加載多個模塊

2. AMD 規范

AMD 是 (Asynchronous Module Definition) 的縮寫，意思就是"異步模塊定義"。它采用異步方式加載模塊，模塊的加載不影響它後面語句的運行。所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之後，這個回調函數才會運行。

在 AMD 規范中，我們使用 define 定義模塊，使用 require 加載模塊，但是不同於 CommonJS，它要求兩個參數：

定義模塊：

define(id?, dependencies?, factory);
  • id 是定義的模塊名，這個參數是 可選的，如果沒有定義該參數，模塊名字應該默認為模塊加載器請求的指定腳本的名字，如果有該參數，模塊名必須是頂級的絕對的。
  • dependencies 是定義的模塊中所依賴的 模塊數組，也是 可選的，依賴模塊優先級執行，並且執行結果按照數組中的排序依次以參數的形式傳入 factory。
  • factory 是模塊初始化要執行的函數或對象，是 必需的。

加載模塊：

require([module], callback);

第一個參數 module，是一個數組，裡面的成員就是要加載的模塊；第二個參數 callback，則是加載成功之後的回調函數。如果將前面的 CommonJS 改寫成 AMD 形式，就是下面這樣：

require(['./math'], function (math) {
  math.add(2, 3);
});

優點：

  • 適合在瀏覽器環境中異步加載模塊
  • 可以並行加載多個模塊

缺點：

  • 提高瞭開發成本
  • 不符合通用的模塊化思維方式

3. UMD 規范

UMD 是 (Universal Module Definition) 通用模塊定義 的縮寫。UMD 是 AMD 和 CommonJS 的一個糅合。AMD 是瀏覽器優先，異步加載；CommonJS 是服務器優先，同步加載。

既然要通用，怎麼辦呢？那就先判斷是否支持 node 的模塊，支持就使用 node；再判斷是否支持 AMD，支持則使用 AMD 的方式加載。這就是所謂的 UMD。

示例：

(function (window, factory) {
  if (typeof exports === "object") {
    // CommonJS
    module.exports = factory();
  } else if (typeof define === "function" && define.amd) {
    // AMD
    define(factory);
  } else {
    // 瀏覽器全局定義
    window.eventUtil = factory();
  }
})(this, function () {
  // do something
});

4. CMD 規范

CMD 是 (Common Module Definition) 公共模塊定義 的縮寫。CMD 可能是在 CommonJS 之後抽象出來的一套模塊化語法定義和使用的標準。

在 CMD 規范中，一個模塊就是一個文件。

定義模塊：

define(factory);

define 接收 factory 參數，它可以是一個函數，也可以是一個對象或一個字符串。

  • 當 factory 是一個對象或是一個字符串時，表示該模塊的接口就是這個對象或者字符串。
  • 當 factory 是一個函數時，表示是該模塊的構造方法。執行該構造方法，可以得到模塊向外提供的接口。factory 在執行時，默認傳入三個參數：require、exports、module。其中 require 用來加載其它模塊，exports 用來向外提供模塊接口。module 是一個對象，存儲著與當前模塊相關聯的一些屬性和方法。

加載模塊：

我們可以通過 SeaJs 的 use 方法加載模塊:

seajs.use([module], callback);

優點：可以很容易在 node 中運行

缺點：依賴 SPM 打包，模塊的加載邏輯偏重

5. ES6 模塊化

ES6 模塊的設計思想是盡量的 靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都隻能在運行時確定這些東西。

在 ES6 中，我們使用 export 關鍵字來導出模塊，使用 import 關鍵字來引入模塊。

引入模塊：

// ES6模塊
import { stat, exists, readFile } from 'fs';

上面代碼實質是從 fs 模塊中加載 3 個方法，其他方法不加載。這種加載稱為 “編譯時加載” 或者 靜態加載，即 ES6 可以在編譯時就完成模塊加載，效率要比 CommonJS 模塊的加載方式高。當然，這也導致瞭沒法引用 ES6 模塊本身，因為它不是對象。

導出模塊：

let firstName = 'Zhou';
let lastName = 'ShuYi';
let year = 1994;
export { firstName, lastName, year };

上面代碼在 export 後面，使用大括號指定所要輸出的一組變量。export 除瞭輸出變量，還可以輸出函數或類。

優點：容易進行靜態分析

缺點：原生瀏覽器端還沒有實現該標準

AMD 和 CMD 的區別

對於依賴的模塊，AMD 是 提前執行，CMD 是 延遲執行。

AMD 推崇 依賴前置，CMD 推崇 依賴就近。

AMD 的 API 默認是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一。

ES6 模塊與 CommonJS 模塊的差異

CommonJS 模塊輸出的是一個 值的拷貝，ES6 模塊輸出的是 值的引用。

CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。

CommonJS 模塊的 require() 是 同步加載 模塊，ES6 模塊的 import 命令是 異步加載，有一個獨立的模塊依賴的解析階段。

最後

以上就是筆者對於 js 模塊化的一些理解，更多關於js 模塊化規范的資料請關註WalkonNet其它相關文章！

推薦閱讀：