ES6深刻浅出 模块系统

一步，一步前進の一步。

模块化主要是帮助咱们更好的组织代码，模块容许咱们将相关的变量和函数放在一个模块中。在 ES6 模块化以前，JS 语言并无模块的概念，只有函数做用域和全局做用域很是容易发生命名冲突。以前的 RequireJS、SeaJS、AMD、UMD、CMD啥的，在必定层面上都是为了解决 JS 模块化的问题。

笔者是一个也不会用啊（技术发展太快了，新技术学不过来，仍是坐等它们过期吧，果真 webpack 和 es6替代了它们），一步心中有个期待，啥时候咱们用的 ES六、ES7直接运行在浏览器上吧，我如今还坐等 webpack 和 babel 死掉呢，一点还不会呢。

什么是模块

模块是自动运行在严格模式下的JS 代码，在模块中建立的变量不会被添加到全局共享做用域，这个变量只会存在于模块的做用域中，在模块中 this的值是 undefined。模块的真正魔力所在是仅导入、导出你须要的绑定，而不是将所用的东西都放在一个地方。一个文件即一个模块。

严格模式

模块中的代码是在严格模式下运行的，等同于在文件的顶部use strict。JS 在严格模式下使用会更加的严谨。简单列举几条严格模式的规则：

1. 变量使用前必须声明
2. 函数不能有重名参数
3. with 不容许使用

。。。
更多规则请参考阮一峰老师的文章严格模式

export

在 ES6模块中的声明的做用范围就被限定在了模块文件中，文件外部是没法访问的，必须使用 export关键字将引用显示的暴露出去。

默认导出

可使用 export default进行默认导出,注意一个模块中只能够有一个默认导出。

export default 1
export default NaN
export default 'foo'
export default { foo: 'bar' }
export default ['foo', 'bar']

命名导出

命名导出和默认导出一样经常使用，若是一个模块想要导出多个声明时较为经常使用，使用以下：

export var foo = 'bar'
export var baz = 'ponyfoo'

导出是绑定

须要注意的是 ES6模块导出的是绑定关联，不是值的复制，意味着若是你导出一个变量 foo,那么 foo 是和模块内部是相互关联连动的，我我的反对去更改一个模块所暴露出来的接口(export出来的部分)。

假设你有个模块./a，导出的 foo 变量初始值是 bar 将在500ms 变成 baz，在使用该变量的地方（import处）也会有该变化。

export var foo = 'bar'
setTimeout(() => foo = 'baz', 500)

导出列表

ES6 的模块容许你导出一个命名导出列表，代码片断以下：

var foo = 'ponyfoo'
var bar = 'baz'
export { foo, bar }

同时能够对命名导出进行重命名:

export { foo as ponyfoo }

导出的最佳实践

咱们学会了命名导出、导出列表、默认导出、导出重命名，此时你应该有点疑惑，我该选择那种方式实现本身的导出呢？人呐之因此烦恼，就是由于选择太多了。做者推荐你们在文件的尾部使用export default进行默认导出。

var foo = 'ponyfoo'
var bar = 'baz'
...

var api = {
  foo,
  baz,
  ...
}
export default api

这样作的好处以下:

1. 模块中导出的部分变得显而意见，不须要从头至尾去找模块中哪里是私有的，哪里是须要export 出去的，只须要滚动到文件底部就能够一目了然。
2. 不用纠结是应该使用命名导出，列表导出，仍是重命名导出了，只使用export default不知道你们有没有注意到，当你将一个对象做为默认导出接口时，便可以结合命名导出，还能够重命名，还能支持导出多个。

import

import 关键字的做用和 export 的做用正好相反，import 的做用是当年想使用其余模块中的内容时进行关系绑定。

导入默认导出

当想在另外一个模块中使用上一个模块的默认导出时十分方便，impprt 后面的名字能够随便起，代码以下：

import _ from 'lodash'
import lodash from 'lodash'

导入命名导出

import关键字后面使用花括号包上你想要使用的命名导出。

import {map, reduce} from 'lodash'

导入时也能够进行重命名

import {cloneDeep as clone, map} from 'lodash'

彻底导入一个模块

import * as _ from 'lodash'
//使用时采用_.的形式
_.map()

无绑定的导入

有些模块也许没有进行任何导出，相反只是修改全局做用域的对象。尽管这种模块的顶级变 量、函数或类最终并不会自动被加入全局做用域，但这并不意味着该模块没法访问全局做用 域。

加载模块

虽然咱们平常编码中在使用 ES6的 import和 export 关键字，可是仔细想一下，咱们并不了解 ES6的模块是如何加载的，只知道打包工具帮咱们处理好了，实际上咱们并不了解模块化的知识。有时间再更新👻。
。。。。

原文ES6 Modules in Depth

🌚 前端学习QQ群: 538631558 🌚

【开发环境推荐】 Cloud Studio 是基于浏览器的集成式开发环境，支持绝大部分编程语言，包括 HTML五、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，无需下载安装程序，一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境，而且支持自定义域名指向，动态计算资源调整，能够完成各类应用的开发编译与部署。