前言

學了JS并且用過Node.js后，對模塊化應該是有所了解和使用了，那么一定見過以下兩種模塊導入導出的方式

第一種： 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í)行

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

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

1. CommonJS

CommonJS是2009年由JavaScript社區(qū)提出的包含了模塊化的一個標準，后來被Node.js所采用并實現(xiàn)，也就是說我們在Node.js中用到的模塊導入導出都是依照CommonJS標準來實現(xiàn)的

1.1 導出

我們可以把一個文件看成一個模塊，每個模塊之間是互相獨立的，即不會互相影響。當需要使用到某個模塊時，只需在文件中將目標模塊導入即可

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

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

上述代碼中，兩種導出方式是等價的。

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

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

注意： 這里要特別強調的是，在使用第二種導出方式時，不能對 exports 進行重新賦值，否則就將 module.exports 直接全部覆蓋了

1.2 導入

再來看一下CommonJS的導入語法

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

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

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

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

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

2. ES6 Module

如標題名寫的，該模塊標準是在ES6時才被提出的，此后JS才具有了模塊化這一特性

2.1 導出

在ES6 Module 中，導出用到了關鍵字 export ，導出的方式也大致分為兩種，分別是命名導出 、默認導出

第一種： 命名導出

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

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

第一種是單個的變量或函數(shù)導出，只需要直接在開頭使用 export 關鍵字即可；

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

第二種： 默認導出

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

默認導出是在 export 關鍵詞后面再跟上一個 default 表示導出的該變量或函數(shù)是匿名的

注意： 一個模塊只能默認導出一次，否則就會報錯，具體原因會在后面講解

2.2 導入

ES6 Module 的導入用到的關鍵字是 import ，具體代碼如下

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

ES6 Module的導入需要用一對 {} 大括號來接收我們需要導入的方法或函數(shù)

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

那么如果我們想修改導入的變量或函數(shù)的名稱，可以通過 as 關鍵詞來命名，代碼如下

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

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

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

* 表示全部的意思，我們將其全部導入，并賦值給 bModule，這樣我們就可以通過 bModule 獲取想要的變量或對象了

以上所說的都是針對命名導出的變量或函數(shù)，那么如何導入一個默認導出的變量或函數(shù)呢？

// 將通過 export default 導出的變量導入
import print from './B.js'
print()  // show方法被調用

命名導出的變量都是通過 {} 來接收的，那么去掉 {} ，接收的就是默認導出的變量了，因為導出的變量是匿名的，因此我們可以隨意地起個變量名用于接收

補充： 這里特別提一下，與CommonJS不同，ES6 Module 的導入文件路徑是不支持表達式的

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

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

• 對于模塊的依賴，CommonJS是動態(tài)的，ES6 Module 是靜態(tài)的
• CommonJS導入的是值的拷貝，ES6 Module導入的是值的引用

3.1 區(qū)別一

對于模塊的依賴，何為動態(tài)？何為靜態(tài)？

動態(tài)是指對于模塊的依賴關系建立在代碼執(zhí)行階段；

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

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

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

因為該路徑在代碼執(zhí)行時是可以動態(tài)改變的，所以如果在代碼編譯階段就建立各個模塊的依賴關系，那么一定是不準確的，只有在代碼運行了以后，才可以真正確認模塊的依賴關系，因此說CommonJS是動態(tài)的。

那么現(xiàn)在你也應該也知道為什么 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()     // 調用模塊B.js中的change方法，將原來的count + 1
console.log('改變后：', count); 

運行A.js文件的結果

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

在上述代碼中我們可以看到，在 A.js 文件中導入了 B.js 文件中的變量 count 和 函數(shù) change，因為導入的 count 只是對原有值的一個拷貝，因此盡管我們調用了函數(shù) change 改變了 B.js 文件中變量 count 的值，也不會影響到 A.js 文件中的變量 count

根據(jù)這個結果得出結論：CommonJS導入的變量是對原值的拷貝

接下來再來驗證一下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()         // 調用模塊B.js中的change方法，將原來的count + 1
console.log('改變后：', count);

運行A.js文件的結果

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

相比較于CommonJS的結果，ES6 Module導入的變量 count 隨著原值的改變而改變了

根據(jù)這個結果得出結論：ES6 Module導入的變量是對原值的引用

4. The end

本篇文章就到此結束啦，關于CommonJS和ES6 Module，還有一些本文未提及的知識，還是希望大家深入了解，更多關于CommonJS與ES6 Module區(qū)別的資料請關注腳本之家其它相關文章！

最新評論