模块化机制

1 ES6

静态化，编译时就能确认模块的依赖关系

1.1 export命令

规定模块的对外接口，输出的是值的引用。只可用于模块顶层。

• 基本使用

export const a = 20;

• 重命名 – as关键字

const fun1 = () => {...}
export { fun1 as Fun1}

1.2 export default

指定模块的默认输出，其他模块加载此模块时，import命令可以为该匿名函数指定任意名字。

• 基本使用

// foo.js
export default function() {...}

// import.js
import Foo from './foo.js'

• 本质上export default命令是输出一个叫做default的变量或方法

const sum = (x, y) => {
	return x + y;
}
export { sum as default };

//等同于 export default sum;

1.3 import命令

输入其他模块提供的功能
输入的变量都是只读的，不可修改

• 导入export命令定义的接口

import { fun } from './a.js'

• 导入export default命令定义的接口

import a from './a.js'

• 整体加载

import * as API from './a.js'

• 重复加载只会执行一次

import { fun1 } from './a.js'
import { fun2 } from './a.js'

1.4 import()函数

支持动态加载模块，返回一个Promise对象。(异步加载)

import('./foo.js')

适用场合

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

1.5 浏览器加载ES6模块

使用<script>标签，加入type="module"属性

<script type="module" src="./foo.js"></script>

异步加载，即等到整个页面渲染完，再执行模块脚本，相当于打开了defer属性

注意点：

• 代码是在模块作用域中运行，不是在全局作用域运行。模块内部的顶层变量，外部不可见
• this关键字返回undefined

2 CommonJS