你真的搞懂ES6模塊的導入導出規則了嗎

前言

模塊作為ES6規范的核心部分之一，在實際項目開發中經常會看到它的身影，那么我們是否真正了解它的相關規則呢，今天就帶大家一起了解一下模塊的導入導出規則

 

導入

ES6模塊的導入（即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：模塊功能單一，並且只需要導出值，不需要具名

// 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'

 

結語

以上就是ES6模塊的一些導入導出場景的整理，內容不多，但卻很實用，希望能夠對大家有所幫助~

 

原文地址：https://kittyslave.github.io/2017/10/16/%E4%BD%A0%E7%9C%9F%E7%9A%84%E6%90%9E%E6%87%82ES6%E6%A8%A1%E5%9D%97%E7%9A%84%E5%AF%BC%E5%85%A5%E5%AF%BC%E5%87%BA%E8%A7%84%E5%88%99%E4%BA%86%E5%90%97/