ECMAScript 6 Module

1. 嚴(yán)格模式
2. export命令
3. import命令
4. 模塊的整體加載
5. export default命令
6. 模塊的繼承
7. ES6模塊加載的實(shí)質(zhì)
8. 循環(huán)加載
9. 跨模塊常量
10. ES6模塊的轉(zhuǎn)碼

ES6的Class只是面向?qū)ο缶幊痰恼Z(yǔ)法糖，升級(jí)了ES5的構(gòu)造函數(shù)的原型鏈繼承的寫法，并沒(méi)有解決模塊化問(wèn)題。Module功能就是為了解決這個(gè)問(wèn)題而提出的。

歷史上，JavaScript一直沒(méi)有模塊（module）體系，無(wú)法將一個(gè)大程序拆分成互相依賴的小文件，再用簡(jiǎn)單的方法拼裝起來(lái)。其他語(yǔ)言都有這項(xiàng)功能，比如Ruby的require、Python的import，甚至就連CSS都有@import，但是JavaScript任何這方面的支持都沒(méi)有，這對(duì)開(kāi)發(fā)大型的、復(fù)雜的項(xiàng)目形成了巨大障礙。

在ES6之前，社區(qū)制定了一些模塊加載方案，最主要的有CommonJS和AMD兩種。前者用于服務(wù)器，后者用于瀏覽器。ES6在語(yǔ)言規(guī)格的層面上，實(shí)現(xiàn)了模塊功能，而且實(shí)現(xiàn)得相當(dāng)簡(jiǎn)單，完全可以取代現(xiàn)有的CommonJS和AMD規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案。

ES6模塊的設(shè)計(jì)思想，是盡量的靜態(tài)化，使得編譯時(shí)就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量。CommonJS和AMD模塊，都只能在運(yùn)行時(shí)確定這些東西。比如，CommonJS模塊就是對(duì)象，輸入時(shí)必須查找對(duì)象屬性。

// CommonJS模塊
let { stat, exists, readFile } = require('fs');

// 等同于
let _fs = require('fs');
let stat = _fs.stat, exists = _fs.exists, readfile = _fs.readfile;

上面代碼的實(shí)質(zhì)是整體加載fs模塊（即加載fs的所有方法），生成一個(gè)對(duì)象（_fs），然后再?gòu)倪@個(gè)對(duì)象上面讀取3個(gè)方法。這種加載稱為“運(yùn)行時(shí)加載”，因?yàn)橹挥羞\(yùn)行時(shí)才能得到這個(gè)對(duì)象，導(dǎo)致完全沒(méi)辦法在編譯時(shí)做“靜態(tài)優(yōu)化”。

ES6模塊不是對(duì)象，而是通過(guò)export命令顯式指定輸出的代碼，輸入時(shí)也采用靜態(tài)命令的形式。

// ES6模塊
import { stat, exists, readFile } from 'fs';

上面代碼的實(shí)質(zhì)是從fs模塊加載3個(gè)方法，其他方法不加載。這種加載稱為“編譯時(shí)加載”，即ES6可以在編譯時(shí)就完成模塊加載，效率要比CommonJS模塊的加載方式高。當(dāng)然，這也導(dǎo)致了沒(méi)法引用ES6模塊本身，因?yàn)樗皇菍?duì)象。

由于ES6模塊是編譯時(shí)加載，使得靜態(tài)分析成為可能。有了它，就能進(jìn)一步拓寬JavaScript的語(yǔ)法，比如引入宏（macro）和類型檢驗(yàn)（type system）這些只能靠靜態(tài)分析實(shí)現(xiàn)的功能。

除了靜態(tài)加載帶來(lái)的各種好處，ES6模塊還有以下好處。

• 不再需要UMD模塊格式了，將來(lái)服務(wù)器和瀏覽器都會(huì)支持ES6模塊格式。目前，通過(guò)各種工具庫(kù)，其實(shí)已經(jīng)做到了這一點(diǎn)。
• 將來(lái)瀏覽器的新API就能用模塊格式提供，不再必要做成全局變量或者navigator對(duì)象的屬性。
• 不再需要對(duì)象作為命名空間（比如Math對(duì)象），未來(lái)這些功能可以通過(guò)模塊提供。

瀏覽器使用ES6模塊的語(yǔ)法如下。

<script type="module" src="foo.js"></script>

