快捷導(dǎo)航

CommonJS與ES6?Module的使用區(qū)別分析

更新時(shí)間：2022年04月26日 16:21:38 作者：「零一」

這篇文章主要為大家介紹了CommonJS與ES6?Module的使用區(qū)別分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

學(xué)了JS并且用過(guò)Node.js后，對(duì)模塊化應(yīng)該是有所了解和使用了，那么一定見(jiàn)過(guò)以下兩種模塊導(dǎo)入導(dǎo)出的方式

第一種： ES6 Module

// B.js
function show() {
	console.log('show方法被執(zhí)行')
}
export default show
// A.js
import show from './B.js'
show()  // show方法被執(zhí)行

第二種： CommonJS

// B.js
function show() {
	console.log('show方法被執(zhí)行')
}
module.exports = {
	show
}
// A.js
const bModule = require('./B.js')
bModule.show()  // show方法被執(zhí)行

以上兩種導(dǎo)入導(dǎo)出方法涉及到了兩種模塊規(guī)范，分別是ES6 Module 、CommonJS

本文就來(lái)聊聊這兩者之間的具體使用與區(qū)別

1. CommonJS

CommonJS是2009年由JavaScript社區(qū)提出的包含了模塊化的一個(gè)標(biāo)準(zhǔn)，后來(lái)被Node.js所采用并實(shí)現(xiàn)，也就是說(shuō)我們?cè)贜ode.js中用到的模塊導(dǎo)入導(dǎo)出都是依照CommonJS標(biāo)準(zhǔn)來(lái)實(shí)現(xiàn)的

1.1 導(dǎo)出

我們可以把一個(gè)文件看成一個(gè)模塊，每個(gè)模塊之間是互相獨(dú)立的，即不會(huì)互相影響。當(dāng)需要使用到某個(gè)模塊時(shí)，只需在文件中將目標(biāo)模塊導(dǎo)入即可

要想被其它模塊導(dǎo)入首先需要導(dǎo)出需要向外暴露的變量或方法，在CommonJS中導(dǎo)出的語(yǔ)法有以下兩種方式

// B.js
// 定義了函數(shù)show
function show() {
	console.log('show方法被調(diào)用')
}
// 定義了變量count
let count = 3
/*--------------  導(dǎo)出方法  --------------*/
// 第一種
module.exports = {
	show,
	count
}
// 第二種
exports.show = show
exports.count = count

上述代碼中，兩種導(dǎo)出方式是等價(jià)的。

第一種導(dǎo)出方式是將需要導(dǎo)出的函數(shù)或變量存儲(chǔ)到 module.exports 里面，其中 module.exports 原本是一個(gè)空對(duì)象

第二種導(dǎo)出方式中，exports 在內(nèi)部其實(shí)是指向了 module.exports，所以當(dāng)我們執(zhí)行 exports.變量或 exports.函數(shù) 時(shí)，其實(shí)就相當(dāng)于把變量或函數(shù)存儲(chǔ)到 module.exports 中

注意：這里要特別強(qiáng)調(diào)的是，在使用第二種導(dǎo)出方式時(shí)，不能對(duì) exports 進(jìn)行重新賦值，否則就將 module.exports 直接全部覆蓋了

1.2 導(dǎo)入

再來(lái)看一下CommonJS的導(dǎo)入語(yǔ)法

// A.js
const bModule = require('./B.js')
console.log(bModule.count)  // 3
bModule.show()  // show方法被調(diào)用

從上述代碼中可以看到，CommonJS是通過(guò) require 方法來(lái)導(dǎo)入模塊的，其參數(shù)為模塊文件路徑，要特別注意的是，我們導(dǎo)入模塊后接收到的其實(shí)是一個(gè)對(duì)象，也就是 module.exports 的值，我們能從該對(duì)象中獲取到所需的變量或函數(shù)

另外，比較特別的是，require 方法還可以接收一個(gè)表達(dá)式作為參數(shù)，代碼如下

let fileName = 'B.js'
const bModule = require('./' + fileName)

因此，我們是可以動(dòng)態(tài)的改變并決定模塊的加載導(dǎo)入路徑的

2. ES6 Module

如標(biāo)題名寫的，該模塊標(biāo)準(zhǔn)是在ES6時(shí)才被提出的，此后JS才具有了模塊化這一特性

2.1 導(dǎo)出

在ES6 Module 中，導(dǎo)出用到了關(guān)鍵字 export ，導(dǎo)出的方式也大致分為兩種，分別是命名導(dǎo)出、默認(rèn)導(dǎo)出

第一種：命名導(dǎo)出

// B.js
/*--------  單個(gè)變量或函數(shù)導(dǎo)出  ----------*/
export function show() { console.log('show方法被調(diào)用') }
export let count = 3
/*--------  批量導(dǎo)出  ----------*/
function show() { console.log('show方法被調(diào)用') }
let count = 3
export {show, count}

上述代碼分了兩種情況，且這兩種寫法是等價(jià)的

第一種是單個(gè)的變量或函數(shù)導(dǎo)出，只需要直接在開(kāi)頭使用 export 關(guān)鍵字即可；

第二種情況是批量地把多個(gè)變量或函數(shù)導(dǎo)出，只需要把它們儲(chǔ)存到一個(gè)對(duì)象中即可

第二種：默認(rèn)導(dǎo)出

// B.js
function show() { console.log('show方法被調(diào)用') }
// 命名導(dǎo)出變量count
export let count = 3
// 默認(rèn)導(dǎo)出函數(shù)show
export default show

