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'