《深入理解ES6》筆記——用模組封裝程式碼（13）

二月發表於2017-08-01
筆記封裝

模組的定義

模組是自動執行在嚴格模式下並且沒有辦法退出執行的JavaScript程式碼。

模組可以是函式、資料、類，需要指定匯出的模組名，才能被其他模組訪問。

//資料模組
const obj = {a: 1}
//函式模組
const sum = (a, b) => {
  return a + b
}
//類模組
class My extends React.Components {

}

模組的匯出

給資料、函式、類新增一個export，就能匯出模組。一個配置型的JavaScript檔案中，你可能會封裝多種函式，然後給每個函式加上一個export關鍵字，就能在其他檔案訪問到。

//資料模組
export const obj = {a: 1}
//函式模組
export const sum = (a, b) => {
  return a + b
}
//類模組
export class My extends React.Components {

}

模組的引用

在另外的js檔案中，我們可以引用上面定義的模組。使用import關鍵字，匯入分2種情況，一種是匯入指定的模組，另外一種是匯入全部模組。

1、匯入指定的模組。

//匯入obj資料，My類
import {obj, My} from `./xx.js`

//使用
console.log(obj, My)

2、匯入全部模組

//匯入全部模組
import * as all from `./xx.js`

//使用
console.log(all.obj, all.sun(1, 2), all.My)

預設模組的使用

如果給我們的模組加上default關鍵字，那麼該js檔案預設只匯出該模組，你還需要把大括號去掉。

//預設模組的定義
function sum(a, b) {
    return a + b
}
export default sum

//匯入預設模組
import sum from `./xx.js`

模組的使用限制

不能在語句和函式之內使用export關鍵字，只能在模組頂部使用，作為react和vue開發者的你，這個限制你應該很熟悉了。

在react中，模組頂部匯入其他模組。

import react from `react`

在vue中，模組頂部匯入其他模組。

<script>
    import sum from `./xx.js`
</script>

修改模組匯入和匯出名

有2種修改方式，一種是模組匯出時修改，一種是匯入模組時修改。

1、匯出時修改：

function sum(a, b) {
    return a + b
}
export {sum as add}

import { add } from `./xx.js`
add(1, 2)

2、匯入時修改：

function sum(a, b) {
    return a + b
}
export sum

import { sum as add } from `./xx.js`
add(1, 2)

無繫結匯入

當你的模組沒有可匯出模組，全都是定義的全域性變數的時候，你可以使用無繫結匯入。

模組：

let a = 1
const PI = 3.1314

無繫結匯入：

import `./xx.js`
console.log(a, PI)

瀏覽器載入模組

有用過webpack打包js模組的同學可能有經驗，使用webpack打包了多個js檔案，然後放到HTML使用script載入時，如果載入順序不對，就會出現找不到模組的錯誤。

這是因為模組之間是有依賴關係的，就像你使用jQuery的時候，必須先載入jQuery的程式碼，才能使用jQuery提供的方法。

載入模組的方法，總是先載入模組1，再載入模組2，因為module型別預設使用defer屬性。

<script type="module" src="module1.js"></script>
<script type="module" src="module2.js"></script>

總結

模組還有很多有意思的特性，對react和vue開發有一定經驗的人對這些基本知識應該瞭如指掌，新手不瞭解也不用太心急，寫幾個module.js做一下嘗試。如果瀏覽器報錯，不能識別export模組，你可能需要先載入babel的js外掛來編譯它。

=> 返回文章目錄

相關文章