潜入理解ES６－模块化

写在前面

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

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

何为模块

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

导出 & 导入

导出&导入变量/方法

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

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

example1.param1 // 'ok'
复制代码

导出&导入默认default

// example2.js
export default val param2 = 'ok'
// example3.js
export default function foo () {}

import param2 from './example2.js'
import foo from './example3.js'
复制代码

无绑定导入

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

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

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

模块加载

传统加载JavaScript脚本

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

<!-- 页面内嵌的脚本 -->
<script type="text/javascript">
</script>
<!-- 外部脚本 -->
<script type="text/javascript" src="./example.js"></script>
复制代码

使用async、defer属性

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

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

<script type="text/javascript" src="./module1.js" defer></script>
<!-- 这里面无法知道module2、module3那个先执行，因为不知道那个先加载完 -->
<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
复制代码