js模塊化CommonJS、AMD、UMD、CMD和ES6規范是什么

這篇“js模塊化CommonJS、AMD、UMD、CMD和ES6規范是什么”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“js模塊化CommonJS、AMD、UMD、CMD和ES6規范是什么”文章吧。

模塊化

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

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模塊化CommonJS、AMD、UMD、CMD和ES6規范是什么”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。