Module語法

CommonJS模塊

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

ES6模塊

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

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

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

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

import()

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

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

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

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

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

import()返回一個 Promise 對象。

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

適用場合

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

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

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

import(f())

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

嚴格模式

ES6 的模塊自動采用嚴格模式

export 命令

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

// 報錯
var m = 1;
export m;

因為沒有提供對外的接口。直接輸出 1。1只是一個值，不是接口。

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

因為處于條件代碼塊之中，就沒法做靜態(tài)優(yōu)化了

import 命令

import命令輸入的變量都是只讀的，因為它的本質是輸入接口。也就是說，不允許在加載模塊的腳本里面，改寫接口。

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

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

上面的代碼不會報錯，因為import的執(zhí)行早于foo的調用。這種行為的本質是，import命令是編譯階段執(zhí)行的，在代碼運行之前。

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

// 報錯
import { 'f' + 'oo' } from 'my_module';
// 報錯
let module = 'my_module';
import { foo } from module;

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

import 'lodash';

多次重復執(zhí)行同一句import語句，那么只會執(zhí)行一次，而不會執(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í)行，所以它是一個模塊之中最早執(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命令其實只是輸出一個叫做default的變量，所以它后面不能跟變量聲明語句。

// 正確
var a = 1;
export default a;
// 錯誤
export default var a = 1;
// 正確
export default 42;
// 報錯
export 42;

因為export default命令的本質是將后面的值，賦給default變量，所以可以直接將一個值寫在export default之后。

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

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

export 與 import 的復合寫法

export { foo, bar } from 'my_module';

在一個模塊之中，先輸入后輸出同一個模塊

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

Module 的加載實現(xiàn)

沒看