默認(rèn)導(dǎo)出是在 export 關(guān)鍵詞后面再跟上一個(gè) default 表示導(dǎo)出的該變量或函數(shù)是匿名的

注意：一個(gè)模塊只能默認(rèn)導(dǎo)出一次，否則就會(huì)報(bào)錯(cuò)，具體原因會(huì)在后面講解

2.2 導(dǎo)入

ES6 Module 的導(dǎo)入用到的關(guān)鍵字是 import ，具體代碼如下

// A.js
import {show, count} from './B.js'
show()   // show方法被調(diào)用
console.log(count)  // 3

ES6 Module的導(dǎo)入需要用一對(duì) {} 大括號(hào)來(lái)接收我們需要導(dǎo)入的方法或函數(shù)

注意：大括號(hào)中的變量或函數(shù)名必須與導(dǎo)出時(shí)的名稱一模一樣

那么如果我們想修改導(dǎo)入的變量或函數(shù)的名稱，可以通過(guò) as 關(guān)鍵詞來(lái)命名，代碼如下

// A.js
import {show as print, count as number} from './B.js'
print()   // show方法被調(diào)用
console.log(number)  // 3

如果我們要想將所有的變量或函數(shù)都導(dǎo)入，可以通過(guò) * 來(lái)整體導(dǎo)入，代碼如下

import * as bModule from './B.js'
bModule.show()  // show方法被調(diào)用
console.log(bModule.count)  // 3

* 表示全部的意思，我們將其全部導(dǎo)入，并賦值給 bModule，這樣我們就可以通過(guò) bModule 獲取想要的變量或?qū)ο罅?/p>

以上所說(shuō)的都是針對(duì)命名導(dǎo)出的變量或函數(shù)，那么如何導(dǎo)入一個(gè)默認(rèn)導(dǎo)出的變量或函數(shù)呢？

// 將通過(guò) export default 導(dǎo)出的變量導(dǎo)入
import print from './B.js'
print()  // show方法被調(diào)用

命名導(dǎo)出的變量都是通過(guò) {} 來(lái)接收的，那么去掉 {} ，接收的就是默認(rèn)導(dǎo)出的變量了，因?yàn)閷?dǎo)出的變量是匿名的，因此我們可以隨意地起個(gè)變量名用于接收

補(bǔ)充：這里特別提一下，與CommonJS不同，ES6 Module 的導(dǎo)入文件路徑是不支持表達(dá)式的

3. CommonJS 與 ES6 Module 的區(qū)別

這兩者的主要區(qū)別主要有以下兩點(diǎn)：

對(duì)于模塊的依賴，CommonJS是動(dòng)態(tài)的，ES6 Module 是靜態(tài)的
CommonJS導(dǎo)入的是值的拷貝，ES6 Module導(dǎo)入的是值的引用

3.1 區(qū)別一

對(duì)于模塊的依賴，何為動(dòng)態(tài)？何為靜態(tài)？

動(dòng)態(tài)是指對(duì)于模塊的依賴關(guān)系建立在代碼執(zhí)行階段；

靜態(tài)是指對(duì)于模塊的依賴關(guān)系建立在代碼編譯階段；

上文提到，CommonJS導(dǎo)入時(shí)，require 的路徑參數(shù)是支持表達(dá)式的，例如

// A.js
let fileName = 'example.js'
const bModule = require('./' + fileName)

因?yàn)樵撀窂皆诖a執(zhí)行時(shí)是可以動(dòng)態(tài)改變的，所以如果在代碼編譯階段就建立各個(gè)模塊的依賴關(guān)系，那么一定是不準(zhǔn)確的，只有在代碼運(yùn)行了以后，才可以真正確認(rèn)模塊的依賴關(guān)系，因此說(shuō)CommonJS是動(dòng)態(tài)的。

那么現(xiàn)在你也應(yīng)該也知道為什么 ES6 Module 是靜態(tài)的了吧

3.2 區(qū)別二

為了驗(yàn)證這一點(diǎn)，我準(zhǔn)備用實(shí)例來(lái)演示一下

首先來(lái)驗(yàn)證CommonJS，代碼如下

// B.js
let count = 3
function change() {
    count ++    // 變量count + 1
    console.log('原count值為：', count);  // 打印B.js模塊中count的值
}
module.exports = {
    count,
    change
}
// A.js
let count = require('./B.js').count 
let change = require('./B.js').change
console.log('改變前：', count);   
change()     // 調(diào)用模塊B.js中的change方法，將原來(lái)的count + 1
console.log('改變后：', count);

運(yùn)行A.js文件的結(jié)果

改變前：3
原count值為：4
改變后：3

在上述代碼中我們可以看到，在 A.js 文件中導(dǎo)入了 B.js 文件中的變量 count 和函數(shù) change，因?yàn)閷?dǎo)入的 count 只是對(duì)原有值的一個(gè)拷貝，因此盡管我們調(diào)用了函數(shù) change 改變了 B.js 文件中變量 count 的值，也不會(huì)影響到 A.js 文件中的變量 count

根據(jù)這個(gè)結(jié)果得出結(jié)論：CommonJS導(dǎo)入的變量是對(duì)原值的拷貝

接下來(lái)再來(lái)驗(yàn)證一下ES6 Module，代碼如下

// B.js
let count = 3
function change() {
    count ++        // 變量count + 1
    console.log(count);   // 打印B.js模塊中count的值
}
export {count, change}
// A.js
import {count, change} from './B.js';
console.log('改變前：',count);
change()         // 調(diào)用模塊B.js中的change方法，將原來(lái)的count + 1
console.log('改變后：', count);

運(yùn)行A.js文件的結(jié)果