ES6語法——模塊化Module

十八、Module

模塊（module）體系可以將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。

// ES6模塊
import {stat,exists,readFile} from 'fs'; // 從fs模塊加載3個方法，其它方法不加載

ES6模塊在編譯時就能確定模塊的依賴關係，以及輸入和輸出的變量。這種加載稱爲“編譯時加載”或者靜態加載，效率更高，使靜態分析成爲可能，比如引入宏和類型檢驗功能。這也導致了沒法引用ES6模塊本身，因爲它不是對象。

ES6模塊自動採用嚴格模式。尤其需要注意this的限制，頂層的this指向undefined。

ES6模塊通過export命令規定模塊的對外接口，通過import命令輸入其它模塊提供的功能。

一個模塊是一個獨立的文件，該文件內部的所有變量，外部無法獲取。

export用於向外輸出變量、函數或類。通常export輸出的變量是本來的名字，但可以使用as關鍵字重命名，輸出多次。

// profile.js
var name='Michael Jackson';
var year=1993;

export {name as fullName,name as myName,year};

export規定的對外接口，必須與模塊內部的變量建立一一對應關係，通過該接口可以取到模塊內部實時的值。

export var m=1; // 寫法一

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

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

export 1; // 報錯
var m=1; // 報錯，直接輸出1，只是一個值，不是變量
export m;

export和import命令可以出現在模塊的任何位置，只要處於模塊頂層。如果處於塊級作用域內，就會報錯，因爲沒法做靜態優化了。

使用export命令定義了模塊的對外接口後，其它JS文件可以通過import命令加載這個模塊，從中輸入變量。

import命令接受{}，指定要從其它模塊導入需要的變量名，變量名必須與被導入模塊對外接口的名稱相同。可以用as關鍵字爲輸入的變量重命名。from指定模塊文件的位置，相對路徑或絕對路徑，.js後綴可以省略。如果只是模塊名，不帶有路徑，則必須有配置文件告訴JS引擎該模塊的位置。

import命令具有提升效果，會提升到整個模塊的頭部在編譯階段執行，{}不能使用表達式和變量。

// main.js
import {fullName as name,year} from './profile.js';

import輸入的變量是隻讀的，因爲它的本質是輸入接口。但如果輸入的變量是一個對象，改寫該變量的屬性是允許的，但建議當作只讀。

import {a} from './xxx.js'
a={}; // Syntax Error : 'a' is read-only;
a.foo='hello'; // 合法操作，但不要輕易修改

import會執行所加載的模塊，不輸入任何值。

import 'lodash';

export default命令，爲模塊指定默認輸出，只能使用一次。其實只是輸出一個名字叫default的變量，後面不能跟變量聲明語句。

使用import時，用戶不需要知道所要加載的變量名，可以指定任意名稱接收，此時import命令後面不使用{}。

// export-default.js
export default function(x,y){
  return x*y;
};
export default var a=1; // 錯誤
export default 42; // 正確

// import-default.js
import customName from './export-default';

除了指定加載某個輸出值，還可以使用整體加載。用星號（*）指定一個對象，所有輸出值都加載在這個對象上面。

模塊整體加載所在的那個對象，應該是可以靜態分析的，所以不允許運行時修改其屬性。

import * as circle from './circle';