潛入理解ES６－模組化

noopyxu發表於2019-02-22

圖片地址http://imcreator.com/free/tech/i

寫在前面

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>
<!-- 這裡面無法知道module2、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
複製程式碼

相關文章