上面代碼在網(wǎng)頁(yè)中插入一個(gè)模塊foo.js，由于type屬性設(shè)為module，所以瀏覽器知道這是一個(gè)ES6模塊。

Node的默認(rèn)模塊格式是CommonJS，目前還沒(méi)決定怎么支持ES6模塊。所以，只能通過(guò)Babel這樣的轉(zhuǎn)碼器，在Node里面使用ES6模塊。

嚴(yán)格模式

ES6的模塊自動(dòng)采用嚴(yán)格模式，不管你有沒(méi)有在模塊頭部加上"use strict";。

嚴(yán)格模式主要有以下限制。

• 變量必須聲明后再使用
• 函數(shù)的參數(shù)不能有同名屬性，否則報(bào)錯(cuò)
• 不能使用with語(yǔ)句
• 不能對(duì)只讀屬性賦值，否則報(bào)錯(cuò)
• 不能使用前綴0表示八進(jìn)制數(shù)，否則報(bào)錯(cuò)
• 不能刪除不可刪除的屬性，否則報(bào)錯(cuò)
• 不能刪除變量delete prop，會(huì)報(bào)錯(cuò)，只能刪除屬性delete global[prop]
• eval不會(huì)在它的外層作用域引入變量
• eval和arguments不能被重新賦值
• arguments不會(huì)自動(dòng)反映函數(shù)參數(shù)的變化
• 不能使用arguments.callee
• 不能使用arguments.caller
• 禁止this指向全局對(duì)象
• 不能使用fn.caller和fn.arguments獲取函數(shù)調(diào)用的堆棧
• 增加了保留字（比如protected、static和interface）

上面這些限制，模塊都必須遵守。由于嚴(yán)格模式是ES5引入的，不屬于ES6，所以請(qǐng)參閱相關(guān)ES5書籍，本書不再詳細(xì)介紹了。

export命令

模塊功能主要由兩個(gè)命令構(gòu)成：export和import。export命令用于規(guī)定模塊的對(duì)外接口，import命令用于輸入其他模塊提供的功能。

一個(gè)模塊就是一個(gè)獨(dú)立的文件。該文件內(nèi)部的所有變量，外部無(wú)法獲取。如果你希望外部能夠讀取模塊內(nèi)部的某個(gè)變量，就必須使用export關(guān)鍵字輸出該變量。下面是一個(gè)JS文件，里面使用export命令輸出變量。

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

上面代碼是profile.js文件，保存了用戶信息。ES6將其視為一個(gè)模塊，里面用export命令對(duì)外部輸出了三個(gè)變量。

export的寫法，除了像上面這樣，還有另外一種。

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

上面代碼在export命令后面，使用大括號(hào)指定所要輸出的一組變量。它與前一種寫法（直接放置在var語(yǔ)句前）是等價(jià)的，但是應(yīng)該優(yōu)先考慮使用這種寫法。因?yàn)檫@樣就可以在腳本尾部，一眼看清楚輸出了哪些變量。

export命令除了輸出變量，還可以輸出函數(shù)或類（class）。

export function multiply(x, y) {
  return x * y;
};

上面代碼對(duì)外輸出一個(gè)函數(shù)multiply。

通常情況下，export輸出的變量就是本來(lái)的名字，但是可以使用as關(guān)鍵字重命名。

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

上面代碼使用as關(guān)鍵字，重命名了函數(shù)v1和v2的對(duì)外接口。重命名后，v2可以用不同的名字輸出兩次。

需要特別注意的是，export命令規(guī)定的是對(duì)外的接口，必須與模塊內(nèi)部的變量建立一一對(duì)應(yīng)關(guān)系。

// 報(bào)錯(cuò)
export 1;

// 報(bào)錯(cuò)
var m = 1;
export m;

上面兩種寫法都會(huì)報(bào)錯(cuò)，因?yàn)闆](méi)有提供對(duì)外的接口。第一種寫法直接輸出1，第二種寫法通過(guò)變量m，還是直接輸出1。1只是一個(gè)值，不是接口。正確的寫法是下面這樣。

// 寫法一
export var m = 1;

// 寫法二
var m = 1;
export {m};

// 寫法三
var n = 1;
export {n as m};

上面三種寫法都是正確的，規(guī)定了對(duì)外的接口m。其他腳本可以通過(guò)這個(gè)接口，取到值1。它們的實(shí)質(zhì)是，在接口名與模塊內(nèi)部變量之間，建立了一一對(duì)應(yīng)的關(guān)系。

