ES6 模塊化的基本語法

一、默認導入與導出

1. 默認導出語法 export default 默認導出的成員,代碼如下：

// 當前模塊 為 export1.js
//定義私有成員 a 和 c
let a = 10
let c = 20 

// 外界訪問不到 變量 d 因為其沒有被 暴露出去
let d = 30
function show(){}

// 將 本模塊中的私有成員 暴露出去，供其他模塊使用
export default  {
    a,
    c,
    show
}

2. 默認導入語法 import 接收名稱 from ‘模塊接收符’，代碼如下：

// 導入模塊成員
import export1 from './export1.js'

console.log(export1)

//打印輸出結果為 
// { a: 10, c: 20, show: [function show] }

注意：

• 在每一個模塊中只允許使用唯一的一次 export default ，否則會報錯
• 在一個模塊中如果沒有向外 export default，則導入該模塊時 默認輸出 {}

二、按需導入與導出

1. 按需導出 export let a = 10,代碼如下：

// 當前模塊 為 export1.js

// 向外按需 導出 a
export let a = 'aaa'
// 向外按需 導出 b
export let b = 'bbb'
// 向外按需 導出方法 show
export function say(){
 console.log('say')
}

2. 按需導入 import { a1 } from '模塊接收符’，代碼如下：

// 默認導入和按需導入同時使用
// import export1,{ a, b, say } from './export1.js'

// 導入模塊成員
import { a, b, say } from './export1.js'
console.log(a) // 打印 輸出 aaa
console.log(b) // 打印 輸出 bbb
console.log(say) // 打印 輸出 [Function: say]

注意：

• 在每一個模塊中 可以使用 n 多次按需導出

三、直接導入並執行

在 單純執行 某個模塊的代碼，並不需要得到模塊中向外暴露的成員時，就可以直接導入並執行模塊代碼

1. 在模塊中寫一個 for 循環為例,代碼如下：

// 當前是 e2.js 模塊
for(let i = 0; i < 3; i++){
    console.log(i)
}

2. 直接導入並執行模塊代碼，代碼如下：

// 直接導入並執行 模塊代碼
import './e2.js'