ES6模塊加載

兩種加載方式

加載方式	規范	命令	特點
運行時加載	CommonJS/AMD	require	社區方案，提供了服務器/瀏覽器的模塊加載方案 非語言層面的標准 只能在運行時確定模塊的依賴關系及輸入/輸出的變量，無法進行靜態優化。
編譯時加載	ESMAScript6+	import	語言規格層面支持模塊功能 支持編譯時靜態分析，便於JS引入宏和類型檢驗 動態綁定

export命令

定義

export命令用於規定模塊的對外接口

輸出變量

1.       單個輸出

// profile.js

export var firstName = 'Michael';

export var lastName = 'Jackson';

export var year = 1958;

2.       批量輸出

// profile.js

var firstName = 'Michael';

var lastName = 'Jackson';

var year = 1958;

export {firstName, lastName, year};

3.       重命名

var n = 1;

export {n as m};

4. 動態綁定

export語句輸出的接口，與其對應的值是動態綁定關系，即通過該接口，可以取到模塊內部實時的值。

export var foo = 'bar';

setTimeout(() => foo = 'baz', 500);

上面代碼輸出變量foo，值為bar，500毫秒之后變成baz。

輸出函數

1.       單個輸出

a)         方式一

export function multiply(x, y) {

 return x * y;

};

b)         方式二

function f() {}

export {f};

2.       批量輸出

function v1() { ... }

function v2() { ... }

export {v1,v2}

3.       重命名

function v1() { ... }

function v2() { ... }

export {

 v1 as streamV1,

 v2 as streamV2,

 v2 as streamLatestVersion

};

重命名后，v2可以用不同的名字輸出兩次。

 

輸出類

export default

import命令

定義

使用export命令定義了模塊的對外接口以后，其他JS文件就可以通過import命令加載這個模塊（文件）。

導入變量

1.       批量導入

import命令接受一個對象（用大括號表示），里面指定要從其他模塊導入的變量名。大括號里面的變量名，必須與被導入模塊（profile.js）對外接口的名稱相同。

 import {firstName, lastName, year} from './profile';

2.       重命名

import { lastName as surname } from './profile';

提升

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

foo();

import { foo } from 'my_module';

上面的代碼不會報錯，因為import的執行早於foo的調用。

執行

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

import 'lodash';

上面代碼僅僅執行lodash模塊，但是不輸入任何值

小結

1.       import命令導入的對象可能是一個變量，也可能是一個函數，或者一個類，要視具體情況而定。

2.       import與require的差異較大，最大不要混用。要盡可能的使用import.

more