同樣的，function和class的輸出，也必須遵守這樣的寫法。

// 報(bào)錯(cuò)
function f() {}
export f;

// 正確
export function f() {};

// 正確
function f() {}
export {f};

另外，export語(yǔ)句輸出的接口，與其對(duì)應(yīng)的值是動(dòng)態(tài)綁定關(guān)系，即通過(guò)該接口，可以取到模塊內(nèi)部實(shí)時(shí)的值。

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

上面代碼輸出變量foo，值為bar，500毫秒之后變成baz。

這一點(diǎn)與CommonJS規(guī)范完全不同。CommonJS模塊輸出的是值的緩存，不存在動(dòng)態(tài)更新，詳見(jiàn)下文《ES6模塊加載的實(shí)質(zhì)》一節(jié)。

最后，export命令可以出現(xiàn)在模塊的任何位置，只要處于模塊頂層就可以。如果處于塊級(jí)作用域內(nèi)，就會(huì)報(bào)錯(cuò)，下一節(jié)的import命令也是如此。這是因?yàn)樘幱跅l件代碼塊之中，就沒(méi)法做靜態(tài)優(yōu)化了，違背了ES6模塊的設(shè)計(jì)初衷。

function foo() {
  export default 'bar' // SyntaxError
}
foo()

上面代碼中，export語(yǔ)句放在函數(shù)之中，結(jié)果報(bào)錯(cuò)。

import命令

使用export命令定義了模塊的對(duì)外接口以后，其他JS文件就可以通過(guò)import命令加載這個(gè)模塊（文件）。

// main.js

import {firstName, lastName, year} from './profile';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

上面代碼的import命令，就用于加載profile.js文件，并從中輸入變量。import命令接受一個(gè)對(duì)象（用大括號(hào)表示），里面指定要從其他模塊導(dǎo)入的變量名。大括號(hào)里面的變量名，必須與被導(dǎo)入模塊（profile.js）對(duì)外接口的名稱相同。

如果想為輸入的變量重新取一個(gè)名字，import命令要使用as關(guān)鍵字，將輸入的變量重命名。

import { lastName as surname } from './profile';

注意，import命令具有提升效果，會(huì)提升到整個(gè)模塊的頭部，首先執(zhí)行。

foo();

import { foo } from 'my_module';

上面的代碼不會(huì)報(bào)錯(cuò)，因?yàn)?code>import的執(zhí)行早于foo的調(diào)用。

如果在一個(gè)模塊之中，先輸入后輸出同一個(gè)模塊，import語(yǔ)句可以與export語(yǔ)句寫在一起。

export { es6 as default } from './someModule';

// 等同于
import { es6 } from './someModule';
export default es6;

上面代碼中，export和import語(yǔ)句可以結(jié)合在一起，寫成一行。但是從可讀性考慮，不建議采用這種寫法，而應(yīng)該采用標(biāo)準(zhǔn)寫法。

另外，ES7有一個(gè)提案，簡(jiǎn)化先輸入后輸出的寫法，拿掉輸出時(shí)的大括號(hào)。

// 提案的寫法
export v from 'mod';

// 現(xiàn)行的寫法
export {v} from 'mod';

import語(yǔ)句會(huì)執(zhí)行所加載的模塊，因此可以有下面的寫法。

import 'lodash';

上面代碼僅僅執(zhí)行lodash模塊，但是不輸入任何值。

模塊的整體加載

除了指定加載某個(gè)輸出值，還可以使用整體加載，即用星號(hào)（*）指定一個(gè)對(duì)象，所有輸出值都加載在這個(gè)對(duì)象上面。

下面是一個(gè)circle.js文件，它輸出兩個(gè)方法area和circumference。

// circle.js

export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

現(xiàn)在，加載這個(gè)模塊。

// main.js

import { area, circumference } from './circle';

console.log('圓面積：' + area(4));
console.log('圓周長(zhǎng)：' + circumference(14));

上面寫法是逐一指定要加載的方法，整體加載的寫法如下。

import * as circle from './circle';

console.log('圓面積：' + circle.area(4));
console.log('圓周長(zhǎng)：' + circle.circumference(14));

export default命令

從前面的例子可以看出，使用import命令的時(shí)候，用戶需要知道所要加載的變量名或函數(shù)名，否則無(wú)法加載。但是，用戶肯定希望快速上手，未必愿意閱讀文檔，去了解模塊有哪些屬性和方法。

