淺析ES6與CommonJS中模塊的用法對(duì)比

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

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

與 CommonJS 的差異

兩大差異：

CommonJS 模塊輸出的是一個(gè)值的拷貝，ES6 模塊輸出的是值的引用。
CommonJS 模塊是運(yùn)行時(shí)加載，ES6 模塊是編譯時(shí)輸出接口。

值拷貝&值引用

// 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 當(dāng)中的實(shí)例是和原本模塊完全不相干的。這也就解釋了為什么調(diào)用了 counter.increment() 之后仍然返回1。因?yàn)槲覀円氲?counter 變量和模塊里的是兩個(gè)不同的實(shí)例。

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

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

而通過(guò) import 語(yǔ)句，可以引入實(shí)時(shí)只讀的模塊：

// 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

加載 & 編譯

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

ES6 模塊是編譯時(shí)輸出接口，因此有如下2個(gè)特點(diǎn)：

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

// a.js
console.log('a.js')
import { foo } from './b';// b.js
export let foo = 1;
console.log('b.js 先執(zhí)行');// 執(zhí)行結(jié)果:
// 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í)行結(jié)果:
// { 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)加載如果處理不好，還可能導(dǎo)致遞歸加載，使得程序無(wú)法執(zhí)行，因此應(yīng)該避免出現(xiàn)。

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

// 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);

輸出結(jié)果為：

在 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沒(méi)有執(zhí)行完畢，只執(zhí)行了第一行。
main.js執(zhí)行到第二行時(shí)，不會(huì)再次執(zhí)行b.js，而是輸出緩存的b.js的執(zhí)行結(jié)果，即它的第四行

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

// 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';

運(yùn)行結(jié)果如下：

b.mjs
ReferenceError: foo is not defined

上面代碼中，執(zhí)行a.mjs以后會(huì)報(bào)錯(cuò)，foo變量未定義.

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

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

解決這個(gè)問(wèn)題的方法，就是讓b.mjs運(yùn)行的時(shí)候，foo已經(jīng)有定義了。這可以通過(guò)將foo寫(xiě)成函數(shù)來(lái)解決。

// 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í)行結(jié)果為：