1.8 模塊化

由于前端代碼規模逐漸龐大，代碼邏輯逐漸復雜，模塊化概念逐漸引入到前端工程中。通過script標簽引入代碼塊的方式會造成一個很大的問題就是變量污染，所以在ES5標準中會采取AMD、CMD來實現前端的模塊化。比較典型的框架就是sea.js以及require.js。在ES6標準出現后，提供了自己的模塊化方式。當然如果要使用ES6標準中的模塊化工具，必須在script標簽里聲明type=＂module＂。代碼如下：

1.8.1 導入導出基本使用

在ES6標準中導出用關鍵字export或者export default；導入用import……from……。代碼如下：

上述代碼中，a模塊中導出了變量a的同時默認導出了obj對象。這里需要注意，export導出是可以導出多個的，然后export default在每個模塊中只能導出一個。導入的對應關系也需要注意，通過export導出的需要通過大括號解構變量，如代碼中的{a}。然而通過export default導出的可以自定義變量來接收參數，如代碼中的A變量對應的就是導出的obj對象。

1.8.2 導入導出變式寫法

除了上面描述的模塊的基本寫法之外，導入導出當然還有很多變式寫法。在導出的過程中可以導出多個，并且可以通過as來默認導出。如下：

同樣在導入導出時都可以通過“as”關鍵字來起別名，代碼如下：

上述代碼中將a變量以c變量的名稱導出，同時導入的過程中將c起別名d來導入。在導入過程中也可以通過通配符將所有導出全部獲取，代碼如下：

1.8.3 按需導入

在使用ES6模塊化導入模塊的時候，會發現在頁面加載的時候就會加載導入的模塊文件。很多情況下需要延遲導入，當需要加載的時候再加載對應的模塊來節約性能。這時可以通過import()函數來實現，代碼如下：

import()函數會返還一個promise對象，所以可以調取then方法通過回調拿到導出的結果。同樣可以通過async和await改造上述寫法：