commonjs與es6模組化有什麼差別

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

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

CommonJS

• 對於基本資料類型，屬於複製。即會被模組快取。同時，在另一個模組可以對該模組輸出的變數重新賦值。

• 對於複雜資料類型，屬於淺拷貝。由於兩個模組所引用的物件指向同一個記憶體空間，因此對該模組的值做修改時會影響另一個模組。

• 當使用require指令載入某個模組時，就會執行整個模組的程式碼。

• 當使用require指令載入同一個模組時，不會再執行該模組，而是取到快取之中的值。也就是說，CommonJS模組無論加載多少次，都只會在第一次加載時運行一次，以後再加載，就返回第一次運行的結果，除非手動清除系統緩存。

• 循環載入時，屬於載入時執行。也就是腳本程式碼在require的時候，就會全部執行。一旦出現某個模組被"循環載入"，就只輸出已經執行的部分，還未執行的部分不會輸出。

ES6模組

• #ES6模組中的值屬於【動態只讀參考】。

• 對於唯讀來說，也就是不允許修改引入變數的值，import的變數是唯讀的，不論是基本資料型別還是複雜資料型別。當模組遇到import指令時，就會產生一個只讀引用。等到腳本真正執行時，再根據這個唯讀引用，到被載入的那個模組裡面去取值。

• 對於動態來說，原始值會發生變化，import載入的值也會改變。不論是基本資料型別還是複雜資料型別。

• 循環載入時，ES6模組是動態參考。只要兩個模組之間存在某個引用，程式碼就能夠執行。

ES6模組與CommonJS模組的差異

1.CommonJS 模組是執行時間加載，ES6 模組是編譯時輸出介面。

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

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

4.import的介面是read-only（唯讀狀態），不能修改其變數值。即不能修改其變數的指標指向，但可以改變變數內部指標指向。可以對commonJS對重新賦值（改變指標指向），但是對ES6 Module賦值會編譯報錯。

ES6模組與CommonJS模組的共同點：

1.CommonJS和ES6 Module都可以對引⼊的物件進⾏賦值，也就是對物件內部屬性的值進行改變。

【相關推薦：javascript影片教學、web前端】

以上是commonjs與es6模組化有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！