ES6模块化主要包含三种用法
- 默认导出和默认导入
- 按需导出和按需导入
- 直接导入并执行模块中的代码
一、默认导出与导入
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 按需导入和导出注意事项
- 每个模块可以多次使用按需导出
- 按需导入的成员变量名必须和按需导出的成员名一致
- 按需导入时,可以使用as关键字进行重命名
- 按需导入可以和默认导入一起使用
三、直接导入并执行模块中的代码
如果只想单纯执行模块中的代码,并不需要得到向外共享的成员。此时可以使用直接导入,示例代码如下
// 当前文件为 test.js
for (let i = 0; i<3; i++){
console.log(i)
}
...........分割线...........
// 在直接导入的文件中写
import './test.js'
//运行这个文件则打印出的内容为
1
2
3