es6從零學(xué)習(xí)（五）：Module的語法
ES6 模塊的設(shè)計思想，是盡量的靜態(tài)化，使得編譯時就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量
一：es6模塊化和 CommonJS 和 AMD 模塊 （運行時加載）的區(qū)別
1、運行時加載
// CommonJS模塊
let { stat, exists, readFile } = require(``'fs'``);
// 等同于
let _fs = require(``'fs'``);
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;
上面代碼的實質(zhì)是整體加載fs模塊（即加載fs的所有方法），生成一個對象（_fs），然后再從這個對象上面讀取 3 個方法。這種加載稱為“運行時加載”，因為只有運行時才能得到這個對象，導(dǎo)致完全沒辦法在編譯時做“靜態(tài)優(yōu)化”。
2、ES6 可以在編譯時就完成模塊加載
// ES6模塊
import { stat, exists, readFile } from 'fs'``;
上面代碼的實質(zhì)是從fs模塊加載 3 個方法，其他方法不加載。這種加載稱為“編譯時加載”或者靜態(tài)加載，即 ES6 可以在編譯時就完成模塊加載，效率要比 CommonJS 模塊的加載方式高。當然，這也導(dǎo)致了沒法引用 ES6 模塊本身，因為它不是對象。
二：ES6 模塊的好處
1、由于 ES6 模塊是編譯時加載，使得靜態(tài)分析成為可能。有了它，就能進一步拓寬 JavaScript 的語法，比如引入宏（macro）和類型檢驗（type system）這些只能靠靜態(tài)分析實現(xiàn)的功能。
2、不再需要UMD模塊格式了，將來服務(wù)器和瀏覽器都會支持 ES6 模塊格式。目前，通過各種工具庫，其實已經(jīng)做到了這一點。
3、將來瀏覽器的新 API 就能用模塊格式提供，不再必須做成全局變量或者navigator對象的屬性。
4、不再需要對象作為命名空間（比如Math對象），未來這些功能可以通過模塊提供
三：export命令
export命令用于規(guī)定模塊的對外接口
1、一個模塊就是一個獨立的文件。該文件內(nèi)部的所有變量，外部無法獲取。如果你希望外部能夠讀取模塊內(nèi)部的某個變量，就必須使用export關(guān)鍵字輸出該變量。
// profile.js
export var firstName = 'Michael'``;
export var lastName = 'Jackson'``;
export var year = 1958;
export的寫法，除了像上面這樣，還有另外一種。
// profile.js
var firstName = 'Michael'``;
var lastName = 'Jackson'``;
var year = 1958;
export {firstName, lastName, year};
應(yīng)該優(yōu)先考慮使用這種寫法。因為這樣就可以在腳本尾部，一眼看清楚輸出了哪些變量。
2、export命令除了輸出變量，還可以輸出函數(shù)或類（class）。
export function multiply(x, y) {
return x * y;
};
3、通常情況下，export輸出的變量就是本來的名字，但是可以使用as關(guān)鍵字重命名。
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
4、export命令規(guī)定的是對外的接口，必須與模塊內(nèi)部的變量建立一一對應(yīng)關(guān)系。
// 報錯
export 1;
// 報錯
var m = 1;
export m;
上面兩種寫法都會報錯，因為沒有提供對外的接口。第一種寫法直接輸出 1，第二種寫法通過變量m，還是直接輸出 1。1只是一個值，不是接口。正確的寫法是下面這樣。
// 寫法一
export var m = 1;
// 寫法二
var m = 1;
export {m};
// 寫法三
var n = 1;
export {n as m};
它們的實質(zhì)是，在接口名與模塊內(nèi)部變量之間，建立了一一對應(yīng)的關(guān)系。
5、export語句輸出的接口，與其對應(yīng)的值是動態(tài)綁定關(guān)系，即通過該接口，可以取到模塊內(nèi)部實時的值。
export var foo = 'bar'``;
setTimeout(() => foo = 'baz'``, 500);
6、export命令可以出現(xiàn)在模塊的任何位置，只要處于模塊頂層就可以。如果處于塊級作用域內(nèi)，就會報錯
function foo() {
export default 'bar' // SyntaxError
}
foo()
四：import命令
使用
export命令定義了模塊的對外接口以后，其他 JS 文件就可以通過import命令加載這個模塊。
1、如果想為輸入的變量重新取一個名字，import命令要使用as關(guān)鍵字，將輸入的變量重命名。
import { lastName as surname } from './profile.js'``;
2、注意，import命令具有提升效果，會提升到整個模塊的頭部，首先執(zhí)行
foo();
import { foo } from 'my_module'``;
這種行為的本質(zhì)是，import命令是編譯階段執(zhí)行的，在代碼運行之前。
3、由于import是靜態(tài)執(zhí)行，所以不能使用表達式和變量，這些只有在運行時才能得到結(jié)果的語法結(jié)構(gòu)。
// 報錯
import { 'f' + 'oo' } from 'my_module'``;
// 報錯
let module = 'my_module'``;
import { foo } from module;
// 報錯
if (x === 1) {
import { foo } from 'module1'``;
} else {
import { foo } from 'module2'``;
}
上面三種寫法都會報錯，因為它們用到了表達式、變量和if結(jié)構(gòu)。在靜態(tài)分析階段，這些語法都是沒法得到值的。
4、import語句會執(zhí)行所加載的模塊，因此可以有下面的寫法。
import 'lodash'``;
console.log(123)
5、如果多次重復(fù)執(zhí)行同一句import語句，那么只會執(zhí)行一次，而不會執(zhí)行多次。
import 'lodash'``;
import 'lodash'``;
6、import語句是 Singleton 模式。
import { foo } from 'my_module'``;
import { bar } from 'my_module'``;
// 等同于
import { foo, bar } from 'my_module'``;
五：模塊的整體加載
1、除了指定加載某個輸出值，還可以使用整體加載，即用星號（*）指定一個對象，所有輸出值都加載在這個對象上面。
// circle.js
export function area(radius) {
return Math.PI * radius * radius;
}
export function circumference(radius) {
return 2 * Math.PI * radius;
}
整體加載的寫法如下：
import * as circle from './circle'``;
console.log(``'圓面積：' + circle.area(4));
console.log(``'圓周長：' + circle.circumference(14));
2、模塊整體加載所在的那個對象（上例是circle），應(yīng)該是可以靜態(tài)分析的，所以不允許運行時改變。下面的寫法都是不允許的。
import * as circle from './circle'``;
// 下面兩行都是不允許的
circle.foo = 'hello'``;
circle.area = function () {};
六：export default命令
使用
import命令的時候，用戶需要知道所要加載的變量名或函數(shù)名，否則無法加載。但是，用戶肯定希望快速上手，未必愿意閱讀文檔，去了解模塊有哪些屬性和方法。為了給用戶提供方便，讓他們不用閱讀文檔就能加載模塊，就要用到
export default命令，為模塊指定默認輸出。
1、其他模塊加載該模塊時，import命令可以為該匿名函數(shù)指定任意名字
// export-default.js
export default function () {
console.log(``'foo'``);
}
這時就不需要知道原模塊輸出的函數(shù)名。需要注意的是，這時import命令后面，不使用大括號。
// import-default.js
import customName from './export-default'``;
customName(); // 'foo'
2、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，在模塊外部是無效的。加載的時候，視同匿名函數(shù)加載。
3、一個模塊只能有一個默認輸出，因此export default命令只能使用一次。所以，import命令后面才不用加大括號，因為只可能唯一對應(yīng)export default命令。
4、export default就是輸出一個叫做default的變量或方法，然后系統(tǒng)允許你為它取任意名字。所以，下面的寫法是有效的。
// modules.js
function add(x, y) {
return x * y;
}
export {add as default``};
// 等同于
// export default add;
// app.js
import { default as foo } from 'modules'``;
// 等同于
// import foo from 'modules';
5、正是因為export default命令其實只是輸出一個叫做default的變量，所以它后面不能跟變量聲明語句。
// 正確
export var a = 1;
// 正確
var a = 1;
export default a;
// 錯誤
export default var a = 1;
// 錯誤
export default a = 1;
6、export default也可以用來輸出類。
// MyClass.js
export default class { ... }
// main.js
import MyClass from 'MyClass'``;
let o = new MyClass();
