用模块封装代码

《深入理解ES6》阅读随笔

在 ES6 之前，JavaScript 中的变量和函数都是全局共享，并没有其他语言中类似包的概念；而在 ES6 中，新增了模块的机制，其可以限制 JavaScript 代码的作用域，避免命名冲突，增强代码的安全性。

导出的基本语法

通过在变量、函数或者类之前标记关键字 export，即可实现导出的功能：

export const name = 'Tom'

export function sayHello() {
    return 'my name is ' + name
}

function getAge() {
    return 18
}
export getAge;

// 私有函数，未导出
function getWeight() {
    return 100
}

export class Parent {
    constructor(father) {
        this.father = father
        this.mother = mother
    }
}

在模块内部的顶级作用域中，this 为 undefined 。

导入的基本语法

使用关键字 import ，后跟打算导入的变量、函数或者类，这些待导出的内容可以放在大括号中（或者 * 或者不带大括号的 default 导出），然后再跟 from 加导出文件路径，即可使用导入功能：

导入单个绑定

import { name } from './test1.js'

导入多个绑定

import { name, getAge } from './test1.js'

导入全部绑定

通过 * as 创建一个新的命名空间，然后在命名空间中调用所有可导入的变量、函数或者类：

import * as test1 from './test1.js'

注意：

1. 导出导入关键字是有使用限制的，其不能用于函数或者方法内部使用，也就是不可以动态加载，只允许在代码初始化时静态加载；
2. 在多次导入同一个模块文件的不同变量、函数或者类时，文件只加载一次；
3. 不可以直接修改导出变量，但可以通过导出函数来修改变量以后再调用。

导出重命名

使用 as 关键字：

function getAge() {
    return 18
}
export { getAge as age };

导入重命名

使用 as 关键字，重命名以后，原来的命名自动失效：

import { getAge as getNewAge } from './test1.js'

默认导出

在导出关键值后跟内建关键字 default ，可以将待导出的变量、函数或者类以默认的方式导出：

export default function getAge() {
    return 18
}

在导入时，无需再使用大括号：

import getAge from './test1.js'

无绑定导入

不使用 export 关键字，而是通过在模块中自定义全局对象，诸如 Array、Object 等，也可以实现导入的功能。
在模块中如此定义：

// 在插入数组时禁用数组类型变量
Array.prototype.newPush = (items) => {
    if (typeof items === 'number') {
        throw 'not support number'
    }
    return this.push(items)
}

然后按照如下方式调用：

import './test1.js'
let items =[]
items.newPush('a')
items.newPush(42) // err: not support number

模块加载

浏览器模块加载

模块加载有下面几种方式：

1. 在 script 标签中，通过在 src 中引入文件的方式；
2. 在 script 标签中，不携带 src 属性，直接编写内嵌代码；
3. 通过 web worker 或者 service worker 的方式；

何时采纳模块加载机制

在支持导入导出的浏览器宿主环境中，将 script 标签的 type 属性设置为 module，那么浏览器会按照模块的机制来加载文件，否则默认按照脚本方式加载文件。
在使用 Work 时，可以在实例化时给第二个参数位置传入一个 {type:’module’} 对象，此时在浏览器支持模块的前提下，会按照模块的机制加载文件，否则采取脚本加载机制。

执行顺序

使用 script 标签默认会等加载完全部文件以后，再按顺序同步逐个运行，如果设置 async 属性，那么还是会等全部文件加载完毕，但是执行顺序则取决于下载顺序，谁先加载完毕，谁就先执行。

模块说明符

浏览器的模块标识符

浏览器的模块说明符满足相对路径寻找原则：

1. /文件名.js ：在根目录寻找模块；
2. ./文件名.js ：在当前文件路径寻找模块；
3. ../文件名.js：在上层文件路径寻找模块；
4. Url ：在网络路径寻找模块；

除此之外，其余方式均不可正常加载模块。