為了給用戶提供方便，讓他們不用閱讀文檔就能加載模塊，就要用到export default命令，為模塊指定默認(rèn)輸出。

// export-default.js
export default function () {
  console.log('foo');
}

上面代碼是一個(gè)模塊文件export-default.js，它的默認(rèn)輸出是一個(gè)函數(shù)。

其他模塊加載該模塊時(shí)，import命令可以為該匿名函數(shù)指定任意名字。

// import-default.js
import customName from './export-default';
customName(); // 'foo'

上面代碼的import命令，可以用任意名稱指向export-default.js輸出的方法，這時(shí)就不需要知道原模塊輸出的函數(shù)名。需要注意的是，這時(shí)import命令后面，不使用大括號(hào)。

export default命令用在非匿名函數(shù)前，也是可以的。

// export-default.js
export default function foo() {
  console.log('foo');
}

// 或者寫成

function foo() {
  console.log('foo');
}

export default foo;

上面代碼中，foo函數(shù)的函數(shù)名foo，在模塊外部是無(wú)效的。加載的時(shí)候，視同匿名函數(shù)加載。

下面比較一下默認(rèn)輸出和正常輸出。

// 輸出
export default function crc32() {
  // ...
}
// 輸入
import crc32 from 'crc32';

// 輸出
export function crc32() {
  // ...
};
// 輸入
import {crc32} from 'crc32';

上面代碼的兩組寫法，第一組是使用export default時(shí)，對(duì)應(yīng)的import語(yǔ)句不需要使用大括號(hào)；第二組是不使用export default時(shí)，對(duì)應(yīng)的import語(yǔ)句需要使用大括號(hào)。

export default命令用于指定模塊的默認(rèn)輸出。顯然，一個(gè)模塊只能有一個(gè)默認(rèn)輸出，因此export deault命令只能使用一次。所以，import命令后面才不用加大括號(hào)，因?yàn)橹豢赡軐?duì)應(yīng)一個(gè)方法。

本質(zhì)上，export default就是輸出一個(gè)叫做default的變量或方法，然后系統(tǒng)允許你為它取任意名字。所以，下面的寫法是有效的。

// modules.js
function add(x, y) {
  return x * y;
}
export {add as default};
// 等同于
// export default add;

// app.js
import { default as xxx } from 'modules';
// 等同于
// import xxx from 'modules';

正是因?yàn)?code>export default命令其實(shí)只是輸出一個(gè)叫做default的變量，所以它后面不能跟變量聲明語(yǔ)句。

// 正確
export var a = 1;

// 正確
var a = 1;
export default a;

// 錯(cuò)誤
export default var a = 1;

上面代碼中，export default a的含義是將變量a的值賦給變量default。所以，最后一種寫法會(huì)報(bào)錯(cuò)。

有了export default命令，輸入模塊時(shí)就非常直觀了，以輸入jQuery模塊為例。

import $ from 'jquery';

如果想在一條import語(yǔ)句中，同時(shí)輸入默認(rèn)方法和其他變量，可以寫成下面這樣。

import customName, { otherMethod } from './export-default';

如果要輸出默認(rèn)的值，只需將值跟在export default之后即可。

export default 42;

export default也可以用來(lái)輸出類。

// MyClass.js
export default class { ... }

// main.js
import MyClass from 'MyClass';
let o = new MyClass();

模塊的繼承

模塊之間也可以繼承。

假設(shè)有一個(gè)circleplus模塊，繼承了circle模塊。

// circleplus.js

export * from 'circle';
export var e = 2.71828182846;
export default function(x) {
  return Math.exp(x);
}

上面代碼中的export *，表示再輸出circle模塊的所有屬性和方法。注意，export *命令會(huì)忽略circle模塊的default方法。然后，上面代碼又輸出了自定義的e變量和默認(rèn)方法。

這時(shí)，也可以將circle的屬性或方法，改名后再輸出。

// circleplus.js

export { area as circleArea } from 'circle';

上面代碼表示，只輸出circle模塊的area方法，且將其改名為circleArea。

加載上面模塊的寫法如下。

// main.js

import * as math from 'circleplus';
import exp from 'circleplus';
console.log(exp(math.e));

上面代碼中的import exp表示，將circleplus模塊的默認(rèn)方法加載為exp方法。

ES6模塊加載的實(shí)質(zhì)

