《深入理解ES6》阅读笔记 --- 用模块封装代码

不知不觉《深入理解ES6》阅读笔记就写到了最后一篇，完结之后可能会开启另外的一个系列，分享自己的知识点，让阅读到的人有一点点的收获，以及自己的成长。最后一篇主要是来写一写用模块封装代码的事情，回顾历史，从最早的立即执行函数，再到require.js，以及commonjs，今天我们面对的是语言标准给我们带来的模块化方案。如果说模块，我们应该可以从字面的意思上来看，这是一种可以自动运行在严格模式下并且没有办法退出的代码块。这种代码块在作用域上可以避免互相之间的污染，以及更好的组织代码运行。

模块语法

ES6定义了一对非常简单的关键字来描述模块的导入和导出，在此之间，又为了方便而定义了一些导出导入的方式。

• import from
• export

基本的导出，我们可以用export来将函数暴露出去：

export function a(){
}

当然这样的方式，也可以导出类，对象，变量等。

有了导出，自然会有导入：

// 假设a.js

export function a(){}

// b.js使用a.js

import { a } from 'a.js'

a()

这样，也就构成了ES6的模块系统。

除此之外，整个模块系统给了我们很多其他的方式来操作，比如导出一个默认的函数：

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

// b.js

import a from 'a.js'

如果可以，我想给a起一个别名：

// a.js

export function a(){}
import * as query from 'a.js'

当然了，我们也可以导出多个函数：

export function a(){}
export function b(){}

import { a, b} from 'a.js'

至于其他的用法，有兴趣的朋友，可以阅读一下 export 和 import 。

在浏览器中不借助webpack这样的工具也可以使用模块系统，只需要将type=module，这个模块需要注意的，可能就是关于路径的问题了，其他都和export import一样。