ES6實現(xiàn)了模塊功能export和import
在ES6出現(xiàn)之前，已經(jīng)出現(xiàn)了解決js模塊加載的方案，最主要的是CommonJS和AMD規(guī)范。CommonJS主要應(yīng)用于服務(wù)器，實現(xiàn)同步加載，如nodejs。AMD規(guī)范應(yīng)用于瀏覽器，如requirejs，為異步加載。同時還有CMD規(guī)范，為同步加載方案如seaJS。
ES6在語言規(guī)格的層面上，實現(xiàn)了模塊功能，而且實現(xiàn)得相當(dāng)簡單，完全可以取代現(xiàn)有的CommonJS和AMD規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案。
ES6模塊主要有兩個功能：export?和?import
export用于對外輸出本模塊（一個文件可以理解為一個模塊）變量的接口
import用于在一個模塊中加載另一個含有export接口的模塊
export default 和 export 的區(qū)別
1. export與export default均可用于導(dǎo)出常量、函數(shù)、文件、模塊等
2. 可以在其它文件或模塊中通過import+(常量 | 函數(shù) | 文件 | 模塊)名的方式，將其導(dǎo)入，以便能夠?qū)ζ溥M行使用
3. 在一個文件或模塊中，export、import可以有多個，export default僅有一個
4. 通過export方式導(dǎo)出，在導(dǎo)入時要加{ }，export default則不需要
5. 其實很多時候export與export default可以實現(xiàn)同樣的目的，只是用法有些區(qū)別。注意第四條，通過export方式導(dǎo)出，在導(dǎo)入時要加{ }，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')
? }
}
// 對應(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"起了一個系統(tǒng)默認(rèn)的變量名default，自然default只能有一個值，所以一個文件內(nèi)不能有多個export default
export default str
// export default 導(dǎo)出案例 demo2.js
const str1 = 'hello'
export default {
? str1: str1,
? str2: 'hi'
}
// 對應(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輸出一個叫做default的變量，然后系統(tǒng)允許你為它取任意名字，本案例中取名為a和b。
// 所以可以為import的模塊起任何變量名，且不需要用大括號包含
切記，注意以下代碼的區(qū)別
export default const a =1????// 錯誤
const a =1
export default a? ?// 正確
export const a =1????// 正確
