ES6模組與commonJS模組的差異

榴蓮布丁發表於2019-03-05
JS

參考： 前端模組化

ES6 在語言標準的層面上，實現了模組功能，而且實現得相當簡單，旨在成為瀏覽器和伺服器通用的模組解決方案。 其模組功能主要由兩個命令構成：export和import。export命令用於規定模組的對外介面， import命令用於輸入其他模組提供的功能。

使用import命令的時候，使用者需要知道所要載入的變數名或函式名

/** 定義模組 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};

// export命令用於規定模組的對外介面
export { basicNum, add };


/** 引用模組 **/

// import命令用於輸入其他模組提供的功能
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}

複製程式碼

其實ES6還提供了export default命令，為模組指定預設輸出，對應的import語句不需要使用大括號。這也更趨近於ADM的引用寫法。

/** export default **/
//定義輸出
export default { basicNum, add };
//引入
import math from './math';
function test(ele) {
    ele.textContent = math.add(99 + math.basicNum);
}

複製程式碼

ES6的模組不是物件，import命令會被 JavaScript 引擎靜態分析，在編譯時就引入模組程式碼，而不是在程式碼執行時載入，所以無法實現條件載入。也正因為這個，使得靜態分析成為可能。

ES6 模組與commonJS模組的差異

1. commonJS 模組輸出的是一個值的拷貝，ES6模組輸出的是值的引用
  • commonJS模組一旦輸出一個值，模組內部的變化就影響不到這個值。
  • ES6模組如果使用import從一個模組載入變數，那些變數不會被快取，而是成為一個指向被載入模組的引用，原始值變了，import載入的值也會跟著變。需要開發者自己保證，真正取值的時候能夠取到值。
2. commonJS 模組是執行時載入，ES6 模組是編輯時輸出介面

  • 執行時載入：commonJS 模組就是物件；即在輸入時是先載入整個模組，生成一個物件，然後再從這個物件上讀取方法，這種載入稱為“執行時載入”。commonJS指令碼程式碼在require的時候，就會全部執行。一旦出現某個模板被“迴圈載入”，就只能輸出已經執行的部分，還未執行的部分不會輸出。

  • 編譯時載入：ES6 模組不是物件，而是通過export命令顯式指定輸出的程式碼，import時指定載入某個輸出值，而不是載入整個模組，這種載入稱為“編譯時載入”。

相關文章