写点什么

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

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

关注

评论

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

Linux基础操作:如何在 Linux 中复制文件夹?

Ethereal

Linux系统数据备份不再头疼,Rdiff-backup来帮忙!

Ethereal

外包学生管理系统架构设计文档

风中奇缘

架构实战课 「架构实战营」

数据平台与Flink任务运行原理介绍

云智慧AIOps社区

redis 云计算 大数据 kafka Flink 平台

Go 语言快速入门指南:Go 模板介绍

宇宙之一粟

Go 语言 2月月更

IntelliJ IDEA 在校验 PHP Debug 配置的时候提示 URL 无法访问

HoneyMoose

阿里巴巴的Java开发手册(黄山版)来了

Geek_rze78a

Java 阿里巴巴面经总结

RocketMQ-Streams 首个版本发布,轻量级计算的新选择

阿里巴巴云原生

重新理解“无容灾不上云”:应用多活将成为云原生容灾新趋势

阿里巴巴云原生

阿里云 开源 云原生

安全领域权限模型

alibeer

如何在 Vue 中导出数据至 Excel 表格 - 卡拉云

蒋川

Vue Vue 3 vue admin

如果写作平台不叫写作平台,他应该叫……?

InfoQ写作社区官方

写作平台 创意 话题讨论 热门活动

uni-app技术分享| uni-app常见问题(一)

anyRTC开发者

uni-app 音视频 WebRTC 移动开发 实时通讯

学生管理系统详细架构设计文档

晨亮

「架构实战营」

IntelliJ IDEA 在校验 PHP Debug 配置的时候提示 Xdebug 扩展没有载入

HoneyMoose

你才二十几岁呀,怎么眼里没有光了呢?

架构精进之路

随笔 日常感悟 2月日更

尚硅谷MyBatis新版视频教程发布

@零度

Java mybatis

学生管理系统架构

Geek_f3e842

「架构实战营」

Linux 示例中的 apt 命令大全,建议收藏!

Ethereal

Logo小变动,心境大不同,SVG矢量动画格式网站Logo图片制作与实践教程(Python3)

刘悦的技术博客

前端 动画 SVG Python3 svg图

IntelliJ IDEA Ultimate 配置 PHP 拦截器中 Xdebug 扩展应该怎么填

HoneyMoose

外包学生管理系统架构设计文档

五月雨

架构实战营 「架构实战营」

外包学生管理系统的架构文档

张逃逃

IntelliJ IDEA Ultimate 配置 PHP 拦截器

HoneyMoose

基于CC2530设计的自动晾衣杆

DS小龙哥

2月月更

前后端分离项目,如何解决跨域问题?

沉默王二

Java 前端 后端 跨域

架构学习【03】——外包学生管理系统的架构文档

tiger

架构实战营

java面试jvm调优的意义_java培训

@零度

JVM JAVA开发

如何在Linux解压缩(打开)Gz 文件?

Ethereal

绿色数据中心“东数西算”全面启动!八大枢纽十大集群 - 涉及高性能计算,数据集群,水冷散热

GPU算力

灵雀云加入,龙蜥社区迎来国内领先的企业级PaaS服务商

OpenAnolis小助手

Linux 开源 云原生 PaaS

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