您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“CommonJS與ES6 Module怎么使用”的有關(guān)知識,在實(shí)際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
學(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ū)別
CommonJS是2009年由JavaScript社區(qū)提出的包含了模塊化的一個標(biāo)準(zhǔn),后來被Node.js所采用并實(shí)現(xiàn),也就是說我們在Node.js中用到的模塊導(dǎo)入導(dǎo)出都是依照CommonJS標(biāo)準(zhǔn)來實(shí)現(xiàn)的
我們可以把一個文件看成一個模塊,每個模塊之間是互相獨(dú)立的,即不會互相影響。當(dāng)需要使用到某個模塊時,只需在文件中將目標(biā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)部其實(shí)是指向了 module.exports
,所以當(dāng)我們執(zhí)行 exports.變量 或 exports.函數(shù) 時,其實(shí)就相當(dāng)于把變量或函數(shù)存儲到 module.exports
中
注意: 這里要特別強(qiáng)調(diào)的是,在使用第二種導(dǎo)出方式時,不能對 exports
進(jìn)行重新賦值,否則就將 module.exports
直接全部覆蓋了
再來看一下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)入模塊后接收到的其實(shí)是一個對象,也就是 module.exports
的值,我們能從該對象中獲取到所需的變量或函數(shù)
另外,比較特別的是,require
方法還可以接收一個表達(dá)式作為參數(shù),代碼如下
let fileName = 'B.js' const bModule = require('./' + fileName)
因此,我們是可以動態(tài)的改變并決定模塊的加載導(dǎo)入路徑的
如標(biāo)題名寫的,該模塊標(biāo)準(zhǔn)是在ES6時才被提出的,此后JS才具有了模塊化這一特性
在ES6 Module 中,導(dǎo)出用到了關(guān)鍵字 export
,導(dǎo)出的方式也大致分為兩種,分別是命名導(dǎo)出 、默認(rèn)導(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)出,只需要把它們儲存到一個對象中即可
第二種: 默認(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)鍵詞后面再跟上一個 default
表示導(dǎo)出的該變量或函數(shù)是匿名的
注意: 一個模塊只能默認(rèn)導(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)入一個默認(rèn)導(dǎo)出的變量或函數(shù)呢?
// 將通過 export default 導(dǎo)出的變量導(dǎo)入 import print from './B.js' print() // show方法被調(diào)用
命名導(dǎo)出的變量都是通過 {} 來接收的,那么去掉 {} ,接收的就是默認(rèn)導(dǎo)出的變量了,因?yàn)閷?dǎo)出的變量是匿名的,因此我們可以隨意地起個變量名用于接收
補(bǔ)充: 這里特別提一下,與CommonJS不同,ES6 Module 的導(dǎo)入文件路徑是不支持表達(dá)式的
這兩者的主要區(qū)別主要有以下兩點(diǎn):
對于模塊的依賴,CommonJS是動態(tài)的,ES6 Module 是靜態(tài)的
CommonJS導(dǎo)入的是值的拷貝,ES6 Module導(dǎo)入的是值的引用
對于模塊的依賴,何為動態(tài)?何為靜態(tài)?
動態(tài)是指對于模塊的依賴關(guān)系建立在代碼執(zhí)行階段;
靜態(tài)是指對于模塊的依賴關(guān)系建立在代碼編譯階段;
上文提到,CommonJS導(dǎo)入時,require
的路徑參數(shù)是支持表達(dá)式的,例如
// A.js let fileName = 'example.js' const bModule = require('./' + fileName)
因?yàn)樵撀窂皆诖a執(zhí)行時是可以動態(tài)改變的,所以如果在代碼編譯階段就建立各個模塊的依賴關(guān)系,那么一定是不準(zhǔn)確的,只有在代碼運(yùn)行了以后,才可以真正確認(rèn)模塊的依賴關(guān)系,因此說CommonJS是動態(tài)的。
那么現(xiàn)在你也應(yīng)該也知道為什么 ES6 Module 是靜態(tài)的了吧
為了驗(yàn)證這一點(diǎn),我準(zhǔn)備用實(shí)例來演示一下
首先來驗(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方法,將原來的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
只是對原有值的一個拷貝,因此盡管我們調(diào)用了函數(shù) change
改變了 B.js
文件中變量 count
的值,也不會影響到 A.js
文件中的變量 count
根據(jù)這個結(jié)果得出結(jié)論:CommonJS導(dǎo)入的變量是對原值的拷貝
接下來再來驗(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方法,將原來的count + 1 console.log('改變后:', count);
運(yùn)行A.js文件的結(jié)果
改變前:3
原count值為:4
改變后:4
相比較于CommonJS的結(jié)果,ES6 Module導(dǎo)入的變量 count
隨著原值的改變而改變了
根據(jù)這個結(jié)果得出結(jié)論:ES6 Module導(dǎo)入的變量是對原值的引用
“CommonJS與ES6 Module怎么使用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。