前言
模塊作為ES6規(guī)范的核心部分之一乱灵，在實際項目開發(fā)中經(jīng)常會看到它的身影伐谈，那么我們是否真正了解它的相關(guān)規(guī)則呢塞颁，今天就帶大家一起了解一下模塊的導(dǎo)入導(dǎo)出規(guī)則
導(dǎo)入
ES6模塊的導(dǎo)入（即import）大致分為：命名導(dǎo)入踩麦、命名空間導(dǎo)入球切、默認導(dǎo)入虹曙、空導(dǎo)入迫横；那怎么知道用哪種方式來導(dǎo)入源模塊呢？下面我們通過幾個具體的場景看看
場景1：只想導(dǎo)入源模塊的部分內(nèi)容
假設(shè)a.js是以如下方式導(dǎo)出的
// a.js
export var num = 100
export var name = '王小明'
那么如果我們只需要a模塊的num酝碳，就應(yīng)該按下面的方式導(dǎo)入它
// b.js
import {num} from './a.js'
console.log(num) // 100
此處的模塊導(dǎo)入利用了ES6的解構(gòu)方式矾踱，相關(guān)知識大家如果感興趣可以參考阮一峰老師的《變量的解構(gòu)賦值》一章
場景2：不滿意源模塊所導(dǎo)出的變量或方法的名稱，想要為它們另起名稱
假設(shè)a.js中有一個名稱如此晦澀的變量gddhauabsg
// a.js
export var gddhauabsg = 100
忍不住想要重命名這個變量的名稱疏哗，但是又無權(quán)或不想修改源模塊的話呛讲，那么不妨這么做
// b.js
// 如此，我們就可以在b.js中愉快的使用num了
import {gddhauabsg as num} from './a.js'
console.log(num) // 100
場景3：想要把源模塊的所有導(dǎo)出都導(dǎo)入進來返奉，但偏偏源模塊不是以export default方式導(dǎo)出的
假設(shè)a模塊將每個變量都單獨贝搁，且聲明時立即導(dǎo)出
// a.js
export var num = 100
export var name = '王小明'
那么我們就要這樣導(dǎo)入a的所有導(dǎo)出
// b.js
import * as moduleA from './a.js'
console.log(moduleA.num) // 100
console.log(moduleA.name) // '王小明'
解釋一哈：*代表源模塊（除去export default）的所有導(dǎo)出的集合，該集合類似Object類型芽偏，*就相當于{num: 100, name: '王小明'}雷逆，所以在源模塊沒有使用export default導(dǎo)出時，我們就可以使用上面的方式導(dǎo)入源模塊的所有導(dǎo)出
場景4：源模塊并沒有對外暴露任何導(dǎo)出
a模塊沒有導(dǎo)出任何內(nèi)容
// a.js
var arr = [1, 2, 3]
for (var i = 0;i < arr.length;i++) {
console.log(arr[i])
}
那么b文件將a.js文件整個引入就好了
// b.js
// 此處會執(zhí)行a.js的所有代碼邏輯
import './a.js'
那么有些童鞋可能會有個疑問“這種導(dǎo)入方式的應(yīng)用場景在哪污尉？”膀哲，不知道大家是否聽過'膩子腳本'這一概念，就是一些第三方腳本或工具被碗，作用類似于補丁某宪，用于兼容一些新特性或功能，在一般情況下蛮放，這些腳本或工具只需要自執(zhí)行缩抡，并且通常都是在我們的業(yè)務(wù)代碼之前引入
導(dǎo)出
ES6模塊的導(dǎo)出方式大致有兩種：命名導(dǎo)出、默認導(dǎo)出包颁；對比模塊的導(dǎo)入規(guī)則，導(dǎo)出要簡單一些压真，下面我們還是通過場景來介紹
場景1：源模塊怎樣才能支持命名導(dǎo)入和命名空間導(dǎo)入娩嚼？
// a.js
// 方式1：在源模塊末尾集中導(dǎo)出（當導(dǎo)出較多時，推薦此方式滴肿，方便管理導(dǎo)出）
var num = 100
var name = '王小明'
var flag = true
export {
num,
name,
flag
}
// 方式2：聲明時立即導(dǎo)出（當導(dǎo)出較少時岳悟，推薦此方式）
export var num = 100
export var name = '王小明'
export var flag = true
場景2：導(dǎo)出的內(nèi)容前后名稱需要不一致，那么我們可以嘗試重命名
什么意思呢？如果源模塊的開發(fā)者有下面這種想法時贵少，就應(yīng)該使用重命名導(dǎo)出：‘我想要提高代碼的可讀性且有較好的語義化呵俏，此時變量或方法的名稱長度一定不會太短，類似getOrderInfoFromDatabaseByHttp這種命名滔灶，但又不想讓使用我的模塊的人覺得我的導(dǎo)出名稱過長’普碎，示例如下：
// a.js
// 名稱真的好長
var getOrderInfoFromDatabaseByHttp = function () {
// ...
}
export {
// 如果沒有重命名，機會導(dǎo)出下面這一大串
// getOrderInfoFromDatabaseByHttp
// 但如果使用了重命名录平，方法的名稱就會變得很簡潔麻车，即getOrderInfo
getOrderInfoFromDatabaseByHttp as getOrderInfo
}
場景3：模塊功能單一，并且只需要導(dǎo)出值斗这，不需要具名
// version.js
export default 'v1.0.0'
// index.js
import version from './version.js'
上面的代碼功能很簡單动猬，只是導(dǎo)出項目的版本號，所以我們應(yīng)該使用默認導(dǎo)出表箭，而沒有必要像下面這樣寫：
// version.js
export var version = 'v1.0.0'
// index.js
import {version} from './version.js'
結(jié)語
以上就是ES6模塊的一些導(dǎo)入導(dǎo)出場景的整理赁咙，內(nèi)容不多，但卻很實用免钻，希望能夠?qū)Υ蠹矣兴鶐椭鷡
