es6 模块的两个命令 export 导出, import导入
模块拥有单独作用域,其他模块想要使用某个模块的数据需要先 export 然后 import
使用
export导出的方式
- 命名导出,可使用多次
const a = 100
const str = 'hello world'
const bool = true
//导出 不限类型
export { num }
//直接定义变量的时候导出
export const str = 'hello world'
//也可以一次性直接使用export{需要导出的所有}
export{num,str,bool}
//这种命名导出方式导出的是个对象
// {num:num,str:str,bool:bool}
export 语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以获取到模块内部实时的值。
let userName = 'michael'
setTimeout(() => {
userName = 'jackson'
}, 1000);
export { userName }
import { userName as name } from './about.js'
console.log(name)//michael
setTimeout(() => {
console.log(name)//jackson
}, 2000);
- 默认导出 export default d
不需要使用花括号导出,想导出什么直接导出,默认导出只能使用一次,可以和命名导出一起写。
其实只要是导出,不管哪种方式,都是导出对象,例如:
{x:a,b:b,c:c,default:d}
import 导入方式
导入
- 命名导入,就类似一个对象解构赋值的过程,名字不能改变
// import { num } from './about.js' 不推荐
//同理
import { a, str, bool } from './about.js'
console.log(a, str, bool)//100 'hello world' true
也可使用
import * as obj from './about.js'
console.log(obj.a,obj.str,obj.bool)
将所有元素导入,不管是哪种方式导出,都能导入,放在obj内
导入的时候可以使用as换名字
import { a as num, str, bool } from './about.js'
就是将 a 换成 num,导出的时候也可以
-
默认导入,对应默认导出
正常是写在 import 一起的,使用任意名导入,但是不要加花括号
import hhh from './about'
一起写的时候
import hhh,{a} from './about.js'
-
import() 方法
当我在条件语句中想要引入某个模块,使用 import 会报错,这时候就需要 import()方法,返回的是一个promise,promise 下有一个then 方法,then方法需要接受一个函数作为参数,这个函数内的默认参数就是模块内导出的对象
if (obj.bool) {
import('./about.js').then((res) => {
console.log(res.str)
})
}
import ’路径‘ 直接导入路径js文件,让其运行。
es6模块语法与commin模块(node)的区别
- CommonJS 模块导出的是一个值的拷贝,ES6 模块输出的是值的引用,换句话说后者会实时的获取到新数据
- CommonJS 模块 是运行时加载,ES6模块是编译时输出接口。CommonJS 模块在 module.exports 执行的时候模块才完成,es6模块创建完了,无需import接口就设置完了
- CommonJS 模块 的require()是同步加载,es6的import是异步加载