BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

ECMAScript 6模块超越CommonJS和AMD

| 作者 James Chesters 关注 1 他的粉丝 ,译者 王振峰 关注 0 他的粉丝 发布于 2014年9月25日. 估计阅读时间: 5 分钟 | GMTC大前端的下一站,PWA、Web框架、Node等最新最热的大前端话题邀你一起共同探讨。

Axel Rauschmayer博士正式公布了ECMAScript 6(ES6)模块语法的最终细节。

Rauschmayer在文章“ECMAScript 6模块:最终语法”中详细描述了完整的ES6模块系统,包括ECMAScript 6模块、模块元数据和ECMAScript 6模块加载器的API等。

据Rauschmayer所述,ES6模块的目标是创建一种让CommonJS和AMD用户都感到满意的格式,由于这种模式是内置于语言之中的,因此其能力超越了CommonJS和AMD。

在ES6中有两种导出方式:命名导出(每个模块有多个导出值)和默认导出(每个模块只有一个导出值)。通过在模块声明前面加入export关键字作为前缀,一个模块就可以通过命名导出方式导出多个值,并通过不同的名称对它们进行区分。

Rauschmayer说:

虽然可以通过其他方式命名导出值,但是我觉得此种方式尤其方便:只需关注编写本模块自身的代码,避免了受其他模块的影响,然后使用关键字标记你想导出的值。

如果你愿意,你也可以选择导入整个模块,然后通过属性标注引用其命名导出值。

ES6的默认导出是最重要的导出值,Rauschmayer称,默认导出是非常容易进行导入的。他特别提到导出单个值在前端开发中很普遍,通常的做法是每个模块对应一个模型,由构造函数/类作为其模型。

ES6还提供了在模块内获取当前模块信息(例如模块的URL)的方法。在以下实例中,module关键字表示该元数据将作为模块被导入,代码如下:

import {url} from this module;
console.log(url);

还可以通过对象访问元数据:

import * as metaData from this module;
console.log(metaData.url);

除了提供模块的声明式语法之外,ES6还包括编程API,让开发人员通过编程方式使用模块和脚本,并配置模块加载。针对该API,Rauschmayer

加载器负责处理模块的标识符(import…from后面的字符串ID)、加载模块等等,其构造函数是Reflect.Loader。每个平台会在全局变量System(系统加载器)中保持一个自定义的实例,系统加载器实现自己独特的模块加载方式。

Rauschmayer还提到,加载器API(目前该特性的实现仍在进行中)为配置提供了许多钩子。我们可以通过加载器API“自定义加载过程”,比如:

  • 在导入时校验模块(如使用JSLint或JSHint)
  • 在导入时自动转换模块(包括CoffeeScript或TypeScript代码)
  • 使用遗留模块(AMD、Node.js)

Rauschmayer说,可配置的模块加载过程是Node.js和CommonJS的所缺乏的功能之一。

对于ES6模块语法的最终细节,JavaScript社区的反应大部分是积极正面的。

在Reddit上,有一场关于ECMAScript 6模块:最终语法的讨论,用户brtt3000评论说:“我很喜欢,它看起来包含了所有重要的部分,而且语法也很不错”。在Hacker News上,来自 The Hackerati的软件工程师Alan Johnson评论道:“ES6使人耳目一新”。

但在某些方面,ES6也存在困惑和忧虑。

Evan Winslow对Rauschmayer的文章作了如下评价,他说

如果默认导出本身就是一种命名导出,那如何选择使用默认导出呢?这是否意味着命名导出是推荐的方式,而默认导出只是其一种对命名导出的一种特殊运用呢?如果你使用System.import方法异步加载模块,必须用.default才能获得默认导出。这让人感觉有些混乱。

Rauschmayer对此回复说:

JS模块社区五花八门,而ES6又需要支持所有用例。这意味着ES6比其本身要稍微复杂,但这也预示着存在统一社区的可能性。

希望为ES7+提供建议的InfoQ读者请移步ECMAScript 6 Github

查看英文原文:ECMAScript 6 Modules Go Beyond CommonJS and AMD


感谢邵思华对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ)或者腾讯微博(@InfoQ)关注我们,并与我们的编辑和其他读者朋友交流。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT