深入理解 ES6 模块化

Question

ES6标准之前，JavaScript 并没有模块体系，特别是浏览器端通过 <script> 引入的代码被当作脚本执行。社区中则制定了一些标准：如 CommonJS、AMD、CMD，CommonJS 同步加载主要用于服务端，AMD、CMD 异步加载则用于浏览器端。

ES6 静态加载的设计思想，使得在编译时就可以确定模块的依赖关系，以及输入、输出的变量。ES6 则在语言层面上实现了模块化，取代 CommonJS、AMD、CMD 成为服务端和浏览器端通用的模块解决方案。（CommonJS、AMD、CMD 运行时确定依赖关系）

何为模块

• ES6 模块自动运行在严格模式下
• 每个模块的作用域独立，模块顶部 this 为 undefined
• 必须导出外部可访问的函数、变量
• 一个模块可以加载多次，但执行一次

导出 & 导入

导出 & 导入变量/方法

// example1.jsexportlet/var/const param1 = 'ok'exportfunctionmethod1 () {}
// 先声明再导出 let/var/const param2 = 'error'export param2

import { param1, method1 } from'./example1.js'import * as example1 from'./example1.js'

example1.param1 // 'ok'

导出 & 导入默认 default

// example2.jsexportdefault val param2 = 'ok'// example3.jsexportdefaultfunctionfoo () {}

import param2 from'./example2.js'import foo from'./example3.js'

无绑定导入

有的模块可以不导出任何东西，他们只修改全局作用域中的对象。例如，我们需要为Array原型增加方法，就可以采用无绑定导入。

// example.jsArray.prototype.pushAll = (items) => {
    // ES6数组方法的内部实现，可以写篇文章讨论下// isArray方法实现：// Object.prototype.toString.call(arg) === '[object Array]'if (!Array.isArray(items)) {
        thrownewTypeError('参数必须是数组')
    }
    // 使用展开运算符returnthis.push(...items)
}

// 使用时，直接importimport'./example.js'let items = []
let arr = [1, 2, 3]
items.pushAll(arr)

模块加载

传统加载 JavaScript 脚本

默认情况下，浏览器同步加载 <script>，遇到 <script> 标签就会停止渲染，执行完脚本才会继续渲染。如果遇到特别大的脚本，就会长时间白屏，用户体验很差。

<!-- 页面内嵌的脚本 -->
<scripttype="text/javascript"></script>
<!-- 外部脚本 -->
<scripttype="text/javascript"src="./example.js"></script>

使用 async、defer 属性

因为之前说到浏览器同步加载 <script> 标签，使用 async 和 defer 标签就可以异步加载。区别在于：

• defer等到页面渲染完成才会执行
• async只要脚本加载完成，立即执行

<script type="text/javascript" src="./module1.js" defer></script>
<script type="text/javascript" src="./module2.js" async></script>
<script type="text/javascript" src="./module3.js" async></script>

浏览器中使用模块

在浏览器端使用脚本默认开启 defer 属性，也就是按照引入的顺序一个一个加载，这也符合静态化的思想。浏览器端使用 ES6 模块如下：

<script  type='module' src='module1.js'></script>
<script  type='module'>
    import utils from './utils.js'
    // 其他代码
</script>

ES6 模块和 CommonJS 的区别

• CommonJS 模块输出是值的拷贝，ES6 模块输出是值的引用（引用时可能修改到模块的值）
• CommonJS 是运行时加载，ES6 模块是编译时加载

// math.js
export let val = 1
export function add () {
val++
}
// test.js
import { val, add } from'./math.js'
console.log(val) // 1
add()
console.log(val) // 2