• CommonJS模塊是運行時加載,ES6模塊是編譯時輸出接口
  是因為CommonJS加載的是一個對象(module.exports屬性),該對象只有在腳本運行結束時才會生成.而ES6模塊不是對象,它的對外接口只是一種靜態定義,在代碼靜態解析階段就會生成.

• CommonJS模塊輸出的是一個值的復制，ES6模塊輸出的是值得引用

// 也就是說,一旦輸出一個值,模塊內部的變化就影響不到這個值// lib.js
var counter = 3;
function incCounter() {counter++;
}
module.exports = {conuter: counter,incCounter: incCounter,
};// main.js
var mod = require('./lib');console.log(mod.counter);   // 3
mod.incCounter();
console.log(mod.counter);    // 3// 注:可以看到,雖然執行了incCounter() ,即:counter++,  但是打印出counter的值還是3,并未增加// 一個解決辦法就是將counter放在函數的返回值里面輸出
// lib.js
var counter = 3;
function incCounter(){counter++;
}
module.exports ={get counter() { return counter},incCounter: incCounter,
};
// 注:get在獲取counter屬性時會執行,返回counter的值.

ES6模塊的運行機制:JS引擎對腳本靜態分析的時候,遇到模塊加載命令import就會生成一個只讀引用。等到真正執行時,再根據這個只讀引用到被加載的模塊中取值。因此,ES6模塊是動態引用,并且不會緩存值,模塊里面的變量綁定其所在的模塊.

// lib.js
export let counter = 3;
export function incCounter() {counter++;
}// main.js
import { counter, incCounter } from './lib';
console.log(counter);   // 3
incCounter();
console.log(counter);   // 4

參考《ES6標準入門》(第3版)P477~P479