2天时间,聊今年最热的 Agent、上下文工程、AI 产品创新等话题。2025 年最后一场~ 了解详情
写点什么

ECMAScript 6 模块超越 CommonJS 和 AMD

  • 2014-09-24
  • 本文字数:1517 字

    阅读完需:约 5 分钟

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 )关注我们,并与我们的编辑和其他读者朋友交流。

2014-09-24 00:475199
用户头像

发布了 28 篇内容, 共 12.4 次阅读, 收获喜欢 0 次。

关注

评论

发布
暂无评论
发现更多内容

架构师训练营 第二周作业

阿光

架构师训练营第六周总结

xs-geek

极客大学架构师训练营

第二周作业

hunk

极客大学架构师训练营

极客时间 - 架构师一期 - 第六周作业

_

极客大学架构师训练营 第六周作业

第 6 周 作业

Pyr0man1ac

第2周作业

Steven

极客大学架构师训练营

第六周作业 (作业二)

Geek_83908e

极客大学架构师训练营

第 2 周 - 命题作业

willson

【面经】面试官:如果让你设计一个高并发的消息中间件,你会怎么做?

冰河

面试 高并发 异步 限流 消息中间件

第二周总结

willson

第 5 周 作业

Pyr0man1ac

架构师系列之3 接口分离原则

桃花原记

架构师训练营第 2 期 第二周总结

月下独酌

依赖倒置原则

落朽

架构师1期week05

FG佳

第六周 技术选型 学习总结

应鹏

学习 极客大学架构师训练营

架构第六周作业

Geek_Gu

极客大学架构师训练营

第二周

宇文青

架构师训练营 - 第六周 - 作业一

行者

Week2作业

幸福小子

week2学习总结

幸福小子

架构师训练营第六周作业

CmHuang

【架构师训练营第 1 期 06 周】 作业

Bear

极客大学架构师训练营

链表实现插入排序、机器学习Top 10 算法、图数据库实战Neptune、John 易筋 ARTS 打卡 Week 24

John(易筋)

学习 ARTS 打卡计划 链表实现插入排序 图数据库实战 Neptune

依赖倒置原则、接口隔离原则优化类的设计

极客大学架构师训练营

第二周总结

孤星

架构师训练营 第二周学习总结

阿光

架构师训练营 week2 课后练习

花果山

极客大学架构师训练营

架构师训练营week06

FG佳

架构师一期

第二周作业总结

hunk

极客大学架构师训练营

【架构师训练营第 1 期 06 周】 学习总结

Bear

极客大学架构师训练营

ECMAScript 6模块超越CommonJS和AMD_JavaScript_James Chesters_InfoQ精选文章