ES6模块化

ES6模块化主要包含三种用法

1. 默认导出和默认导入
2. 按需导出和按需导入
3. 直接导入并执行模块中的代码

一、默认导出与导入

1.1 默认导出

语法： export default + 默认导出的成员

注意：默认导出一个模块只能使用一次，否则会报错

let n1 = 10; // 定义模块私有私有成员n1
let n2 = 20; // 定义模块私有私有成员n2
function show(){} // 定义模块私有私有方法 show 
// 上面的成员和方法在其他模块都无法访问到，因为他们在不同模块里，目前并没有暴露出去。

export default { // 使用模块的默认导出方法 export default 向外暴露出成员 n1, show
  n1,
  show
}

1.2 默认导入

语法：import 接收名字（自己和任意名字） from + '模块路径'

// 从 01.js 中导入 export defualt 向外暴露的成员
// 使用 m1 成员进行接受

import m1 from "./01.js"
console.log(m1) // 结果为 {n1, show}
//调用模块内的show方法
m1.show()

注意：默认导出的模块导入时不能用{n1,show} from '../files.js'这种解构的方式获取， 获取导出的模块的具体数据需要用'.'来获取

二、按需导入与导出

2.1 按需导入

语法：export 按需导出成员

export let s1 = 'aaa' // 按需导出 s1
export let s2 = 'aaa' // 按需导出 s2
export let function say(){} // 按需导出 say 方法

2.2 按需导入

语法：import {s1, s2, say} from '模块标识符'

import {s1, s2, say} from './m1.js' // 从m1.js 中按需导入 s1, s2, say 三个成员

2.3 按需导入和导出注意事项

1. 每个模块可以多次使用按需导出
2. 按需导入的成员变量名必须和按需导出的成员名一致
3. 按需导入时，可以使用as关键字进行重命名
4. 按需导入可以和默认导入一起使用

三、直接导入并执行模块中的代码

如果只想单纯执行模块中的代码，并不需要得到向外共享的成员。此时可以使用直接导入，示例代码如下

// 当前文件为 test.js
for (let i = 0; i<3; i++){
  console.log(i)
}

...........分割线...........

// 在直接导入的文件中写
import './test.js'
//运行这个文件则打印出的内容为
1
2
3