Module語法

CommonJS模塊

let { readfile }  = require('fs')
# 等同于
let _fs = require('fs')
let readfile = _fs.readfile //這種加載稱為“運(yùn)行時(shí)加載”

ES6模塊

import { stat, exists, readFile } from 'fs';

這種加載稱為“編譯時(shí)加載”或者靜態(tài)加載

靜態(tài)加載帶來的各種好處

1. 效率要比 CommonJS 模塊的加載方式高。
2. 能進(jìn)一步拓寬 JavaScript 的語法，比如引入宏（macro）和類型檢驗(yàn)（type system）這些只能靠靜態(tài)分析實(shí)現(xiàn)的功能。
3. 不再需要UMD模塊格式了，將來服務(wù)器和瀏覽器都會(huì)支持 ES6 模塊格式。
4. 將來瀏覽器的新 API 就能用模塊格式提供，不再必須做成全局變量或者navigator對象的屬性。
5. 不再需要對象作為命名空間（比如Math對象），未來這些功能可以通過模塊提供。

import()

import命令會(huì)被 JavaScript 引擎靜態(tài)分析,先于模塊內(nèi)的其他語句執(zhí)行

import和export命令只能在模塊的頂層

這樣的設(shè)計(jì)，固然有利于編譯器提高效率，但也導(dǎo)致無法在運(yùn)行時(shí)加載模塊。在語法上，條件加載就不可能實(shí)現(xiàn)。

import()函數(shù)，支持動(dòng)態(tài)加載模塊。

運(yùn)行時(shí)執(zhí)行：也就是說，什么時(shí)候運(yùn)行到這一句，就會(huì)加載指定的模塊。

import()返回一個(gè) Promise 對象。

import('xxx')
.then(module => {module.default})

適用場合

1. 按需加載
2. 條件加載

if(a) {import('xxx').then(({a,b,c}) =>{})}

1. 動(dòng)態(tài)的模塊加載

import(f())

import()也可以用在 async 函數(shù)之中。

嚴(yán)格模式

ES6 的模塊自動(dòng)采用嚴(yán)格模式

export 命令

export命令規(guī)定的是對外的接口，必須與模塊內(nèi)部的變量建立一一對應(yīng)關(guān)系。

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

因?yàn)闆]有提供對外的接口。直接輸出 1。1只是一個(gè)值，不是接口。

export命令可以出現(xiàn)在模塊的任何位置，只要處于模塊頂層就可以。如果處于塊級作用域內(nèi)，就會(huì)報(bào)錯(cuò)

因?yàn)樘幱跅l件代碼塊之中，就沒法做靜態(tài)優(yōu)化了

import 命令

import命令輸入的變量都是只讀的，因?yàn)樗谋举|(zhì)是輸入接口。也就是說，不允許在加載模塊的腳本里面，改寫接口。

import命令具有提升效果，會(huì)提升到整個(gè)模塊的頭部，首先執(zhí)行。

foo();
import { foo } from 'my_module';

上面的代碼不會(huì)報(bào)錯(cuò)，因?yàn)?code>import的執(zhí)行早于foo的調(diào)用。這種行為的本質(zhì)是，import命令是編譯階段執(zhí)行的，在代碼運(yùn)行之前。

由于import是靜態(tài)執(zhí)行，所以不能使用表達(dá)式和變量，這些只有在運(yùn)行時(shí)才能得到結(jié)果的語法結(jié)構(gòu)。

// 報(bào)錯(cuò)
import { 'f' + 'oo' } from 'my_module';
// 報(bào)錯(cuò)
let module = 'my_module';
import { foo } from module;

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

import 'lodash';

多次重復(fù)執(zhí)行同一句import語句，那么只會(huì)執(zhí)行一次，而不會(huì)執(zhí)行多次。

import 'lodash';
import 'lodash';

import { foo } from 'my_module';
import { bar } from 'my_module';
// 等同于
import { foo, bar } from 'my_module';

import在靜態(tài)解析階段執(zhí)行，所以它是一個(gè)模塊之中最早執(zhí)行的。

require('core-js/modules/es6.symbol');
require('core-js/modules/es6.promise');
import React from 'React';

模塊的整體加載

import * as circle from './circle';
console.log('圓面積：' + circle.area(4));
console.log('圓周長：' + circle.circumference(14));

export default 命令

export default命令其實(shí)只是輸出一個(gè)叫做default的變量，所以它后面不能跟變量聲明語句。

// 正確
var a = 1;
export default a;
// 錯(cuò)誤
export default var a = 1;
// 正確
export default 42;
// 報(bào)錯(cuò)
export 42;

因?yàn)?code>export default命令的本質(zhì)是將后面的值，賦給default變量，所以可以直接將一個(gè)值寫在export default之后。

如果想在一條import語句中，同時(shí)輸入默認(rèn)方法和其他接口，可以寫成下面這樣。

import _, { each, forEach } from 'lodash';

export 與 import 的復(fù)合寫法

export { foo, bar } from 'my_module';

在一個(gè)模塊之中，先輸入后輸出同一個(gè)模塊

foo和bar實(shí)際上并沒有被導(dǎo)入當(dāng)前模塊，只是相當(dāng)于對外轉(zhuǎn)發(fā)了這兩個(gè)接口，導(dǎo)致當(dāng)前模塊不能直接使用foo和bar。

Module 的加載實(shí)現(xiàn)

沒看