ES6模塊加載的機(jī)制，與CommonJS模塊完全不同。CommonJS模塊輸出的是一個(gè)值的拷貝，而ES6模塊輸出的是值的引用。

CommonJS模塊輸出的是被輸出值的拷貝，也就是說(shuō)，一旦輸出一個(gè)值，模塊內(nèi)部的變化就影響不到這個(gè)值。請(qǐng)看下面這個(gè)模塊文件lib.js的例子。

// lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  counter: counter,
  incCounter: incCounter,
};

上面代碼輸出內(nèi)部變量counter和改寫這個(gè)變量的內(nèi)部方法incCounter。然后，在main.js里面加載這個(gè)模塊。

// main.js
var mod = require('./lib');

console.log(mod.counter);  // 3
mod.incCounter();
console.log(mod.counter); // 3

上面代碼說(shuō)明，lib.js模塊加載以后，它的內(nèi)部變化就影響不到輸出的mod.counter了。這是因?yàn)?code>mod.counter是一個(gè)原始類型的值，會(huì)被緩存。除非寫成一個(gè)函數(shù)，才能得到內(nèi)部變動(dòng)后的值。

// lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  get counter() {
    return counter
  },
  incCounter: incCounter,
};

上面代碼中，輸出的counter屬性實(shí)際上是一個(gè)取值器函數(shù)?，F(xiàn)在再執(zhí)行main.js，就可以正確讀取內(nèi)部變量counter的變動(dòng)了。

$ node main.js
3
4

ES6模塊的運(yùn)行機(jī)制與CommonJS不一樣，它遇到模塊加載命令import時(shí)，不會(huì)去執(zhí)行模塊，而是只生成一個(gè)動(dòng)態(tài)的只讀引用。等到真的需要用到時(shí)，再到模塊里面去取值，換句話說(shuō)，ES6的輸入有點(diǎn)像Unix系統(tǒng)的“符號(hào)連接”，原始值變了，import輸入的值也會(huì)跟著變。因此，ES6模塊是動(dòng)態(tài)引用，并且不會(huì)緩存值，模塊里面的變量綁定其所在的模塊。

還是舉上面的例子。

// lib.js
export let counter = 3;
export function incCounter() {
  counter++;
}

// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4

上面代碼說(shuō)明，ES6模塊輸入的變量counter是活的，完全反應(yīng)其所在模塊lib.js內(nèi)部的變化。

再舉一個(gè)出現(xiàn)在export一節(jié)中的例子。

// m1.js
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

// m2.js
import {foo} from './m1.js';
console.log(foo);
setTimeout(() => console.log(foo), 500);

上面代碼中，m1.js的變量foo，在剛加載時(shí)等于bar，過(guò)了500毫秒，又變?yōu)榈扔?code>baz。

讓我們看看，m2.js能否正確讀取這個(gè)變化。

$ babel-node m2.js

bar
baz

上面代碼表明，ES6模塊不會(huì)緩存運(yùn)行結(jié)果，而是動(dòng)態(tài)地去被加載的模塊取值，并且變量總是綁定其所在的模塊。

由于ES6輸入的模塊變量，只是一個(gè)“符號(hào)連接”，所以這個(gè)變量是只讀的，對(duì)它進(jìn)行重新賦值會(huì)報(bào)錯(cuò)。

// lib.js
export let obj = {};

// main.js
import { obj } from './lib';

obj.prop = 123; // OK
obj = {}; // TypeError

上面代碼中，main.js從lib.js輸入變量obj，可以對(duì)obj添加屬性，但是重新賦值就會(huì)報(bào)錯(cuò)。因?yàn)樽兞?code>obj指向的地址是只讀的，不能重新賦值，這就好比main.js創(chuàng)造了一個(gè)名為obj的const變量。

最后，export通過(guò)接口，輸出的是同一個(gè)值。不同的腳本加載這個(gè)接口，得到的都是同樣的實(shí)例。

// mod.js
function C() {
  this.sum = 0;
  this.add = function () {
    this.sum += 1;
  };
  this.show = function () {
    console.log(this.sum);
  };
}

export let c = new C();

上面的腳本mod.js，輸出的是一個(gè)C的實(shí)例。不同的腳本加載這個(gè)模塊，得到的都是同一個(gè)實(shí)例。

// x.js
import {c} from './mod';
c.add();

// y.js
import {c} from './mod';
c.show();

