前端模塊化開發之ES Module

瞭解過Web前端開發的小夥伴應該知道，歷史上，JavaScript一直沒有本身模塊體系（module），沒法將一個大程序拆分紅互相依賴的小文件，再用簡單的方法拼裝起來。其餘語言如java、python等都具有這項功能，惟獨Javascript沒有，在ES6以前，要想在前端作模塊化開發，必須依賴第三方框架來實現，如：requireJS與seaJS，requireJS支持的是AMD規範，seaJS支持的是CMD規範，因爲二者功能高度重合，後來seaJS再也不維護，今後淡出人們的視野，因而requireJS一家獨大，直到ES6的出現，且迅速成爲前端和服務器端通用的模塊解決方案，徹底能夠取代AMD 規範和NodeJS支持的CommonJS 規範。

ES6中首次引入模塊化開發規範ES Module，讓Javascript首次支持原生模塊化開發，今後前端開發一發不可收拾，讓requireJS等第三方框架倍感壓力，被淘汰也只是時間問題。因此之後的JS模塊化開發將是ES Module的天下，那接下來咱們來感覺一下ES Module的強大與其所擁有的魅力，我會從如下幾個方面來說解ES Module：

1. ES Module的用法
2. 瀏覽器支持狀況
3. 實際開發中的應用

ES Module的使用

ES Module把一個文件看成一個模塊，每一個模塊有本身的獨立做用域，那如何把每一個模塊聯繫起來呢？核心點就是模塊的導入（import）與導出（export）。

一、export導出模塊

先來一波代碼：

/**
 * @模塊A --moduleA.js
 * 每一個模塊擁有本身獨立的做用域
 */

// 這裏的變量、方法只會在當前模塊生效，不會影響全局做用域
let goodsName = 'huawei mate30 pro'
let qty = 5;
function getData(){
    return {
        goodsName,
        qty
    }
}

// @如要在其它模塊中使用這裏的數據，則必須導出
// 1. 給模塊對象添加default屬性，值爲getData函數
export default getData

在模塊A中定義了一些變量與方法，而後將其導出。注意，export後只能跟function、class、var、let、const、default、{}，export的做用就是給當前模塊對象添加屬性，方便後期導入到其餘模塊中，export的用法以下

// 1. 給模塊對象添加default屬性，值爲getData函數
export default getData

// 2. 給模塊對象添加myClass屬性，值爲一個類
export class myClass {}

// 3. 給模塊對象添加a,b,c屬性
export var a = 'xxx'
export let b = 10
export const c = 20

// 4. 給模塊對象添加多個已聲明屬性（注意不是導出一個對象）
export {
    goodsName,
    qty,
    // a:100 //不支持這種寫法
}

其中 export default方法最經常使用，至於爲何，先賣個關子，接着咱們來講說模塊的導入，搞懂導入的方式，你天然就明白了。

二、import導入模塊

import命令用於導入其餘模塊提供的數據，格式：import <module> from <url>

如在模塊B中導入模塊A中的數據，代碼以下：

/**
 * @模塊B --moduleB.js
 * 要在當前模塊導入其餘模塊數據，使用import
 */

// 1. 導入模塊對象中的default屬性
import getData from './moduleA.js'
import getGoods from './moduleA.js'
console.log(getData,getGoods);

// 2. 導入模塊對象中的其餘屬性
import {myClass,a,b,c,goodsName,qty} from './moduleA.js'

到這你們應該已經看出來export default與其餘的區別了，其實就是導入比較簡單，且名字隨意修改，不受導出模塊的限制（上圖中的getData和getGoods獲得的都是模塊A中的getData方法）。 那其它方式導出的屬性就不能更名字了麼？ 其實ES Module早就幫咱們考慮好了，一個神奇的關鍵字 as，用法以下：

// 導入模塊屬性時同時修改變量名
import {myClass as MyGoods,qty as goodsQty} from './moduleA.js'
console.log(MyGoods,goodsQty)

注意，聲明的變量爲MyGoods而不是MyClass，以上代碼的意思時導入moduleA.js中的myClass屬性並賦值給MyGoods變量，goodsQty同理，這樣能夠有效避免當前模塊變量命名衝突的狀況。

引入模塊時還須要注意一些細節，就是url地址能夠是相對路徑或絕對路徑，但相對路徑必定要以「./」或「../」開頭，避免項目中踩坑，請看如下代碼

// 支持
import base from 'http://laoxie.com/js/base.js';
import base from '/js/base.js';
import base from './base.js';
import base from '../base.js';

// 不支持
import base from 'base.js';
import base from 'js/base.js';

另外ES Module還具備的一些特色：

1. 每個模塊只加載一次， 並執行一次，再次加載同一文件，直接從內存中讀取；
2. 每個模塊內聲明的變量都是局部變量， 不會污染全局做用域；
3. 經過export導出模塊，經過import導入模塊
4. ES6模塊只支持靜態導入和導出，只能夠在模塊的最外層做用域使用import和export

瀏覽器支持狀況

ES Module的瀏覽器支持狀況怎麼樣，畢竟咱們是要在瀏覽器環境中使用的，推薦一個網站（https://caniuse.com/）給你們，快速查看一些新特性的瀏覽器支持狀況，ES Module的支持狀況以下：

你們發現，哪怕是Chrome和Firefox這樣的現代瀏覽器，也是在最近的版本中才對ES Module進行支持，IE直接不支持，確定有小夥伴會問，那若是要兼容低版本瀏覽器怎麼辦呢？有聽過大名鼎鼎的babel麼？接下來咱們講講ES Module在實際開發中的使用。

實際開發中的應用

一、在瀏覽器中直接使用

若是要在瀏覽器中直接使用，首先你的瀏覽器必需要支持ES Module特性，另外script標籤的寫法有別於傳統的寫法，平時咱們的寫法以下：

<script type="text/javascript">
    var goodsName = 'huawei mate30 pro'
    var qty = 5;
</script>

這種傳統寫法，因爲在全局做用域下聲明變量，會讓goodsName和qty成爲全局變量，但若是type屬性改爲module（type="module"） 瀏覽器就會將代碼視爲 ES Module 處理，代碼以下：

<script type="module">
 // 添加module屬性，這裏的聲明的變量只在當前模塊生效，不會成爲全局變量
 let goodsName = 'huawei mate30 pro'
 let qty = 5;
</script>

咱們還能夠引入其餘模塊到當前模塊調用，代碼以下

<script type="module">
 // 引入moduleA.js中的方法
 // 並利用as避免與當前模塊中的變量產生衝突
 import getData,{goodsName as productName} from './moduleA.js
 let goodsName = 'huawei mate30 pro'
 let qty = 5;
 
 // 調用模塊A中的方法
 let goods = getData();
</script>

固然，添加type=」module」的script標籤也支持使用src屬性直接引入其餘模塊，代碼以下：

<script type\="module" src\="./moduleB.js"\></script\>

二、在構建工具中使用

要想讓低版本的瀏覽器也能運行模塊化的代碼，須要在項目中使用babel這樣的工具來進行編譯，通常會配合webpack這樣的構建工具，實現的原理其實很簡單，就是把ES Module的代碼編譯成瀏覽器支持的ES5代碼，因爲babel和webpack不在本文的討論內容範圍，你們能夠自行查找相關資料，或持續關注個人其餘文章，下面演示的是moduleA.js通過Babel編譯後的代碼：

從代碼中你們能夠看到，已經把ES6的代碼編譯成ES代碼，低版本瀏覽器天然就能夠運行了。