ES6 Module(export与export default)
ES6 Module使用import关键字导入模块,export关键字导出模块
ES6 Module是静态的,和var以及function一样具有提升效果
ES6 Module自动采用严格模式(顶层的this返回undefined)
ES6 Module支持使用export{<变量>}导出具名接口,或export default导出匿名接口
export和export default的区别:
export{<变量>}导出的是一个变量的引用,随原文件中的值改变而改变;export default导出的是一个值,不会改变,相当于常量
eg:
a.js
let x = 10;
let y = 20;
setTimeout(() => {
x = 100;
y = 200;
},1000)
export {x}
export default y
b.js
import {x} from './a.js'
import y from './a.js'
console.log(x,y) //10,20
setTimeOut(() => {
console.log(x,y) //100,20
},1000)
ps:ES6 Module和CommonJS的区别
- CommonJS输出的是一个值的拷贝,ES6 Module通过export{<变量>}输出变量引用,export default输出值的拷贝
- CommonJS运行在服务器上,被设计为运行时加载,即代码执行到才会去加载模块,而ES6是预加载
- CommonJS有缓存,之后加载返回的都是第一次运行的结果,ES6 Module则没有
改写import实现动态加载模块
if(true){
import('./a.js').then(res => {
console.log(res)
})
}