ES6模塊與commonJS模塊的差別

參考： 前端模塊化

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時指定加載某個輸出值，而不是加載整個模塊，這種加載稱爲「編譯時加載」。