写点什么

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:474857
用户头像

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

关注

评论

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

逃离同质化,OPPO折叠屏正在笃定远一点的未来

脑极体

OPPO 折叠屏

每日一题之请描述Vue组件渲染流程

bb_xiaxia1998

Vue 前端

前端react面试题(边面边更)

beifeng1996

前端 React

如何实现文件高速传输,推荐镭速高速文件传输解决方案

镭速

每日一题之Vue的异步更新实现原理是怎样的?

bb_xiaxia1998

Vue 前端

2023前端二面vue面试题

bb_xiaxia1998

Vue 前端

JS继承有哪些,你能否手写其中一两种呢?

helloworld1024fd

JavaScript 前端

高频js手写题之实现数组扁平化、深拷贝、总线模式

helloworld1024fd

JavaScript 前端

阿里云云通信风控系统的架构与实践

阿里云CloudImagine

云计算 云通信

Python 基础练习题(三)

漫步桔田

NFTScan x TiDB丨一栈式 HTAP 数据库为 Web3 数据服务提供毫秒级多维查询

PingCAP

TiDB

网心科技以11.3%的市场份额跻身IDC中国边缘公有云市场前三

网心科技

边缘计算 IDC 边缘云 边缘云原生

百度前端一面高频react面试题指南

beifeng1996

前端 React

前端常见手写面试题集锦

helloworld1024fd

JavaScript 前端

2023前端二面手写面试题总结

helloworld1024fd

JavaScript 前端

前端二面高频react面试题集锦

夏天的味道123

前端 React

React的useLayoutEffect和useEffect执行时机有什么不同

beifeng1996

前端 React

StarRocks携手零洞科技,助力碧桂园物业企业微信数字化项目

StarRocks

数据库 开源 互联网

【AAAI 2023】针对视频分类的知识迁移

Zilliz

计算机视觉

ChatGPT热潮背后,金融行业大模型应用路在何方?——金融行业大模型应用探索

易观分析

金融 科技

人人能读懂redux原理剖析

夏天的味道123

前端 React

设计模式第八讲:观察者模式和中介者模式详解

C++后台开发

数据结构 设计模式 后端开发 Linux服务器开发 C++开发

如何使用 Kubernetes 实现应用程序的弹性伸缩

API7.ai 技术团队

Prometheus api 网关 APISIX Serverless Kubernetes

MegEngine 使用小技巧:使用 Netron 实现模型可视化

MegEngineBot

深度学习 开源 MegEngine Netron 模型可视化

预防DIP器件可焊性问题,看这篇就够了

华秋电子

金融与科技融合发展,将技术转化成生产力是重中之重

镜舟科技

数据库 数据库·

用ChatGPT优化AI绘画提示词的探索

Baihai IDP

人工智能 AI AIGC ChatGPT

最佳的18个JAVASCRIPT前端开发框架和库

2D3D前端可视化开发

web前端 Javascript框架 前端开发框架 webgl库 javascript库

大模型时代的异构计算平台

Baidu AICLOUD

大模型训练 异构计算

React循环DOM时为什么需要添加key

beifeng1996

前端 React

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