1. 程式人生 > >ES6模組之export和import教程

ES6模組之export和import教程

一、ES6中的模組即使一個包含JS程式碼的檔案,在這個模組中所有的變數都是對其他模組不可見的,除非我們匯出它。ES6的模組系統大致分為匯出(export)和匯入(import)兩個模組。

二、匯入的具體使用

場景1:只想匯入源模組的部分內容
假設a.js是以如下方式匯出的

// a.js
export var num = 100
export var name = '王小明'

那麼如果我們只需要a模組的num,就應該按下面的方式匯入它

// b.js
import {num} from './a.js'
console.log(num) // 100

此處的模組匯入利用了ES6的解構方式

場景2:不滿意源模組所匯出的變數或方法的名稱,想要為它們另起名稱
假設a.js中有一個名稱如此晦澀的變數gddhauabsg

// a.js
export var gddhauabsg = 100

忍不住想要重新命名這個變數的名稱,但是又無權或不想修改源模組的話,那麼不妨這麼做

// b.js
// 如此,我們就可以在b.js中愉快的使用num了
import {gddhauabsg as num} from './a.js'
console.log(num) // 100

場景3:想要把源模組的所有匯出都匯入進來,但偏偏源模組不是以export default方式匯出的
假設a模組將每個變數都單獨,且宣告時立即匯出

// a.js
export var num = 100
export var name = '王小明'

那麼我們就要這樣匯入a的所有匯出

// b.js
import * as moduleA from './a.js'
console.log(moduleA.num)  // 100
console.log(moduleA.name) // '王小明'

解釋一哈:代表源模組(除去export default)的所有匯出的集合,該集合類似Object型別,就相當於{num: 100, name: '王小明'},所以在源模組沒有使用export default匯出時,我們就可以使用上面的方式匯入源模組的所有匯出

場景4:源模組並沒有對外暴露任何匯出
a模組沒有匯出任何內容

// a.js
var arr = [1, 2, 3]
for (var i = 0;i < arr.length;i++) {
    console.log(arr[i])
}

那麼b檔案將a.js檔案整個引入就好了

// b.js
// 此處會執行a.js的所有程式碼邏輯
import './a.js'

那麼有些童鞋可能會有個疑問“這種匯入方式的應用場景在哪?”,不知道大家是否聽過'膩子指令碼'這一概念,就是一些第三方指令碼或工具,作用類似於補丁,用於相容一些新特性或功能,在一般情況下,這些指令碼或工具只需要自執行,並且通常都是在我們的業務程式碼之前引入

三、匯出的具體使用
ES6模組的匯出方式大致有兩種:命名匯出、預設匯出;

場景1:源模組怎樣才能支援命名匯入和名稱空間匯入?

// a.js
// 方式1:在源模組末尾集中匯出(當匯出較多時,推薦此方式,方便管理匯出)
var num = 100
var name = '王小明'
var flag = true
export {
    num,
    name,
    flag
}

// 方式2:宣告時立即匯出(當匯出較少時,推薦此方式)

export var num = 100
export var name = '王小明'
export var flag = true

場景2:匯出的內容前後名稱需要不一致,那麼我們可以嘗試重新命名
什麼意思呢?如果源模組的開發者有下面這種想法時,就應該使用重新命名匯出:‘我想要提高程式碼的可讀性且有較好的語義化,此時變數或方法的名稱長度一定不會太短,類似getOrderInfoFromDatabaseByHttp這種命名,但又不想讓使用我的模組的人覺得我的匯出名稱過長’,示例如下:

// a.js
// 名稱真的好長
var getOrderInfoFromDatabaseByHttp = function () {
    // ...
}
export {
    // 如果沒有重新命名,就會匯出下面這一大串
    // getOrderInfoFromDatabaseByHttp
    // 但如果使用了重新命名,方法的名稱就會變得很簡潔,即getOrderInfo
    getOrderInfoFromDatabaseByHttp as getOrderInfo
}

場景3:模組功能單一,並且只需要匯出值,不需要具名,使用預設匯出export default

// version.js
export default 'v1.0.0'
// index.js
import version from './version.js'

上面的程式碼功能很簡單,只是匯出專案的版本號,所以我們應該使用預設匯出,而沒有必要像下面這樣寫:

// version.js
export var version = 'v1.0.0'
// index.js
import {version} from './version.js' 不需要加花括號