commonjs與es6模塊化有哪些區(qū)別

這篇文章主要為大家展示了“commonjs與es6模塊化有哪些區(qū)別”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“commonjs與es6模塊化有哪些區(qū)別”這篇文章吧。

區(qū)別：1、CommonJS模塊是運(yùn)行時(shí)加載，而ES6模塊是編譯時(shí)輸出接口；2、CommonJS模塊的require()是同步加載模塊，而ES6模塊的import命令是異步加載；3、CommonJS是對模塊的淺拷貝，ES6是對模塊的引入。

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

CommonJS

• 對于基本數(shù)據(jù)類型，屬于復(fù)制。即會(huì)被模塊緩存。同時(shí)，在另一個(gè)模塊可以對該模塊輸出的變量重新賦值。

• 對于復(fù)雜數(shù)據(jù)類型，屬于淺拷貝。由于兩個(gè)模塊引用的對象指向同一個(gè)內(nèi)存空間，因此對該模塊的值做修改時(shí)會(huì)影響另一個(gè)模塊。

• 當(dāng)使用require命令加載某個(gè)模塊時(shí)，就會(huì)運(yùn)行整個(gè)模塊的代碼。

• 當(dāng)使用require命令加載同一個(gè)模塊時(shí)，不會(huì)再執(zhí)行該模塊，而是取到緩存之中的值。也就是說，CommonJS模塊無論加載多少次，都只會(huì)在第一次加載時(shí)運(yùn)行一次，以后再加載，就返回第一次運(yùn)行的結(jié)果，除非手動(dòng)清除系統(tǒng)緩存。

• 循環(huán)加載時(shí)，屬于加載時(shí)執(zhí)行。即腳本代碼在require的時(shí)候，就會(huì)全部執(zhí)行。一旦出現(xiàn)某個(gè)模塊被"循環(huán)加載"，就只輸出已經(jīng)執(zhí)行的部分，還未執(zhí)行的部分不會(huì)輸出。

ES6模塊

• ES6模塊中的值屬于【動(dòng)態(tài)只讀引用】。

• 對于只讀來說，即不允許修改引入變量的值，import的變量是只讀的，不論是基本數(shù)據(jù)類型還是復(fù)雜數(shù)據(jù)類型。當(dāng)模塊遇到import命令時(shí)，就會(huì)生成一個(gè)只讀引用。等到腳本真正執(zhí)行時(shí)，再根據(jù)這個(gè)只讀引用，到被加載的那個(gè)模塊里面去取值。

• 對于動(dòng)態(tài)來說，原始值發(fā)生變化，import加載的值也會(huì)發(fā)生變化。不論是基本數(shù)據(jù)類型還是復(fù)雜數(shù)據(jù)類型。

• 循環(huán)加載時(shí)，ES6模塊是動(dòng)態(tài)引用。只要兩個(gè)模塊之間存在某個(gè)引用，代碼就能夠執(zhí)行。

ES6模塊與CommonJS模塊的區(qū)別

1.CommonJS 模塊是運(yùn)行時(shí)加載，ES6 模塊是編譯時(shí)輸出接口。

2.CommonJS 模塊的require()是同步加載模塊，ES6 模塊的import命令是異步加載，有一個(gè)獨(dú)立的模塊依賴的解析階段。

3.CommonJS是對模塊的淺拷貝，ES6 Module是對模塊的引入，即ES6 Module只存只讀，不能改變其值，具體點(diǎn)就是指針指向不能變，類似const 。

4.import的接口是read-only（只讀狀態(tài)），不能修改其變量值。 即不能修改其變量的指針指向，但可以改變變量內(nèi)部指針指向?？梢詫ommonJS對重新賦值（改變指針指向），但是對ES6 Module賦值會(huì)編譯報(bào)錯(cuò)。

ES6模塊與CommonJS模塊的共同點(diǎn)：

1.CommonJS和ES6 Module都可以對引?的對象進(jìn)?賦值，即對對象內(nèi)部屬性的值進(jìn)行改變。

以上是“commonjs與es6模塊化有哪些區(qū)別”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！