// main.js
import './x';
import './y';

現(xiàn)在執(zhí)行main.js，輸出的是1。

$ babel-node main.js
1

這就證明了x.js和y.js加載的都是C的同一個(gè)實(shí)例。

循環(huán)加載

“循環(huán)加載”（circular dependency）指的是，a腳本的執(zhí)行依賴b腳本，而b腳本的執(zhí)行又依賴a腳本。

// a.js
var b = require('b');

// b.js
var a = require('a');

通常，“循環(huán)加載”表示存在強(qiáng)耦合，如果處理不好，還可能導(dǎo)致遞歸加載，使得程序無(wú)法執(zhí)行，因此應(yīng)該避免出現(xiàn)。

但是實(shí)際上，這是很難避免的，尤其是依賴關(guān)系復(fù)雜的大項(xiàng)目，很容易出現(xiàn)a依賴b，b依賴c，c又依賴a這樣的情況。這意味著，模塊加載機(jī)制必須考慮“循環(huán)加載”的情況。

對(duì)于JavaScript語(yǔ)言來(lái)說(shuō)，目前最常見(jiàn)的兩種模塊格式CommonJS和ES6，處理“循環(huán)加載”的方法是不一樣的，返回的結(jié)果也不一樣。

CommonJS模塊的加載原理

介紹ES6如何處理"循環(huán)加載"之前，先介紹目前最流行的CommonJS模塊格式的加載原理。

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

{
  id: '...',
  exports: { ... },
  loaded: true,
  ...
}

上面代碼就是Node內(nèi)部加載模塊后生成的一個(gè)對(duì)象。該對(duì)象的id屬性是模塊名，exports屬性是模塊輸出的各個(gè)接口，loaded屬性是一個(gè)布爾值，表示該模塊的腳本是否執(zhí)行完畢。其他還有很多屬性，這里都省略了。

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

CommonJS模塊的循環(huán)加載

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

讓我們來(lái)看，Node官方文檔里面的例子。腳本文件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í)行完畢');

上面代碼之中，a.js腳本先輸出一個(gè)done變量，然后加載另一個(gè)腳本文件b.js。注意，此時(shí)a.js代碼就停在這里，等待b.js執(zhí)行完畢，再往下執(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í)行完畢');

上面代碼之中，b.js執(zhí)行到第二行，就會(huì)去加載a.js，這時(shí)，就發(fā)生了“循環(huán)加載”。系統(tǒng)會(huì)去a.js模塊對(duì)應(yīng)對(duì)象的exports屬性取值，可是因?yàn)?code>a.js還沒(méi)有執(zhí)行完，從exports屬性只能取回已經(jīng)執(zhí)行的部分，而不是最后的值。

a.js已經(jīng)執(zhí)行的部分，只有一行。

exports.done = false;

因此，對(duì)于b.js來(lái)說(shuō)，它從a.js只輸入一個(gè)變量done，值為false。

然后，b.js接著往下執(zhí)行，等到全部執(zhí)行完畢，再把執(zhí)行權(quán)交還給a.js。于是，a.js接著往下執(zhí)行，直到執(zhí)行完畢。我們寫一個(gè)腳本main.js，驗(yàn)證這個(gè)過(guò)程。

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

執(zhí)行main.js，運(yùn)行結(jié)果如下。

$ 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

上面的代碼證明了兩件事。一是，在b.js之中，a.js沒(méi)有執(zhí)行完畢，只執(zhí)行了第一行。二是，main.js執(zhí)行到第二行時(shí)，不會(huì)再次執(zhí)行b.js，而是輸出緩存的b.js的執(zhí)行結(jié)果，即它的第四行。

exports.done = true;

總之，CommonJS輸入的是被輸出值的拷貝，不是引用。

另外，由于CommonJS模塊遇到循環(huán)加載時(shí)，返回的是當(dāng)前已經(jīng)執(zhí)行的部分的值，而不是代碼全部執(zhí)行后的值，兩者可能會(huì)有差異。所以，輸入變量的時(shí)候，必須非常小心。

var a = require('a'); // 安全的寫法
var foo = require('a').foo; // 危險(xiǎn)的寫法

exports.good = function (arg) {
  return a.foo('good', arg); // 使用的是 a.foo 的最新值
};

exports.bad = function (arg) {
  return foo('bad', arg); // 使用的是一個(gè)部分加載時(shí)的值
};

