聊聊CommonJS與ES6 Module的使用與區(qū)別
學(xué)了JS并且用過Node.js后，對模塊化應(yīng)該是有所了解和使用了，那么一定見過以下兩種模塊導(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
本文就來聊聊這兩者之間的具體使用與區(qū)別
1. CommonJS
CommonJS是2009年由JavaScript社區(qū)提出的包含了模塊化的一個標準，后來被Node.js所采用并實現(xiàn)，也就是說我們在Node.js中用到的模塊導(dǎo)入導(dǎo)出都是依照CommonJS標準來實現(xiàn)的
1.1 導(dǎo)出
我們可以把一個文件看成一個模塊，每個模塊之間是互相獨立的，即不會互相影響。當需要使用到某個模塊時，只需在文件中將目標模塊導(dǎo)入即可
要想被其它模塊導(dǎo)入首先需要導(dǎo)出需要向外暴露的變量或方法，在CommonJS中導(dǎo)出的語法有以下兩種方式
//?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)出方式是等價的。
第一種導(dǎo)出方式是將需要導(dǎo)出的函數(shù)或變量存儲到 module.exports 里面，其中 module.exports 原本是一個空對象
第二種導(dǎo)出方式中，exports 在內(nèi)部其實是指向了 module.exports，所以當我們執(zhí)行 exports.變量 或 exports.函數(shù) 時，其實就相當于把變量或函數(shù)存儲到 module.exports 中
注意： 這里要特別強調(diào)的是，在使用第二種導(dǎo)出方式時，不能對
exports進行重新賦值，否則就將module.exports直接全部覆蓋了
1.2 導(dǎo)入
再來看一下CommonJS的導(dǎo)入語法
//?A.js
const?bModule?=?require('./B.js')
console.log(bModule.count)??//?3
bModule.show()??//?show方法被調(diào)用
從上述代碼中可以看到，CommonJS是通過 require 方法來導(dǎo)入模塊的，其參數(shù)為模塊文件路徑，要特別注意的是，我們導(dǎo)入模塊后接收到的其實是一個對象，也就是 module.exports 的值，我們能從該對象中獲取到所需的變量或函數(shù)
另外，比較特別的是，require 方法還可以接收一個表達式作為參數(shù)，代碼如下
let?fileName?=?'B.js'
const?bModule?=?require('./'?+?fileName)
因此，我們是可以動態(tài)的改變并決定模塊的加載導(dǎo)入路徑的
2. ES6 Module
如標題名寫的，該模塊標準是在ES6時才被提出的，此后JS才具有了模塊化這一特性
2.1 導(dǎo)出
在ES6 Module 中，導(dǎo)出用到了關(guān)鍵字 export ，導(dǎo)出的方式也大致分為兩種，分別是命名導(dǎo)出 、默認導(dǎo)出
第一種： 命名導(dǎo)出
//?B.js
/*--------??單個變量或函數(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}
上述代碼分了兩種情況，且這兩種寫法是等價的
第一種是單個的變量或函數(shù)導(dǎo)出，只需要直接在開頭使用 export 關(guān)鍵字即可；
第二種情況是批量地把多個變量或函數(shù)導(dǎo)出，只需要把它們儲存到一個對象中即可
第二種： 默認導(dǎo)出
//?B.js
function?show()?{?console.log('show方法被調(diào)用')?}
//?命名導(dǎo)出變量count
export?let?count?=?3
//?默認導(dǎo)出函數(shù)show
export?default?show
默認導(dǎo)出是在 export 關(guān)鍵詞后面再跟上一個 default 表示導(dǎo)出的該變量或函數(shù)是匿名的
注意： 一個模塊只能默認導(dǎo)出一次，否則就會報錯，具體原因會在后面講解
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)入需要用一對 {} 大括號來接收我們需要導(dǎo)入的方法或函數(shù)
注意： 大括號中的變量或函數(shù)名必須與導(dǎo)出時的名稱一模一樣
那么如果我們想修改導(dǎo)入的變量或函數(shù)的名稱，可以通過 as 關(guān)鍵詞來命名，代碼如下
//?A.js
import?{show?as?print,?count?as?number}?from?'./B.js'
print()???//?show方法被調(diào)用
console.log(number)??//?3
如果我們要想將所有的變量或函數(shù)都導(dǎo)入，可以通過 * 來整體導(dǎo)入，代碼如下
import?*?as?bModule?from?'./B.js'
bModule.show()??//?show方法被調(diào)用
console.log(bModule.count)??//?3
* 表示全部的意思，我們將其全部導(dǎo)入，并賦值給 bModule，這樣我們就可以通過 bModule 獲取想要的變量或?qū)ο罅?/p>
以上所說的都是針對命名導(dǎo)出的變量或函數(shù)，那么如何導(dǎo)入一個默認導(dǎo)出的變量或函數(shù)呢？
//?將通過?export?default?導(dǎo)出的變量導(dǎo)入
import?print?from?'./B.js'
print()??//?show方法被調(diào)用
命名導(dǎo)出的變量都是通過 {} 來接收的，那么去掉 {} ，接收的就是默認導(dǎo)出的變量了，因為導(dǎo)出的變量是匿名的，因此我們可以隨意地起個變量名用于接收
補充： 這里特別提一下，與CommonJS不同，ES6 Module 的導(dǎo)入文件路徑是不支持表達式的
3. CommonJS 與 ES6 Module 的區(qū)別
這兩者的主要區(qū)別主要有以下兩點：
對于模塊的依賴，CommonJS是動態(tài)的，ES6 Module 是靜態(tài)的 CommonJS導(dǎo)入的是值的拷貝，ES6 Module導(dǎo)入的是值的引用
3.1 區(qū)別一
對于模塊的依賴，何為動態(tài)？何為靜態(tài)？
動態(tài)是指對于模塊的依賴關(guān)系建立在代碼執(zhí)行階段；靜態(tài)是指對于模塊的依賴關(guān)系建立在代碼編譯階段；
上文提到，CommonJS導(dǎo)入時，require 的路徑參數(shù)是支持表達式的，例如
//?A.js
let?fileName?=?'example.js'
const?bModule?=?require('./'?+?fileName)
因為該路徑在代碼執(zhí)行時是可以動態(tài)改變的，所以如果在代碼編譯階段就建立各個模塊的依賴關(guān)系，那么一定是不準確的，只有在代碼運行了以后，才可以真正確認模塊的依賴關(guān)系，因此說CommonJS是動態(tài)的。
那么現(xiàn)在你也應(yīng)該也知道為什么 ES6 Module 是靜態(tài)的了吧
3.2 區(qū)別二
為了驗證這一點，我準備用實例來演示一下
首先來驗證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方法，將原來的count?+?1
console.log('改變后：',?count);?
//?運行A.js文件的結(jié)果
改變前：3
原count值為：4
改變后：3
在上述代碼中我們可以看到，在 A.js 文件中導(dǎo)入了 B.js 文件中的變量 count 和 函數(shù) change，因為導(dǎo)入的 count 只是對原有值的一個拷貝，因此盡管我們調(diào)用了函數(shù) change 改變了 B.js 文件中變量 count 的值，也不會影響到 A.js 文件中的變量 count
根據(jù)這個結(jié)果得出結(jié)論：CommonJS導(dǎo)入的變量是對原值的拷貝
接下來再來驗證一下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方法，將原來的count?+?1
console.log('改變后：',?count);
//?運行A.js文件的結(jié)果
改變前：3
原count值為：4
改變后：4
相比較于CommonJS的結(jié)果，ES6 Module導(dǎo)入的變量 count 隨著原值的改變而改變了
根據(jù)這個結(jié)果得出結(jié)論：ES6 Module導(dǎo)入的變量是對原值的引用