ES6模块特点
- 设计思想是尽量静态化（编译时加载），使得编译时就能确定模块的依赖关系、输入输出变量。
- 由于 ES6 模块是编译时加载，使得静态分析成为可能。
- ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。
- ES6 模块之中，顶层的this指向undefined，即不应该在顶层代码使用this。
- export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。
- import命令输入的变量都是只读的，因为它的本质是输入接口
- import命令具有提升效果，会提升到整个模块的头部，首先执行。
- import语句会执行所加载的模块。
CommonJS
- 运行时确定模块的依赖关系、输入输出变量
- CommonJS 模块输出的是值的缓存，不存在动态更新
- CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。 CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
- 就是this关键字。ES6 模块之中，顶层的this指向undefined；CommonJS 模块的顶层this指向当前模块，这是两者的一个重大差异。
let {m1,m2,m3} = require('modules')
<=>
let m = require('modules') //整体加载modules模块
let m1 = m.m1
let m2 = m.m2
let m3 = m.m3
AMD
实现AMD的工具库 require.js
- 运行时确定模块的依赖关系、输入输出变量
- 全局定义define函数
- 全局定义require函数
- 依赖的JS会自动异步加载
比较
- 因为require是运行时加载模块，import命令无法取代require的动态加载功能。
- import()类似于 Node的require方法，区别主要是前者是异步加载，后者是同步加载。
浏览器异步加载脚本的方法
<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>
渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令。
defer和async的区别
defer与async的区别是：defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。
