ES6實(shí)現(xiàn)了模塊功能export和import
在ES6出現(xiàn)之前，已經(jīng)出現(xiàn)了解決js模塊加載的方案，最主要的是CommonJS和AMD規(guī)范。CommonJS主要應(yīng)用于服務(wù)器，實(shí)現(xiàn)同步加載，如nodejs。AMD規(guī)范應(yīng)用于瀏覽器，如requirejs，為異步加載。同時(shí)還有CMD規(guī)范，為同步加載方案如seaJS。
ES6在語(yǔ)言規(guī)格的層面上，實(shí)現(xiàn)了模塊功能，而且實(shí)現(xiàn)得相當(dāng)簡(jiǎn)單，完全可以取代現(xiàn)有的CommonJS和AMD規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案。
ES6模塊主要有兩個(gè)功能：export 和 import
export用于對(duì)外輸出本模塊（一個(gè)文件可以理解為一個(gè)模塊）變量的接口
import用于在一個(gè)模塊中加載另一個(gè)含有export接口的模塊
export default 和 export 的區(qū)別
1. export與export default均可用于導(dǎo)出常量、函數(shù)、文件、模塊等
2. 可以在其它文件或模塊中通過(guò)import+(常量 | 函數(shù) | 文件 | 模塊)名的方式，將其導(dǎo)入，以便能夠?qū)ζ溥M(jìn)行使用
3. 在一個(gè)文件或模塊中，export、import可以有多個(gè)，export default僅有一個(gè)
4. 通過(guò)export方式導(dǎo)出，在導(dǎo)入時(shí)要加{ }，export default則不需要
5. 其實(shí)很多時(shí)候export與export default可以實(shí)現(xiàn)同樣的目的，只是用法有些區(qū)別。注意第四條，通過(guò)export方式導(dǎo)出，在導(dǎo)入時(shí)要加{ }，export default則不需要。使用export default命令，為模塊指定默認(rèn)輸出，這樣就不需要知道所要加載模塊的變量名
// export 導(dǎo)出案例 demo1.js
export const str = 'hello'
export function init1 () {
console.log('hello')
}
export const init2 = () => {
console.log('hello)
}
export class INIT {
constructor() {
console.log('hello')
this.init()
}
init () {
console.log('hello')
}
}
// 對(duì)應(yīng)導(dǎo)入方式 demo2.js ,可按需導(dǎo)入
import { str, init1, init2, INIT } from 'demo1.js// export default 導(dǎo)出案例 demo1.js
const str = 'hello'
// 此處相當(dāng)于為str變量值"hello"起了一個(gè)系統(tǒng)默認(rèn)的變量名default，自然default只能有一個(gè)值，所以一個(gè)文件內(nèi)不能有多個(gè)export default
export default str
// export default 導(dǎo)出案例 demo2.js
const str1 = 'hello'
export default {
str1: str1,
str2: 'hi'
}
// 對(duì)應(yīng)導(dǎo)入方式 demo3.js
import a from 'demo1.js'
import b from 'demo2.js'
console.log(a)
console.log(b)
// 本質(zhì)上，demo1.js文件和demo2.js文件的export default輸出一個(gè)叫做default的變量，然后系統(tǒng)允許你為它取任意名字，本案例中取名為a和b。
// 所以可以為import的模塊起任何變量名，且不需要用大括號(hào)包含切記，注意以下代碼的區(qū)別
export default const a =1 // 錯(cuò)誤 const a =1 export default a // 正確 export const a =1 // 正確
const/let是ES6關(guān)鍵字，如果default后跟const之類的關(guān)鍵字是不符合的，
ES6規(guī)范中標(biāo)記出了default后面能帶的參數(shù)
究其本質(zhì)，export default 命令其實(shí)，是將該命令后面的值賦給default變量以后再默認(rèn)，只是輸出了一個(gè)叫做 default 的變量，所以export default的后面不能跟變量聲明語(yǔ)句
export default a 的含義是將變量a的值賦給變量default
作者：古德毛寧_39de
鏈接：https://www.jianshu.com/p/3aa5cd89211c
