2018-04-10

為什么要添加這一功能：

讓JavaScript可以分割成互相依賴的小文件，然后能用簡單的方法拼裝起來；有利于大型項(xiàng)目的管理。

設(shè)計(jì)思想：

盡量靜態(tài)化，解析時(shí)加載，解析時(shí)就能確定模塊間關(guān)系以及輸入輸出的變量。

語法：

export :

export var firstName = 'Michael';
// 或者
var firstName = 'Michael';
export  { firstName }

• 最好將需要輸出的變量放在模塊最下方一并輸出，一目了然。

function v1 () {}
export {
   v1 as anotherName
}

• 可以用as重命名輸出變量
• 不能將export放入塊級作用域

import:

import { firstName } from './export'

• 導(dǎo)入名要與被導(dǎo)出模塊對外接口名一致
• import有提升效果，會(huì)提升到整個(gè)模塊頭部首先執(zhí)行

import { firstName as surname } from './export'

• as重命名

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

• 輸入輸出連寫； 推薦下面的寫法。

模塊的整體加載

import * as variableName from './export';
// 或者
module variableName from './export'

export default

export default function () {
   console.log('foo');
} // 匿名函數(shù)
function foo () {
   console.log('foo')
};
export default  foo; // 具名函數(shù)

import name from './export' // 即使時(shí)具名函數(shù)被輸出，也會(huì)被name這個(gè)變量名代替；
console.log(name()); // foo

• 默認(rèn)輸出
• 一個(gè)模塊只能有一個(gè)默認(rèn)輸出

import defaultVariable, { notDefault } from './export' // 輸出默認(rèn)和非默認(rèn)的變量/函數(shù)的寫法

• export * 會(huì)忽略模塊的default方法

commonJs 和 ES6模塊加載比較