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)的功能怕磨。

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

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

瀏覽器使用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)格模式帜消，不管模塊頭部有沒(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)
  上面這些限制，模塊必須遵守媳溺。這是ES5引入的月幌，詳細(xì)請(qǐng)查閱ES5書(shū)籍。

2. export命令

模塊主要由連個(gè)命令構(gòu)成：export和import悬蔽。
export命令用于規(guī)定模塊的對(duì)外接口扯躺；
import命令用于獲取其他模塊提供的功能。
一個(gè)模塊就是一個(gè)獨(dú)立文件蝎困。該文件內(nèi)部的所有變量录语，外部無(wú)法獲取。如果希望外部能夠讀取模塊內(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的寫(xiě)法，除了像上面這樣拙已，還有另外一種。

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

export {firstName, lastName, year};

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

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

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

上面是輸出一個(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)部的變量建立yi yi對(duì)應(yīng)的關(guān)系。

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

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

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

export var m = 1; // 寫(xiě)法一

var m = 1;
export {m}; // 寫(xiě)法二

var n = 1;
export {n as m}; // 寫(xiě)法三

同樣的虚缎，function和class的輸出，也必須遵守這樣的寫(xiě)法钓株。

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。

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

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

3. 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ǔ)句寫(xiě)在一起夹囚。

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

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

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

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

上面的寫(xiě)法是逐一加載的方法沧烈，整體加載的寫(xiě)法如下：

import * as circle from './circle';

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

5. 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';
customeName();  // 'foo'

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

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

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

上面代碼中，雖然函數(shù)有名字foo害晦，但是在模塊外部是無(wú)效的特铝。仍然視同為匿名函數(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)允許你為它取任意名字。所以，下面的寫(xiě)法是有效的：

// 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魏蔗。所以砍的，最后一種寫(xiě)法會(huì)報(bào)錯(cuò)。

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

import $ from 'jquery';

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

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();

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赢笨。

加載上面的模塊的寫(xiě)法如下：

// 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)致遞歸加載，使得程序無(wú)法執(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è)指向被加載模塊的引用甥材，需要開(kāi)發(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)開(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)undifined落蝙。b.js執(zhí)行完织狐，開(kāi)始執(zhí)行a.js，這時(shí)就一切正常了筏勒。

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