淺析ES6與CommonJS中模塊的用法對比

更新時間：2023年09月11日 08:18:54 作者：編程三昧

ES6?的模塊化汲取了?CommonJS?和AMD?的優(yōu)點,擁有簡潔的語法和異步的支持,并且寫法也和?CommonJS?非常的相似,下面我們就來看看二者用法的差異吧

與 CommonJS 的差異

兩大差異：

CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。
CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。

值拷貝&值引用

// lib/counter.js
var counter = 1;function increment() {
  counter++;
}
function decrement() {
  counter--;
}
module.exports = {
  counter: counter,
  increment: increment,
  decrement: decrement
};// src/main.jsvar counter = require('../../lib/counter');counter.increment();
console.log(counter.counter); // 1

在 main.js 當中的實例是和原本模塊完全不相干的。這也就解釋了為什么調(diào)用了 counter.increment() 之后仍然返回1。因為我們引入的 counter 變量和模塊里的是兩個不同的實例。

所以調(diào)用 counter.increment() 方法只會改變模塊中的 counter .想要修改引入的 counter 只有手動一下啦：

counter.counter++;
console.log(counter.counter); // 2

而通過 import 語句，可以引入實時只讀的模塊：

// lib/counter.js
export let counter = 1;
export function increment() {
  counter++;
}
export function decrement() {
  counter--;
}// src/main.js
import * as counter from '../../counter';console.log(counter.counter); // 1
counter.increment();
console.log(counter.counter); // 2

加載 & 編譯

因為 CommonJS 加載的是一個對象（module.exports），對象只有在有腳本運行的時候才能生成。而 ES6 模塊不是一個對象，只是一個靜態(tài)的定義。在代碼解析階段就會生成。

ES6 模塊是編譯時輸出接口，因此有如下2個特點：

import 命令會被 JS 引擎靜態(tài)分析，優(yōu)先于模塊內(nèi)的其他內(nèi)容執(zhí)行
export 命令會有變量聲明提升的效果,所以import 和 export 命令在模塊中的位置并不影響程序的輸出。

// a.js
console.log('a.js')
import { foo } from './b';// b.js
export let foo = 1;
console.log('b.js 先執(zhí)行');// 執(zhí)行結果:
// b.js 先執(zhí)行
// a.js
// a.js
import { foo } from './b';
console.log('a.js');
export const bar = 1;
export const bar2 = () => {
  console.log('bar2');
}
export function bar3() {
  console.log('bar3');
}// b.js
export let foo = 1;
import * as a from './a';
console.log(a);// 執(zhí)行結果:
// { bar: undefined, bar2: undefined, bar3: [Function: bar3] }
// a.js

循環(huán)加載的差異

“循環(huán)加載”（circular dependency）指的是，a腳本的執(zhí)行依賴b腳本，而b腳本的執(zhí)行又依賴a腳本。

// a.js
var b = require('b');// b.js
var a = require('a');

循環(huán)加載如果處理不好，還可能導致遞歸加載，使得程序無法執(zhí)行，因此應該避免出現(xiàn)。

在 CommonJS 中，腳本代碼在 require 的時候，就會全部執(zhí)行。一旦出現(xiàn)某個模塊被"循環(huán)加載"，就只輸出已經(jīng)執(zhí)行的部分，還未執(zhí)行的部分不會輸出。

// a.js
exports.done = false;
var b = require('./b.js');
console.log('在 a.js 之中，b.done = %j', b.done);
exports.done = true;
console.log('a.js 執(zhí)行完畢');
// b.js
exports.done = false;
var a = require('./a.js');
console.log('在 b.js 之中，a.done = %j', a.done);
exports.done = true;
console.log('b.js 執(zhí)行完畢');
// main.js
var a = require('./a.js');
var b = require('./b.js');
console.log('在 main.js 之中, a.done=%j, b.done=%j', a.done, b.done);

輸出結果為：

在 b.js 之中，a.done = false
b.js 執(zhí)行完畢
在 a.js 之中，b.done = true
a.js 執(zhí)行完畢
在 main.js 之中, a.done=true, b.done=true

從上面我們可以看出：

在b.js之中，a.js沒有執(zhí)行完畢，只執(zhí)行了第一行。
main.js執(zhí)行到第二行時，不會再次執(zhí)行b.js，而是輸出緩存的b.js的執(zhí)行結果，即它的第四行

ES6 處理“循環(huán)加載”與 CommonJS 有本質的不同**。ES6 模塊是動態(tài)引用**，如果使用import從一個模塊加載變量（即import foo from 'foo'），那些變量不會被緩存，而是成為一個指向被加載模塊的引用，需要開發(fā)者自己保證，真正取值的時候能夠取到值。

// a.mjs
import {bar} from './b';
console.log('a.mjs');
console.log(bar);
export let foo = 'foo';// b.mjs
import {foo} from './a';
console.log('b.mjs');
console.log(foo);
export let bar = 'bar';

運行結果如下：

b.mjs
ReferenceError: foo is not defined

上面代碼中，執(zhí)行a.mjs以后會報錯，foo變量未定義.

具體的執(zhí)行結果如下：

執(zhí)行a.mjs以后，引擎發(fā)現(xiàn)它加載了b.mjs，因此會優(yōu)先執(zhí)行b.mjs，然后再執(zhí)行a.mjs
執(zhí)行b.mjs的時候，已知它從a.mjs輸入了foo接口，這時不會去執(zhí)行a.mjs，而是認為這個接口已經(jīng)存在了，繼續(xù)往下執(zhí)行。
執(zhí)行到第三行console.log(foo)的時候，才發(fā)現(xiàn)這個接口根本沒定義，因此報錯。

解決這個問題的方法，就是讓b.mjs運行的時候，foo已經(jīng)有定義了。這可以通過將foo寫成函數(shù)來解決。

// a.mjs
import {bar} from './b';
console.log('a.mjs');
console.log(bar());
function foo() { return 'foo' }
export {foo};// b.mjs
import {foo} from './a';
console.log('b.mjs');
console.log(foo());
function bar() { return 'bar' }
export {bar};

最后執(zhí)行結果為：