[译]ES6 模块化入门

2019-07-14 admin

ES6 模块系统

在 ES6 之前,我们已经知道了 RequireJS,AngularJS 的依赖注入,以及 CommonJS,具体可以看笔者的上一篇文章《JS模块化历史简介》。当我们学习 ES6 的模块化,就会发现它的发展深受 CommonJS 的影响。通过这篇文章,我们将看到 exportimport 语句,以及 ES6 模块是怎么与 CommonJS 模块兼容的。

严格模式

在 ES6 模块系统中,严格模式是默认开启的。严格模式是语言从语法层面限制你使用一些不好的写法,所以它更严格(==)。它也让编译器更好地处理代码。下面是 MDN上关于严格模式的解释:严格模式

  • 变量必须显式声明
  • 函数的形参必须有唯一的名称(否则会报语法错误)
  • 不能使用with
  • 给只读的属性赋值会报错
  • 00840 这样的八进制数字会报语法错误
  • 试图 delete 无法删除的属性会报错
  • delete prop 会报语法错误,可以使用 delete global[prop]
  • eval 不会在所在的词法作用域引入新的变量
  • evalarguments 不能被改变或赋值
  • arguments 不会跟踪方法的参数变化
  • arguments.callee 不再支持,会报 TypeError
  • arguments.caller 不再支持,会报 TypeError
  • 传入方法内部的 this 不再被强制转换成 Object
  • fn.callerfn.arguments 不再支持
  • 保留关键字 protectedstaticinterface 不能被绑定

即使在 ES6 中严格默认是默认开启的,也推荐在每个模块中都使用 use strict 关键字。

让我们先来看下 export 关键字吧~

export

在 CommonJS 中,导出模块可以用 module.exports 。从下面的代码可以看出,你可以导出任何值:

module.exports = 1
module.export = NaN
module.exports = 'foo' 
module.exports = { foo: 'bar' } 
module.exports = ['foo', 'bar'] 
module.exports = function foo () {}

像 CommonJS 模块一样,ES6 模块也是暴露 API 的文件。同样的,ES6 模块内部的声明只在模块内部有效。这就意味着,某个模块中的变量,如果没有被导出,在其他模块中就无法使用。

Exporting a Default Binding

上面的 CommonJS 代码如果用 ES6 语法写起来也很相似,主要就是将 module.exports 替换为 export default

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

而与 CommonJS 不同的是,export 语句只能放在 ES6 模块代码的顶层,就算放在一个立即执行的函数中也不行。可想而知,这种限制让编译器更容易解析 ES6 模块,同时也让避免了在方法中动态导出这种不是很实用的骚操作。

function foo () { 
    export default 'bar' // SyntaxError 
} 
foo()

导出语法不是只有 export default,你也可以使用具名导出。

Named Exports

在 CommonJS 中导出时也不是必须将 module.exports 赋值为一个对象,你可以直接改变它的属性。

module.exports.foo = 'bar'
module.exports.baz = 'ponyfoo'

好了,下面用 ES6 的写法也很简单(原文说了一堆不太重要就没翻~):

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

有一句话要始终牢记,我们导出的是绑定而不是值。

Bindings, Not Values

在 ES6 模块中重要的一个点是:导出的是绑定,而不是值或者引用。这就意味着你导出的变量foo 被绑定在了模块上,它的值改变了,外部也能收到变化。尽管通常情况下不推荐在模块加载后改变导出的值。

如果你有一个 ./a 模块,导出的 foo 将在 500ms 后从 bar 变为 baz

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

除了默认绑定和具名绑定,我们还可以导出一个列表的绑定。

Exporting Lists

下面的代码可以看到,ES6 模块允许我们导出一个包含顶级成员的列表:

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

如果你想改变其中变量的名字,可以用以下语法:

export { foo as ponyfoo }

同时也可以指定其中的某个为默认导出:

export { foo as default, bar }

而通常的最佳实践是只使用 export default,并且将其放在模块的底部。

Best Practices and export

如果同时使用命名导出,导出列表和默认导出,很容易造成困扰,所以大部分情况下作者建议只使用 export default,并且将语句放在模块文件的底部。你可以将要导出的对象叫作 api

var api = {
    foo: 'bar',
    baz: 'ponyfoo'
}
export default api

这样做有几个好处:(原文比较啰嗦,下面提炼两点)

  1. 将导出的内容包裹在一个对象中,在模块内部可以很容易找到导出的内容。
  2. 只使用 export default 具有一致性,不会因为过多导出方式造成混淆,在使用的时候也更加方便。

我们已经熟悉了 export 的 API 和注意事项,下面来看 import 语句。

