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

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

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

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

1. CommonJS模塊的加載原理

CommonJS模塊就是一個(gè)腳本文件，require命令第一次加載該腳本時(shí)就會(huì)執(zhí)行整個(gè)腳本，然后在內(nèi)存中生成該模塊的一個(gè)說(shuō)明對(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í)行的部分，沒(méi)有執(zhí)行的部分不會(huì)輸出。

案例說(shuō)明：

案例來(lái)源于Node官方說(shuō)明： https://nodejs.org/api/modules.html#modules_cycles

//a.js
exports.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.js
exports.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.js
var 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沒(méi)執(zhí)行完，從exports屬性只能取回已經(jīng)執(zhí)行的部分，未執(zhí)行的部分不返回，所以取回的值并不是最后的值。

3）a.js已執(zhí)行的代碼只有一行，exports.done = false;所以對(duì)于b.js來(lái)說(shuō)，require a.js只輸出了一個(gè)變量done，值為false。往下執(zhí)行console.log('在b.js中，a.done = %j', a.done);控制臺(tái)打印出：

在b.js中，a.done = false

4）b.js繼續(xù)往下執(zhí)行，done變量設(shè)置為true，console.log('b.js執(zhí)行完畢！')，等到全部執(zhí)行完畢，將執(zhí)行權(quán)交還給a.js。此時(shí)控制臺(tái)輸出：

b.js執(zhí)行完畢！

5）執(zhí)行權(quán)交給a.js后，a.js接著往下執(zhí)行，執(zhí)行console.log('在a.js中，b.done = %j', b.done);控制臺(tái)打印出：

在a.js中，b.done = true

6）a.js繼續(xù)執(zhí)行，變量done設(shè)置為true，直到a.js執(zhí)行完畢。

a.js執(zhí)行完畢！

7）main.js中第二行不會(huì)再次執(zhí)行b.js，直接輸出緩存結(jié)果。最后控制臺(tái)輸出：

在main.js中，a.done = true, b.done = true

總結(jié)：

1）在b.js中，a.js沒(méi)有執(zhí)行完畢，只執(zhí)行了第一行，所以循環(huán)加載中，只輸出已執(zhí)行的部分。

2）main.js第二行不會(huì)再次執(zhí)行，而是輸出緩存b.js的執(zhí)行結(jié)果。exports.done = true;

2. ES6模塊的循環(huán)加載

ES6模塊與CommonJS有本質(zhì)區(qū)別，ES6模塊是動(dòng)態(tài)引用，遇到模塊加載命令import時(shí)不會(huì)去執(zhí)行模塊，只是生成一個(gè)指向被加載模塊的引用，需要開(kāi)發(fā)者保證真正取值時(shí)能夠取到值，只要引用是存在的，代碼就能執(zhí)行。

案例說(shuō)明：

//even.js
import {odd} from './odd';

var counter = 0;
export function even(n){
  counter ++;
  console.log(counter);
  
  return n == 0 || odd(n-1);
}

//odd.js
import {even} from './even.js';

export function odd(n){
  return n != 0 && even(n-1);
}

//index.js
import * as m from './even.js';

var x = m.even(5);
console.log(x);

var y = m.even(4);
console.log(y);

執(zhí)行index.js，輸出結(jié)果如下：

babel-node index.js

1
2
3
false
4
5
6
true

可以看出counter的值是累加的，ES6是動(dòng)態(tài)引用。如果上面的引用改為CommonJS代碼，會(huì)報(bào)錯(cuò)，因?yàn)樵趏dd.js里，even.js代碼并沒(méi)有執(zhí)行。

//改用CommonJS規(guī)范加載文件，執(zhí)行會(huì)報(bào)錯(cuò)
var x = m.even(5);
     ^

TypeError: m.even is not a function
  at Object.<anonymous> (/Users/zourong/Projects/node/ES6/mainx.1.js:3:11)
  at Module._compile (internal/modules/cjs/loader.js:689:30)

3. 總結(jié)

1）CommonJS模塊是加載時(shí)執(zhí)行。一旦出現(xiàn)某個(gè)模塊被“循環(huán)加載”，就只輸出已經(jīng)執(zhí)行的部分，沒(méi)有執(zhí)行的部分不會(huì)輸出。

2）ES6模塊是動(dòng)態(tài)引用，遇到模塊加載命令import時(shí)不會(huì)去執(zhí)行模塊，只是生成一個(gè)指向被加載模塊的引用。

CommonJS模塊規(guī)范主要適用于后端Node.js，后端Node.js是同步模塊加載，所以在模塊循環(huán)引入時(shí)模塊已經(jīng)執(zhí)行完畢。推薦前端工程中使用ES6的模塊規(guī)范，通過(guò)安裝Babel轉(zhuǎn)碼插件支持ES6模塊引入的語(yǔ)法。

頁(yè)面內(nèi)容主要來(lái)源于《ES6標(biāo)準(zhǔn)入門(mén)》Module 這一章的介紹。如果有描述不清楚或錯(cuò)誤的地方，歡迎留言指證。

參考資料：

《ES6標(biāo)準(zhǔn)入門(mén)》之Module

Node.js Cycle

ES-Module-Loader

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論