上面代碼中，如果發(fā)生循環(huán)加載，require('a').foo的值很可能后面會(huì)被改寫，改用require('a')會(huì)更保險(xiǎn)一點(diǎn)。

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

ES6處理“循環(huán)加載”與CommonJS有本質(zhì)的不同。ES6模塊是動(dòng)態(tài)引用，如果使用import從一個(gè)模塊加載變量（即import foo from 'foo'），那些變量不會(huì)被緩存，而是成為一個(gè)指向被加載模塊的引用，需要開(kāi)發(fā)者自己保證，真正取值的時(shí)候能夠取到值。

請(qǐng)看下面這個(gè)例子。

// a.js如下
import {bar} from './b.js';
console.log('a.js');
console.log(bar);
export let foo = 'foo';

// b.js
import {foo} from './a.js';
console.log('b.js');
console.log(foo);
export let bar = 'bar';

上面代碼中，a.js加載b.js，b.js又加載a.js，構(gòu)成循環(huán)加載。執(zhí)行a.js，結(jié)果如下。

$ babel-node a.js
b.js
undefined
a.js
bar

上面代碼中，由于a.js的第一行是加載b.js，所以先執(zhí)行的是b.js。而b.js的第一行又是加載a.js，這時(shí)由于a.js已經(jīng)開(kāi)始執(zhí)行了，所以不會(huì)重復(fù)執(zhí)行，而是繼續(xù)往下執(zhí)行b.js，所以第一行輸出的是b.js。

接著，b.js要打印變量foo，這時(shí)a.js還沒(méi)執(zhí)行完，取不到foo的值，導(dǎo)致打印出來(lái)是undefined。b.js執(zhí)行完，開(kāi)始執(zhí)行a.js，這時(shí)就一切正常了。

再看一個(gè)稍微復(fù)雜的例子（摘自 Dr. Axel Rauschmayer 的《Exploring ES6》）。

// a.js
import {bar} from './b.js';
export function foo() {
  console.log('foo');
  bar();
  console.log('執(zhí)行完畢');
}
foo();

// b.js
import {foo} from './a.js';
export function bar() {
  console.log('bar');
  if (Math.random() > 0.5) {
    foo();
  }
}

按照CommonJS規(guī)范，上面的代碼是沒(méi)法執(zhí)行的。a先加載b，然后b又加載a，這時(shí)a還沒(méi)有任何執(zhí)行結(jié)果，所以輸出結(jié)果為null，即對(duì)于b.js來(lái)說(shuō)，變量foo的值等于null，后面的foo()就會(huì)報(bào)錯(cuò)。

但是，ES6可以執(zhí)行上面的代碼。

$ babel-node a.js
foo
bar
執(zhí)行完畢

// 執(zhí)行結(jié)果也有可能是
foo
bar
foo
bar
執(zhí)行完畢
執(zhí)行完畢

上面代碼中，a.js之所以能夠執(zhí)行，原因就在于ES6加載的變量，都是動(dòng)態(tài)引用其所在的模塊。只要引用存在，代碼就能執(zhí)行。

下面，我們?cè)敿?xì)分析這段代碼的運(yùn)行過(guò)程。

// a.js

// 這一行建立一個(gè)引用，
// 從`b.js`引用`bar`
import {bar} from './b.js';

export function foo() {
  // 執(zhí)行時(shí)第一行輸出 foo
  console.log('foo');
  // 到 b.js 執(zhí)行 bar
  bar();
  console.log('執(zhí)行完畢');
}
foo();

// b.js

// 建立`a.js`的`foo`引用
import {foo} from './a.js';

export function bar() {
  // 執(zhí)行時(shí)，第二行輸出 bar
  console.log('bar');
  // 遞歸執(zhí)行 foo，一旦隨機(jī)數(shù)
  // 小于等于0.5，就停止執(zhí)行
  if (Math.random() > 0.5) {
    foo();
  }
}

我們?cè)賮?lái)看ES6模塊加載器SystemJS給出的一個(gè)例子。

// even.js
import { odd } from './odd'
export var counter = 0;
export function even(n) {
  counter++;
  return n == 0 || odd(n - 1);
}

// odd.js
import { even } from './even';
export function odd(n) {
  return n != 0 && even(n - 1);
}

上面代碼中，even.js里面的函數(shù)even有一個(gè)參數(shù)n，只要不等于0，就會(huì)減去1，傳入加載的odd()。odd.js也會(huì)做類似操作。

