一、ES6中的模塊
ES6中的模塊即使一個(gè)包含JS代碼的文件，在這個(gè)模塊中所有的變量都是對(duì)其他模塊不可見的，除非我們導(dǎo)出它。ES6的模塊系統(tǒng)大致分為導(dǎo)出（export）和導(dǎo)入（import）兩個(gè)模塊。
★在瀏覽器中直接使用es6模塊
重慶分公司
重慶分公司
★使用webpack來(lái)進(jìn)行模塊化開發(fā)
只需在需要的地方使用export或者import，其他的都交給webpack進(jìn)行處理，就不需要聲明什么type="module"了
二、導(dǎo)入的具體使用
場(chǎng)景1：只想導(dǎo)入源模塊的部分內(nèi)容
假設(shè)a.js是以如下方式導(dǎo)出的
// a.js
export var num = 100
export var name = '王小明'
也可以是
var num = 100;
var name = '王小明';
export {num}
export {name}
export {num,name}
不可以是：export num 或者 export name，這種寫法需要加上{}，上面寫在一行的可以直接那樣寫那么如果我們只需要a模塊的num，就應(yīng)該按下面的方式導(dǎo)入它
// b.js
import {num} from './a.js' //num必須加上{}，不可以直接是import num，.js后綴可省略
console.log(num) // 100
此處的模塊導(dǎo)入利用了ES6的解構(gòu)方式
場(chǎng)景2：不滿意源模塊所導(dǎo)出的變量或方法的名稱，想要為它們另起名稱
假設(shè)a.js中有一個(gè)名稱如此晦澀的變量gddhauabsg
// a.js
export var gddhauabsg = 100忍不住想要重命名這個(gè)變量的名稱，但是又無(wú)權(quán)或不想修改源模塊的話，那么不妨這么做
// b.js
// 如此，我們就可以在b.js中愉快的使用num了
import {gddhauabsg as num} from './a.js'
console.log(num) // 100場(chǎng)景3：想要把源模塊的所有導(dǎo)出都導(dǎo)入進(jìn)來(lái)，但偏偏源模塊不是以export default方式導(dǎo)出的
假設(shè)a模塊將每個(gè)變量都單獨(dú)，且聲明時(shí)立即導(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類型，*就相當(dāng)于{num: 100, name: '王小明'}，所以在源模塊沒(méi)有使用export default導(dǎo)出時(shí)，我們就可以使用上面的方式導(dǎo)入源模塊的所有導(dǎo)出
場(chǎng)景4：源模塊并沒(méi)有對(duì)外暴露任何導(dǎo)出
a模塊沒(méi)有導(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文件整個(gè)引入就好了
// b.js
// 此處會(huì)執(zhí)行a.js的所有代碼邏輯
import './a.js'那么有些童鞋可能會(huì)有個(gè)疑問(wèn)“這種導(dǎo)入方式的應(yīng)用場(chǎng)景在哪？”，不知道大家是否聽過(guò)'膩?zhàn)幽_本'這一概念，就是一些第三方腳本或工具，作用類似于補(bǔ)丁，用于兼容一些新特性或功能，在一般情況下，這些腳本或工具只需要自執(zhí)行，并且通常都是在我們的業(yè)務(wù)代碼之前引入
三、導(dǎo)出的具體使用
ES6模塊的導(dǎo)出方式大致有兩種：命名導(dǎo)出、默認(rèn)導(dǎo)出；
場(chǎng)景1：源模塊怎樣才能支持命名導(dǎo)入和命名空間導(dǎo)入？
// a.js
// 方式1：在源模塊末尾集中導(dǎo)出（當(dāng)導(dǎo)出較多時(shí)，推薦此方式，方便管理導(dǎo)出）
var num = 100
var name = '王小明'
var flag = true
export {
num,
name,
flag
}// 方式2：聲明時(shí)立即導(dǎo)出（當(dāng)導(dǎo)出較少時(shí)，推薦此方式）
export var num = 100
export var name = '王小明'
export var flag = true場(chǎng)景2：導(dǎo)出的內(nèi)容前后名稱需要不一致，那么我們可以嘗試重命名
什么意思呢？如果源模塊的開發(fā)者有下面這種想法時(shí)，就應(yīng)該使用重命名導(dǎo)出：‘我想要提高代碼的可讀性且有較好的語(yǔ)義化，此時(shí)變量或方法的名稱長(zhǎng)度一定不會(huì)太短，類似getOrderInfoFromDatabaseByHttp這種命名，但又不想讓使用我的模塊的人覺得我的導(dǎo)出名稱過(guò)長(zhǎng)’，示例如下：
// a.js
// 名稱真的好長(zhǎng)
var getOrderInfoFromDatabaseByHttp = function () {
// ...
}
export {
// 如果沒(méi)有重命名，就會(huì)導(dǎo)出下面這一大串
// getOrderInfoFromDatabaseByHttp
// 但如果使用了重命名，方法的名稱就會(huì)變得很簡(jiǎn)潔，即getOrderInfo
getOrderInfoFromDatabaseByHttp as getOrderInfo
}場(chǎng)景3：模塊功能單一，并且只需要導(dǎo)出值，不需要具名，使用默認(rèn)導(dǎo)出export default
// version.js
export default 'v1.0.0'
// index.js
import version from './version.js' //直接是version，不是{version}，而且導(dǎo)入時(shí)的名字可以隨意取，不一定就是version上面的代碼功能很簡(jiǎn)單，只是導(dǎo)出項(xiàng)目的版本號(hào)，所以我們應(yīng)該使用默認(rèn)導(dǎo)出，而沒(méi)有必要像下面這樣寫：
// version.js不是默認(rèn)導(dǎo)出需要加{}，是默認(rèn)導(dǎo)出就不需要加{}~~
export var version = 'v1.0.0'
// index.js
import {version} from './version.js'
四、總結(jié)
1、默認(rèn)導(dǎo)出
export default (默認(rèn)導(dǎo)出)，一個(gè)模塊里面只能有一個(gè)默認(rèn)導(dǎo)出
注意： 使用export default 向外暴露的成員，可以使用任意的變量名稱來(lái)接收
注意： 在一個(gè)模塊中，使用export default 只允許向外暴露1次
注意： 在一個(gè)模塊中，可以同時(shí)使用 export default 和 export 向外暴露成員
const apikey="123key";
export default apikey;引入模塊：import kkkk from '路徑'；
2、命名導(dǎo)出
注意： 使用 export 向外暴露的成員，如果不是這種寫法export var num = 100，而是 var num = 100，export {num}，導(dǎo)出的時(shí)候模塊名也得加上{}，只能使用 { } 的形式來(lái)接收，這種形式，叫做 【按需導(dǎo)出】
注意： 使用export 可以向外暴露多個(gè)成員， 同時(shí)，如果某些成員，我們?cè)?import 的時(shí)候，不需要，則可以 不在 {} 中定義
注意： 使用 export 導(dǎo)出的成員，必須嚴(yán)格按照 導(dǎo)出時(shí)候的名稱，來(lái)使用 {} 按需接收；
注意： 使用 export 導(dǎo)出的成員，如果 就想 換個(gè) 名稱來(lái)接收，可以使用 as 來(lái)起別名；
const apikey="123key";
const name="Marray";
function greet(name){
console.log(name)
}
export {apikey,name,greet};//這種方式導(dǎo)出的模塊引入的時(shí)候必須是這個(gè)名稱，如下：
import {apikey,name,greet} from '路徑'3、導(dǎo)出和引入模塊的時(shí)候都可以使用別名，如export {apikey as key,name,greet};
當(dāng)我們引入模塊的時(shí)候必須使用別名import {key，name,greet} from '路徑'
五、筆記
1、es6環(huán)境下，一個(gè)模塊就是一個(gè)獨(dú)立的文件。該文件內(nèi)部的所有變量，外部無(wú)法獲取。如果你希望外部能夠讀取模塊內(nèi)部的某個(gè)變量，就必須使用export關(guān)鍵字輸出該變量。
2、在src目錄下，新建common文件夾，新建profile.js，現(xiàn)在我們?cè)趐rofile.js里面加入以下代碼
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
export const SuccMsgCode=0;等價(jià)于
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
const SuccMsgCode= 0;
export {firstName, lastName, year, SuccMsgCode};es6會(huì)將，profile.js視為一個(gè)模塊，所以如果希望外部能訪問(wèn)這三個(gè)變量，需要將其導(dǎo)出。但是應(yīng)該優(yōu)先考慮使用第二種寫法。因?yàn)檫@樣就可以在腳本尾部，一眼看清楚輸出了哪些變量。
在src目錄下的main.js文件中 中加入以下代碼
import {firstName, lastName, year, SuccMsgCode} from 'common/profile';
console.log('firstName\t' + firstName);
console.log('lastName\t' + lastName);
console.log('year\t' + year);
console.log('SuccMsgCode\t' + SuccMsgCode);就會(huì)看到firstName，lastName，year, SuccMsgCode正常輸出了，但是此種方法是作為變量導(dǎo)入導(dǎo)出的，所以名稱必須一致。除非使用 as 命令指定新的名稱，例如：
導(dǎo)入時(shí)指定別名（不推薦）
export {firstName, lastName, year, SuccMsgCode};
import {firstName, lastName, year, SuccMsgCode as SuccMsgCode1} from 'common/profile';
console.log('SuccMsgCode\t' + SuccMsgCode1);我們看到SuccMsgCode1正常顯示‘Hello World！’
或者，導(dǎo)出時(shí)指定別名
export {firstName, lastName, year, SuccMsgCode as SuccMsgCode2 };
import {firstName, lastName, year, SuccMsgCode2} from 'common/profile';
console.log('SuccMsgCode \t' + SuccMsgCode2);我們看到SuccMsgCode 正常顯示‘Hello World！’
還可以直接使用以下語(yǔ)法：export { import1 as name1, import2 as name2, …, nameN } from …;
我們建議直接使用此種語(yǔ)法，方便又直觀，一般不在import時(shí)做別名處理。
3、export 不僅能導(dǎo)出變量，還能導(dǎo)出函數(shù)和類
在profile.js中加入以下代碼：
export function multiply (x, y) {
return x * y;
};上面代碼對(duì)外輸出一個(gè)函數(shù)multiply。
在main.js 中加入以下代碼
import {multiply} from 'common/profile';
console.log('multiply\t' + multiply);multiply函數(shù)被打印出來(lái)
如果將profile.js中的代碼修改為：
export multiply = function (x, y) {
return x * y;
};等價(jià)于
function multiply (x, y) {
return x * y;
};
export {multiply};4、默認(rèn)導(dǎo)出 export default
如果將export 修改為 export default 則之前的導(dǎo)入導(dǎo)出變量皆不能使用，因?yàn)閑xport default只允許export出現(xiàn)一次，而且在使用導(dǎo)出、導(dǎo)入時(shí)，不需要加{}，代碼如下
function multiply (x, y) {
return x * y;
};
export default multiply;
import multiply from 'common/profile';如果需要導(dǎo)出整個(gè)文件，可使用如下代碼
export default {
data () {
return {
firstName: 'Michael'
};
},
methods: {
multiply (x, y) {
return x * y;
}
}
};另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
