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

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

上面是從fs模塊里加載3個(gè)方法，其他方法不加載。這種加載稱為編譯時(shí)加載，即ES6可以在編譯時(shí)就完成模塊加載。

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

除了上面說的靜態(tài)加載，ES6模塊還有以下好處：

• 不再需要UMD模塊格式了，服務(wù)器和瀏覽器現(xiàn)在已經(jīng)大部分支持ES6模塊格式。
• 將來瀏覽器的新API就能用模塊格式提供，不再必要做成全局變量或者navigator對(duì)象的屬性
• 不再需要對(duì)象作為命名空間(比如Math對(duì)象)，這將都可以通過模塊提供。

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

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

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

1. 嚴(yán)格模式

ES6的模塊自動(dòng)采用嚴(yán)格模式，不管模塊頭部有沒有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)
  上面這些限制，模塊必須遵守。這是ES5引入的，詳細(xì)請(qǐng)查閱ES5書籍。

2. export命令

模塊主要由連個(gè)命令構(gòu)成：export和import。
export命令用于規(guī)定模塊的對(duì)外接口；
import命令用于獲取其他模塊提供的功能。
一個(gè)模塊就是一個(gè)獨(dú)立文件。該文件內(nèi)部的所有變量，外部無法獲取。如果希望外部能夠讀取模塊內(nèi)部的變量，就必須使用export關(guān)鍵字輸出該變量。下面是JS文件，里面使用export命令輸出變量。

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

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

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 2016;

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;
}

上面是輸出一個(gè)函數(shù)multiply。
通常情況下，export輸出的變量就是本來的名字，但是可以使用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)部的變量建立yi yi對(duì)應(yīng)的關(guān)系。

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

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

上面兩種寫法都會(huì)報(bào)錯(cuò)，因?yàn)闆]有提供對(duì)外的接口。1只是一個(gè)值，不是接口。正確的寫法是下面這樣：

export var m = 1; // 寫法一

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

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

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

export function f(){};
// 或者
function f(){}
export {f};

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

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

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

最后，export命令可以出現(xiàn)在模塊的任何位置，只要處于模塊的頂層就可以。但是如果處于塊級(jí)作用域內(nèi)，就會(huì)報(bào)錯(cuò)。import命令也是這樣。

function foo(){
  export default 'bar' //  語(yǔ)法錯(cuò)誤
}
foo()

3. import命令

使用export命令定義了模塊的對(duì)外接口以后，其他JS文件就可以通過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)寫法。

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

import 'lodash';

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

4. 模塊的整體加載

除了指定加載某個(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));

5. export default命令

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

為了給用戶提供方便，以至于不用閱讀文檔就能加載模塊，就要用到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';
customeName();  // 'foo'

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

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

export default function foo() {
  console.log('foo');
}
// 或者寫成
function foo(){
  console.log('foo');
}
export default foo;

上面代碼中，雖然函數(shù)有名字foo，但是在模塊外部是無效的。仍然視同為匿名函數(shù)加載。
下面比較一下默認(rèn)輸出和正常輸出：

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

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

export default 和 export輸出時(shí)候，使用import的區(qū)別：

• export default對(duì)應(yīng)的import語(yǔ)句不需要使用大括號(hào)，而export對(duì)應(yīng)的import需要大括號(hào)
• export default 對(duì)應(yīng)的import不需要知道加載的模塊里的變量名。而export對(duì)應(yīng)的import必須和export的變量一樣。

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

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

// module.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也可以用來輸出類：

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

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

6. 模塊的繼承

模塊之間也可以繼承。
假設(shè)有一個(gè)circleplus模塊，繼承了circle模塊：

// circleplus.js
export * from 'circle';
export var e = 2.718
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));

7. ES6模塊加載是引用類型

8. 循環(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)致遞歸加載，使得程序無法執(zhí)行，因此應(yīng)該避免出現(xiàn)。
但是實(shí)際上，這是很難避免的，尤其是依賴關(guān)系復(fù)雜的大項(xiàng)目，很容易出現(xiàn)a依賴b, b依賴c，c又依賴a這樣的情況。這意味著，模塊加載機(jī)制必須考慮“循環(huán)加載”

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

ES6模塊是動(dòng)態(tài)引用，如果使用import從一個(gè)模塊加載變量(即import foo from 'foo')，那些變量不會(huì)被緩存，而是成為一個(gè)指向被加載模塊的引用，需要開發(fā)者自己保證，真正取值的時(shí)候能夠取到值。
請(qǐng)看下面的例子：

// 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é)果如下：

b.js
undefined
a.js
bar

上面代碼中，由于a.js的第一行是加載b.js，所以先執(zhí)行的是b.js。而b.js的第一行又是加載a.js，這時(shí)由于a.js已經(jīng)開始執(zhí)行了，所以不會(huì)重復(fù)執(zhí)行，而是繼續(xù)往下執(zhí)行b.js，所以第一行輸出的是b.js。接著，b.js要打印變量foo，這時(shí)a.js還沒執(zhí)行完，取不到foo的值，導(dǎo)致打印出來undifined。b.js執(zhí)行完，開始執(zhí)行a.js，這時(shí)就一切正常了。

轉(zhuǎn)自：http://es6.ruanyifeng.com/#docs/spec