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放入塊級(jí)作用域
import:
import { firstName } from './export'
- 導(dǎo)入名要與被導(dǎo)出模塊對(duì)外接口名一致
- 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模塊加載比較
| ES6 | commonJs |
|---|---|
| 模塊輸出是輸出值的引用 | 模塊輸出是輸出值的拷貝 |
| 原始值變盯仪，輸入值改變蜜葱；且變量只讀，不可改變其地址爸黄，否則報(bào)錯(cuò) | 在模塊引入后揭鳞，模塊內(nèi)的任何變化不影響輸出后的值 |
| 遇到import，不執(zhí)行模塊称开，而是生成一個(gè)動(dòng)態(tài)的只讀引用；等到用時(shí)鳖轰，再在模塊中取值 | require命令第一次加載該腳本扶镀，就會(huì)執(zhí)行整個(gè)腳本，然后在內(nèi)存中生成一個(gè)對(duì)象 |
| 不緩存 | 緩存 |
