2018-02-05 阮一峰教程摘记18 Module的加载实现

1.浏览器加载

传统方法

默认：同步加载，遇到后会停下来，等到执行完脚本，再继续向下渲染

两种异步加载的语法：

defer:页面渲染完成后再执行

async:下载完立即执行，停止渲染；多个async文件，下载、执行的顺序是不确定的

ES6模块加载规则

<script>标签+type="module"属性；浏览器处理默认是按defer类型来加载执行的，可以加async来改变

.js后缀不可省略

利用顶层的this等于undefined这个语法点，可以侦测当前代码是否在 ES6 模块之中

2.ES6模块与CommonJS模块的差异

两者的重大差异：

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

3.Node加载

概述

ES6 模块和 CommonJS 采用各自的加载方案；

Node 要求 ES6 模块采用.mjs后缀文件名；

export、import + .mjs;

require + .js

内部变量

ES6模块加载CommonJS模块  ？？

CommonJS模块加载ES6模块--使用import()函数

4.循环加载

指的是：a脚本的执行依赖b脚本，而b脚本的执行又依赖a脚本

CommonJS的处理：

CommonJS是加载时执行，一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出

ES6的处理：

函数形式--因为会有函数提升

5.ES6模块的转码--部分浏览器还不支持ES6，需转码成ES5