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='Michael';firstName

var='Jackson';lastName

var=1958;year

{,,};exportfirstNamelastNameyear

3.       重命名

var=1;n

{};exportn as m

4. 動態綁定

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

var='bar';exportfoo

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

上面代碼輸出變量foo，值爲bar，500毫秒以後變成baz。

輸出函數

1.       單個輸出

a)         方式一

functionmultiply(,){exportxy

return*; xy

};

b)         方式二

functionf(){}

{};exportf

2.       批量輸出

functionv1(){...}

functionv2(){...}

{v1,v2}export

3.       重命名

functionv1(){...}

functionv2(){...}

{export

, v1 as streamV1

, v2 as streamV2

 v2 as streamLatestVersion

};

重命名後，能夠用不一樣的名字輸出兩次。v2

 

輸出類

export default

import命令

定義

使用export命令定義了模塊的對外接口之後，其餘JS文件就能夠經過import命令加載這個模塊（文件）。

導入變量

1.       批量導入

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

{,,}'./profile';importfirstNamelastNameyearfrom

2.       重命名

{}'./profile';importlastName as surnamefrom

提高

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

foo();

import { foo } from 'my_module';

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

執行

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

import 'lodash';

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

小結

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

2.       import與require的差別較大，最大不要混用。要儘量的使用import.

more