import

作为与 export 相对的语句,import 可以让我们导入另一个模块中的内容。模块的加载方式,在浏览器端主要依靠 Babel 实现。而在内部 import 语句的实现也几乎是和 CommonJS 的 require 语句一样。

让我们用 lodash 来说明。下面的语句简单地加载了 Lodash 模块到我们自己的模块,它没有创建任何变量,但它将会执行 lodash 模块顶层代码的内容。

import 'lodash'

在讲导入绑定之前,我们需要先明确的是,跟 export 语句类似,import 语句也只能在模块的顶层代码使用。这能让编译器更好地处理解析工作,也能帮助其他静态分析工具解析我们的代码。

Importing Default Exports

在 CommonJS 中,我们使用 require 导入内容:

var _ = require('lodash')

在 ES6 模块中,我们只需要为导入的绑定起一个名字:

import _ from 'lodash'

我们也可以导入具名导出的内容。

Importing Named Exports

这个语法跟 ES6 的解构赋值很相似,但是也不太一样:

import { map, reduce } from 'lodash'

跟解构赋值不同的其中一点是,你可以为导入的绑定创建别名,可以同时使用有别名和没有别名的导入。

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

也可以同时使用具名和默认的导入,如果要在花括号内使用默认导入,需要使用 default 关键字,当然也可以给它起个别名,或者像第三行那样:

import { default, map } from 'lodash'
import { default as _, map } from 'lodash'
import _, { map } from 'lodash'

import All The Things

我们也可以导入一个模块中的整个命名空间。import * 这个语法后面必须跟一个别名,这个别名中就存放了导入模块的所有绑定。如果里面包含一个默认导出,那么它放被放在了 alias.default

import * as _ from 'lodash'

Conclusions

我们今天可以直接使用 ES6 模块,得益于 Babel 编译器借助了 CommonJS 模块的实现。这其中的一个好处就是 CommonJS 和 ES6 模块之间是兼容的,即我们可以在 ES6 模块中直接写 CommonJS 的语法。

ES6 模块系统看起来很棒,而它也是 JavaScript 中的一个最重要的功能。希望在不久的将来,模块加载 API 可以最终敲定并直接在浏览器端实现。


原文链接

欢迎关注我的公众号:码力全开(codingonfire) codingonfire.jpg

[转载]原文链接:https://segmentfault.com/a/1190000019757322

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69749.html

文章标题:[译]ES6 模块化入门

相关文章
IO.js 1.0.0 正式发布,支持 ES6 语言特性!
IO.js 是为 V8 引擎编写的基于事件 IO 的实现。Node.js中一群不满Joyent公司控制的信徒发起了另外一个项目io.js,即另外一个支持服务器端JavaScript的变种,称为io.js或iojs 。 IO.js 1.0.0...
2015-11-12
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
2015年2月国内操作系统市场份额概况,xp占46.29%,
规则调整:2012年6月1日开始,Mac操作系统中不再包含ipad、iphone市场份额。 ...
2015-11-12
Node.js v0.11.16 开发版发布
Node.js v0.11.16 开发版发布了,改进记录包括: openssl: Upgrade to 1.0.1l npm: Upgrade to 2.3.0 url: revert support of path for url.fo...
2015-11-12
express不是内部或外部命令
最新express4.0版本中将命令工具分家出来了(项目地址:https://github.com/expressjs/generator) 安装一个命令工具,命令如下: npm install -g express-generator ...
2015-11-12
Angular 6 正式发布,新功能详解
作者|Stephen Fluin编译|覃云今天,Angular 6.0.0 正式发布,新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。 这次更新还包括框架包(@angular/core、@angular/common、@...
2018-05-05
VuePress 快速踩坑
最近有个开源项目非常火,那就是尤小右开发的 VuePress,VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码,并且 VuePress 对编译后的 HTML 文件做了一些针对搜索引擎的优化。另外 VuePr...
2018-04-27
RxJS 6有哪些新变化?
RxJs 6于2018年4月24日正式发布,为开发人员带来了一些令人兴奋的增补和改进。Ben Lesh, rxJS核心开发成员,强调: RxJS 6在拥有更小API的同时,带来了更整洁的引入方式 提供一个npm包,该package可以处理...
2018-05-22
Ant design pro 开发笔记 - 表单和数据绑定
antd支持表单双向绑定,开发过程中无需通过onChange()回调函数去获取组件的值,通过 getFieldDecorator() 可以自动完成数据绑定的功能。 { getFieldDecorator('email&#x...
2018-05-25
Ajax入门手册chm
下载地址:Ajax入门手册chm ...
2015-11-12
回到顶部