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的区别

1.     CommonJS输出的是一个值的拷贝，ES6 Module通过export{<变量>}输出变量引用，export default输出值的拷贝
2.     CommonJS运行在服务器上，被设计为运行时加载，即代码执行到才会去加载模块，而ES6是预加载
3.     CommonJS有缓存，之后加载返回的都是第一次运行的结果，ES6 Module则没有

改写import实现动态加载模块

if(true){
  import('./a.js').then(res => {
    console.log(res)
  })
}

————————————————
版权声明：本文为CSDN博主「JudyC」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/JudyC/article/details/87794180