運(yùn)行上面這段代碼，結(jié)果如下。

$ babel-node
> import * as m from './even.js';
> m.even(10);
true
> m.counter
6
> m.even(20)
true
> m.counter
17

上面代碼中，參數(shù)n從10變?yōu)?的過(guò)程中，even()一共會(huì)執(zhí)行6次，所以變量counter等于6。第二次調(diào)用even()時(shí)，參數(shù)n從20變?yōu)?，even()一共會(huì)執(zhí)行11次，加上前面的6次，所以變量counter等于17。

這個(gè)例子要是改寫成CommonJS，就根本無(wú)法執(zhí)行，會(huì)報(bào)錯(cuò)。

// even.js
var odd = require('./odd');
var counter = 0;
exports.counter = counter;
exports.even = function(n) {
  counter++;
  return n == 0 || odd(n - 1);
}

// odd.js
var even = require('./even').even;
module.exports = function(n) {
  return n != 0 && even(n - 1);
}

上面代碼中，even.js加載odd.js，而odd.js又去加載even.js，形成“循環(huán)加載”。這時(shí)，執(zhí)行引擎就會(huì)輸出even.js已經(jīng)執(zhí)行的部分（不存在任何結(jié)果），所以在odd.js之中，變量even等于null，等到后面調(diào)用even(n-1)就會(huì)報(bào)錯(cuò)。

$ node
> var m = require('./even');
> m.even(10)
TypeError: even is not a function

跨模塊常量

上面說(shuō)過(guò)，const聲明的常量只在當(dāng)前代碼塊有效。如果想設(shè)置跨模塊的常量（即跨多個(gè)文件），可以采用下面的寫法。

// constants.js 模塊
export const A = 1;
export const B = 3;
export const C = 4;

// test1.js 模塊
import * as constants from './constants';
console.log(constants.A); // 1
console.log(constants.B); // 3

// test2.js 模塊
import {A, B} from './constants';
console.log(A); // 1
console.log(B); // 3

ES6模塊的轉(zhuǎn)碼

瀏覽器目前還不支持ES6模塊，為了現(xiàn)在就能使用，可以將轉(zhuǎn)為ES5的寫法。除了Babel可以用來(lái)轉(zhuǎn)碼之外，還有以下兩個(gè)方法，也可以用來(lái)轉(zhuǎn)碼。

ES6 module transpiler

ES6 module transpiler是square公司開(kāi)源的一個(gè)轉(zhuǎn)碼器，可以將ES6模塊轉(zhuǎn)為CommonJS模塊或AMD模塊的寫法，從而在瀏覽器中使用。

首先，安裝這個(gè)轉(zhuǎn)瑪器。

$ npm install -g es6-module-transpiler

然后，使用compile-modules convert命令，將ES6模塊文件轉(zhuǎn)碼。

$ compile-modules convert file1.js file2.js

-o參數(shù)可以指定轉(zhuǎn)碼后的文件名。

$ compile-modules convert -o out.js file1.js

SystemJS

另一種解決方法是使用SystemJS。它是一個(gè)墊片庫(kù)（polyfill），可以在瀏覽器內(nèi)加載ES6模塊、AMD模塊和CommonJS模塊，將其轉(zhuǎn)為ES5格式。它在后臺(tái)調(diào)用的是Google的Traceur轉(zhuǎn)碼器。

使用時(shí)，先在網(wǎng)頁(yè)內(nèi)載入system.js文件。

<script src="system.js"></script>

然后，使用System.import方法加載模塊文件。

<script>
  System.import('./app.js');
</script>

上面代碼中的./app，指的是當(dāng)前目錄下的app.js文件。它可以是ES6模塊文件，System.import會(huì)自動(dòng)將其轉(zhuǎn)碼。

需要注意的是，System.import使用異步加載，返回一個(gè)Promise對(duì)象，可以針對(duì)這個(gè)對(duì)象編程。下面是一個(gè)模塊文件。

// app/es6-file.js:

export class q {
  constructor() {
    this.es6 = 'hello';
  }
}

然后，在網(wǎng)頁(yè)內(nèi)加載這個(gè)模塊文件。

<script>

System.import('app/es6-file').then(function(m) {
  console.log(new m.q().es6); // hello
});

</script>

上面代碼中，System.import方法返回的是一個(gè)Promise對(duì)象，所以可以用then方法指定回調(diào)函數(shù)。