ES6学习笔记23--Module加载实现

• 浏览器加载实现

默认情况下，浏览器同步加载 JavaScript 脚本。渲染引擎遇到 <script>标签就会停下来，等到执行完脚本，再继续往下渲染。

浏览器默认异步加载，两种语法：

<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>

/*script 标签打开 defer,或 async 属性，脚本就会异步加载***/
/*defer 与 async 的区别在于：
defer 要等到整个页面在内存中正常渲染结束(DOM结构完全生成，以及其他脚本执行完成)，才会执行
async 是一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，在继续渲染。
如果有多个 defer 脚本，会按照页面出现的顺序加载。而多个 async 脚本是不能保证加载顺序的。
*/

浏览器加载ES6 模块，也使用 <script>标签，但要加入 type = "module"  属性。

也可以内嵌在 HTML 页面中，语法行为与加载外部脚本完全一致。

浏览器对带有 type = "module" 的 <script>，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，在执行模块脚本。等同于打开<script> 标签的 defer 属性。若有多个 <script type = " module" > 模块,他们会按照在页面出现的顺序依次执行。

<script type="module" src="./foo.js"></script>
<!-- 等同于 -->
<script type="module" src="./foo.js" defer></script>

<!-- 在HTML页面内嵌入ES6 模块 -->
<script type="module">
  import utils from "./utils.js";
  // other code
</script>

对于外部的模块脚本，注意点有：
(1)代码是在模块作用域之中运行，而不是在全局作用域运行。模块内部的顶层变量，外部是不可见的
(2)模块脚本自动采用严格模式
(3)模块之中，顶层的 this 关键字返回 undefined,而不是指向window。在模块顶层使用 this 关键字是毫无意义的
(4)同一个模块加载多次，将只执行一次。

---

• Node.js的加载实现

Node.js 有自己的CommonJS 模块格式，与ES6 模块格式是不兼容的。

目前的解决方案是，将两者分开，ES6 模块和 CommonJS 采用各自的加载方案。从 v13.2 版本开始，Node.js 已经默认打开了 ES6 模块支持。