CommonJS模塊規(guī)范使用require語句導(dǎo)入模塊，module.exports導(dǎo)出模塊，輸出的是值的拷貝，模塊導(dǎo)入的也是輸出值的拷貝，也就是說，一旦輸出這個(gè)值，這個(gè)值在模塊內(nèi)部的變化是監(jiān)聽不到的。

ES6模塊的規(guī)范是使用import語句導(dǎo)入模塊，export語句導(dǎo)出模塊，輸出的是對(duì)值的引用。ES6模塊的運(yùn)行機(jī)制和CommonJS不一樣，遇到模塊加載命令import時(shí)不去執(zhí)行這個(gè)模塊，只會(huì)生成一個(gè)動(dòng)態(tài)的只讀引用，等真的需要用到這個(gè)值時(shí)，再到模塊中取值，也就是說原始值變了，那輸入值也會(huì)發(fā)生變化。

那CommonJS和ES6模塊規(guī)范針對(duì)模塊的循環(huán)加載處理機(jī)制有什么不同呢？

循環(huán)加載指的是a腳本的執(zhí)行依賴b腳本，b腳本的執(zhí)行依賴a腳本。

1. CommonJS模塊的加載原理

CommonJS模塊就是一個(gè)腳本文件，require命令第一次加載該腳本時(shí)就會(huì)執(zhí)行整個(gè)腳本，然后在內(nèi)存中生成該模塊的一個(gè)說明對(duì)象。

{  id: '', //模塊名，唯一  exports: { //模塊輸出的各個(gè)接口    ...  },  loaded: true, //模塊的腳本是否執(zhí)行完畢  ...}

以后用到這個(gè)模塊時(shí)，就會(huì)到對(duì)象的exports屬性中取值。即使再次執(zhí)行require命令，也不會(huì)再次執(zhí)行該模塊，而是到緩存中取值。

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

案例說明：

案例來源于Node官方說明： https://nodejs.org/api/modules.html#modules_cycles

//a.jsexports.done = false;var b = require('./b.js');console.log('在a.js中，b.done = %j', b.done);exports.done = true;console.log('a.js執(zhí)行完畢！')

//b.jsexports.done = false;var a = require('./a.js');console.log('在b.js中，a.done = %j', a.done);exports.done = true;console.log('b.js執(zhí)行完畢！')

//main.jsvar a = require('./a.js');var b = require('./b.js');console.log('在main.js中，a.done = %j, b.done = %j', a.done, b.done);

輸出結(jié)果如下：

//node環(huán)境下運(yùn)行main.js
node main.js

在b.js中，a.done = false
b.js執(zhí)行完畢！
在a.js中，b.done = true
a.js執(zhí)行完畢！
在main.js中，a.done = true, b.done = true

JS代碼執(zhí)行順序如下：
1）main.js中先加載a.js，a腳本先輸出done變量，值為false，然后加載b腳本，a的代碼停止執(zhí)行，等待b腳本執(zhí)行完成后，才會(huì)繼續(xù)往下執(zhí)行。

2）b.js執(zhí)行到第二行會(huì)去加載a.js，這時(shí)發(fā)生循環(huán)加載，系統(tǒng)會(huì)去a.js模塊對(duì)應(yīng)對(duì)象的exports屬性取值，因?yàn)閍.js沒執(zhí)行完，從exports屬性只能取回已經(jīng)執(zhí)行的部分，未執(zhí)行的部分不返回，所以取回的值并不是最后的值。