浏览器加载js Module

CommonJS

风格：

1. <script>标签内嵌脚本
2. <script>标签引入外部脚本即增加src属性。如：src=”path/to/myModule.js”

方式：

• 默认:下载脚本并执行完成之后继续向下渲染。
• defer:异步下载脚本，页面渲染结束后，按顺序加载
• async：异步下载脚本，脚本下载后直接运行脚本。

ES6

风格:
和CommonJs一样，只是<script>标签中type属性由默认的”application/javascript”改成”module”(tyep = “module”)。

方式：

• 默认:等同于defer。
• defer:异步下载脚本，页面渲染结束后，按顺序加载。
• async：异步下载脚本，脚本下载后直接运行脚本。

外部脚本注意事项：

• 代码是在模块作用域之中运行，而不是在全局作用域运行。模块内部的顶层变量，外部不可见。
• 模块脚本自动采用严格模式
• 模块之中，可以使用import命令加载其他模块（.js后缀不可省略，需要提供绝对 URL 或相对URL），也可以使用export命令输出对外接口。
• 模块之中，顶层的this关键字返回undefined，而不是指向window.
• 同一个模块如果加载多次，将只执行一次。

CommonJs与ES6之间的差异

CommonJS 模块输出的是一个值的拷贝（有缓存，需要通过函数获取真实值），ES6 模块输出的是值的引用（真实，只读）。
CommonJS 模块是运行时加载(模块是对象），ES6 模块是编译时输出接口（模块是静态定义）。