潛入理解ES６－模塊化

寫在前面

ES6標準以前，JavaScript並無模塊體系，特別是瀏覽器端經過<script>引入的代碼被看成腳本執行。社區中則制定了一些標準：如CommonJS、AMD、CMD，CommonJS同步加載主要用於服務端，AMD、CMD異步加載則用於瀏覽器端。

ES6靜態加載的設計思想，使得在編譯時就能夠肯定模塊的依賴關係，以及輸入、輸出的變量。ES6則在語言層面上實現了模塊化，取代CommonJS、AMD、CMD成爲服務端和瀏覽器端通用的模塊解決方案。（CommonJS、AMD、CMD運行時肯定依賴關係）

何爲模塊

• ES6模塊自動運行在嚴格模式下
• 每一個模塊的做用域獨立，模塊頂部this爲undefined
• 必須導出外部可訪問的函數、變量
• 一個模塊能夠加載屢次，但執行一次

導出 & 導入

導出&導入變量/方法

// example1.js
export let/var/const param1 = 'ok'
export function method1 () {}
// 先聲明再導出 
let/var/const param2 = 'error'
export param2

import { param1, method1 } from './example1.js'
import * as example1 from './example1.js'

example1.param1 // 'ok'
複製代碼

導出&導入默認default

// example2.js
export default val param2 = 'ok'
// example3.js
export default function foo () {}

import param2 from './example2.js'
import foo from './example3.js'
複製代碼

無綁定導入

有的模塊能夠不導出任何東西，他們只修改全局做用域中的對象。例如，咱們須要爲Array原型增長方法，就能夠採用無綁定導入。

// example.js
Array.prototype.pushAll = (items) => {
    // ES6數組方法的內部實現，能夠寫篇文章討論下
    // isArray方法實現：
    // Object.prototype.toString.call(arg) === '[object Array]'
    if (!Array.isArray(items)) {
        throw new TypeError('參數必須是數組')
    }
    // 使用展開運算符
    return this.push(...items)
}

// 使用時，直接import
import './example.js'
let items = []
let arr = [1, 2, 3]
items.pushAll(arr)
複製代碼

模塊加載

傳統加載JavaScript腳本

默認狀況下，瀏覽器同步加載<script>，遇到<script>標籤就會中止渲染，執行完腳本纔會繼續渲染。若是遇到特別大的腳本，就會長時間白屏，用戶體驗不好。

<!-- 頁面內嵌的腳本 -->
<script type="text/javascript"> </script>
<!-- 外部腳本 -->
<script type="text/javascript" src="./example.js"></script>
複製代碼

使用async、defer屬性

由於以前說到瀏覽器同步加載<script>標籤，使用async和defer標籤就能夠異步加載。區別在於：

• defer等到頁面渲染完成纔會執行
• async只要腳本加載完成，當即執行

<script type="text/javascript" src="./module1.js" defer></script>
<!-- 這裏面沒法知道module二、module3那個先執行，由於不知道那個先加載完 -->
<script type="text/javascript" src="./module2.js" async></script>
<script type="text/javascript" src="./module3.js" async></script>
複製代碼

瀏覽器中使用模塊

在瀏覽器端使用腳本默認開啓defer屬性，也就是按照引入的順序一個一個加載，這也符合靜態化的思想。

瀏覽器端使用ES6模塊以下：

<script  type='module' src='module1.js'></script>
<script  type='module'>
    import utils from './utils.js'
    // 其餘代碼
</script>
複製代碼

ES6模塊和CommonJS的區別

• CommonJS模塊輸出是值的拷貝，ES6模塊輸出是值的引用（引用時可能修改到模塊的值）
• CommonJS是運行時加載，ES6模塊是編譯時加載

// math.js
export let val = 1
export function add () {
    val++
}
// test.js
import { val, add } from './math.js'
console.log(val) // 1
add()
console.log(val) // 2
複製代碼