模块

import {} from 'module';
export {};

import() 函数

• 运行时执行，动态加载模块
• 与 import 命令接受的参数一样
• 返回一个 Promise 对象
• 可用在任何地方，不仅仅三模块，非模块的脚本也可以使用
• 类似 require 方法，区别是：import() 是异步加载，require() 是同步加载

适用场合

• 按需加载
• 条件加载
• 动态的模块路径

加载实现

浏览器加载

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

异步加载，不会阻塞浏览器，等到页面渲染完成，再执行模块脚本。如果有多个 type="module"，它们会按照在页面出现的顺序执行，如果使用了 async 属性，则不会按照页面出现的顺序执行，而是模块加载完成就执行

内嵌写法

<script type="module">
    import utils from 'xxx.js';
</script>

对于外部的模块脚本：

• 代码是在模块作用域之中运行，而不是在全局作用域运行，模块内部的顶层变量，外部不可见
• 模块脚本自动采用严格模式
• 模块之中，可以使用 import 命令加载其他模块，也可使用 export 命令
• 模块之中，顶层的 this 关键字返回 undefined
• 同一个模块如果加载多次，将只执行一次

es6 模块 与 commonjs 模块的差异

• commonjs 模块输出的是一个值的拷贝，es6 模块输出的是值的引用
• commonjs 模块是运行时加载，es6 模块是编译时输出接口