詳談commonjs模塊與es6模塊的區(qū)別
到目前為止,已經(jīng)實習了3個月的時間了。最近在面試,在面試題里面有題目涉及到模塊循環(huán)加載的知識。趁著這個機會,將commonjs模塊與es6模塊之間一些重要的的區(qū)別做個總結。語法上有什么區(qū)別就不具體說了,主要談談引用的區(qū)別。
commonjs
對于基本數(shù)據(jù)類型,屬于復制。即會被模塊緩存。同時,在另一個模塊可以對該模塊輸出的變量重新賦值。
對于復雜數(shù)據(jù)類型,屬于淺拷貝。由于兩個模塊引用的對象指向同一個內(nèi)存空間,因此對該模塊的值做修改時會影響另一個模塊。
當使用require命令加載某個模塊時,就會運行整個模塊的代碼。
當使用require命令加載同一個模塊時,不會再執(zhí)行該模塊,而是取到緩存之中的值。也就是說,commonjs模塊無論加載多少次,都只會在第一次加載時運行一次,以后再加載,就返回第一次運行的結果,除非手動清除系統(tǒng)緩存。
循環(huán)加載時,屬于加載時執(zhí)行。即腳本代碼在require的時候,就會全部執(zhí)行。一旦出現(xiàn)某個模塊被"循環(huán)加載",就只輸出已經(jīng)執(zhí)行的部分,還未執(zhí)行的部分不會輸出。
ES6模塊
es6模塊中的值屬于【動態(tài)只讀引用】。
對于只讀來說,即不允許修改引入變量的值,import的變量是只讀的,不論是基本數(shù)據(jù)類型還是復雜數(shù)據(jù)類型。當模塊遇到import命令時,就會生成一個只讀引用。等到腳本真正執(zhí)行時,再根據(jù)這個只讀引用,到被加載的那個模塊里面去取值。
對于動態(tài)來說,原始值發(fā)生變化,import加載的值也會發(fā)生變化。不論是基本數(shù)據(jù)類型還是復雜數(shù)據(jù)類型。
循環(huán)加載時,
上面說了一些重要區(qū)別。現(xiàn)在舉一些例子來說明每一點吧
commonjs
對于基本數(shù)據(jù)類型,屬于復制。即會被模塊緩存。同時,在另一個模塊可以對該模塊輸出的變量重新賦值。
// b.js let count = 1 let plusCount = () => { count++ } setTimeout(() => { console.log('b.js-1', count) }, 1000) module.exports = { count, plusCount } // a.js let mod = require('./b.js') console.log('a.js-1', mod.count) mod.plusCount() console.log('a.js-2', mod.count) setTimeout(() => { mod.count = 3 console.log('a.js-3', mod.count) }, 2000) node a.js a.js-1 1 a.js-2 1 b.js-1 2 // 1秒后 a.js-3 3 // 2秒后
以上代碼可以看出,b模塊export的count變量,是一個復制行為。在plusCount方法調(diào)用之后,a模塊中的count不受影響。同時,可以在b模塊中更改a模塊中的值。如果希望能夠同步代碼,可以export出去一個getter。
// 其他代碼相同 module.exports = { get count () { return count }, plusCount } node a.js a.js-1 1 a.js-2 1 b.js-1 2 // 1秒后 a.js-3 2 // 2秒后, 由于沒有定義setter,因此無法對值進行設置。所以還是返回2
對于復雜數(shù)據(jù)類型,屬于淺拷貝。由于兩個模塊引用的對象指向同一個內(nèi)存空間,因此對該模塊的值做修改時會影響另一個模塊。
// b.js let obj = { count: 1 } let plusCount = () => { obj.count++ } setTimeout(() => { console.log('b.js-1', obj.count) }, 1000) setTimeout(() => { console.log('b.js-2', obj.count) }, 3000) module.exports = { obj, plusCount } // a.js var mod = require('./b.js') console.log('a.js-1', mod.obj.count) mod.plusCount() console.log('a.js-2', mod.obj.count) setTimeout(() => { mod.obj.count = 3 console.log('a.js-3', mod.obj.count) }, 2000) node a.js a.js-1 1 a.js-2 2 b.js-1 2 a.js-3 3 b.js-2 3
以上代碼可以看出,對于對象來說屬于淺拷貝。當執(zhí)行a模塊時,首先打印obj.count的值為1,然后通過plusCount方法,再次打印時為2。接著在a模塊修改count的值為3,此時在b模塊的值也為3。
3.當使用require命令加載某個模塊時,就會運行整個模塊的代碼。
4.當使用require命令加載同一個模塊時,不會再執(zhí)行該模塊,而是取到緩存之中的值。也就是說,commonjs模塊無論加載多少次,都只會在第一次加載時運行一次,以后再加載,就返回第一次運行的結果,除非手動清除系統(tǒng)緩存。
5.循環(huán)加載時,屬于加載時執(zhí)行。即腳本代碼在require的時候,就會全部執(zhí)行。一旦出現(xiàn)某個模塊被"循環(huán)加載",就只輸出已經(jīng)執(zhí)行的部分,還未執(zhí)行的部分不會輸出。
3, 4, 5可以使用同一個例子說明 // b.js exports.done = false let a = require('./a.js') console.log('b.js-1', a.done) exports.done = true console.log('b.js-2', '執(zhí)行完畢') // a.js exports.done = false let b = require('./b.js') console.log('a.js-1', b.done) exports.done = true console.log('a.js-2', '執(zhí)行完畢') // c.js let a = require('./a.js') let b = require('./b.js') console.log('c.js-1', '執(zhí)行完畢', a.done, b.done) node c.js b.js-1 false b.js-2 執(zhí)行完畢 a.js-1 true a.js-2 執(zhí)行完畢 c.js-1 執(zhí)行完畢 true true
仔細說明一下整個過程。
在Node.js中執(zhí)行c模塊。此時遇到require關鍵字,執(zhí)行a.js中所有代碼。
在a模塊中exports之后,通過require引入了b模塊,執(zhí)行b模塊的代碼。
在b模塊中exports之后,又require引入了a模塊,此時執(zhí)行a模塊的代碼。
a模塊只執(zhí)行exports.done = false這條語句。
回到b模塊,打印b.js-1, exports, b.js-2。b模塊執(zhí)行完畢。
回到a模塊,接著打印a.js-1, exports, b.js-2。a模塊執(zhí)行完畢
回到c模塊,接著執(zhí)行require,需要引入b模塊。由于在a模塊中已經(jīng)引入過了,所以直接就可以輸出值了。
結束。
從以上結果和分析過程可以看出,當遇到require命令時,會執(zhí)行對應的模塊代碼。當循環(huán)引用時,有可能只輸出某模塊代碼的一部分。當引用同一個模塊時,不會再次加載,而是獲取緩存。
ES6模塊
es6模塊中的值屬于【動態(tài)只讀引用】。只說明一下復雜數(shù)據(jù)類型。
對于只讀來說,即不允許修改引入變量的值,import的變量是只讀的,不論是基本數(shù)據(jù)類型還是復雜數(shù)據(jù)類型。當模塊遇到import命令時,就會生成一個只讀引用。等到腳本真正執(zhí)行時,再根據(jù)這個只讀引用,到被加載的那個模塊里面去取值。
對于動態(tài)來說,原始值發(fā)生變化,import加載的值也會發(fā)生變化。不論是基本數(shù)據(jù)類型還是復雜數(shù)據(jù)類型。
// b.js export let counter = { count: 1 } setTimeout(() => { console.log('b.js-1', counter.count) }, 1000) // a.js import { counter } from './b.js' counter = {} console.log('a.js-1', counter) // Syntax Error: "counter" is read-only
雖然不能將counter重新賦值一個新的對象,但是可以給對象添加屬性和方法。此時不會報錯。這種行為類型與關鍵字const的用法。
// a.js import { counter } from './b.js' counter.count++ console.log(counter) // 2
循環(huán)加載時,ES6模塊是動態(tài)引用。只要兩個模塊之間存在某個引用,代碼就能夠執(zhí)行。
// b.js import {foo} from './a.js'; export function bar() { console.log('bar'); if (Math.random() > 0.5) { foo(); } } // a.js import {bar} from './b.js'; export function foo() { console.log('foo'); bar(); console.log('執(zhí)行完畢'); } foo(); node a.js foo bar 執(zhí)行完畢 // 執(zhí)行結果也有可能是 foo bar foo bar 執(zhí)行完畢 執(zhí)行完畢
由于在兩個模塊之間都存在引用。因此能夠正常執(zhí)行。
以上這篇詳談commonjs模塊與es6模塊的區(qū)別就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Javascript實現(xiàn)關聯(lián)數(shù)據(jù)(Linked Data)查詢及注意細節(jié)
DBpedia對Wikipedia的數(shù)據(jù)變成Linked Data形式,使得機器也能讀懂并自由獲得這些數(shù)據(jù);本文的主要目的是利用Javascript從DBpedia中獲取我們想要的數(shù)據(jù),感興趣的朋友可以參考下,希望可以幫助到你2013-02-02詳解JavaScript 中getElementsByName在IE中的注意事項
這篇文章主要介紹了詳解JavaScript 中getElementsByName在IE中的注意事項的相關資料,需要的朋友可以參考下2017-02-02