TC39怎么工作?什么是 ECMAScript ?Babel?2019JavaScript 新特性学习指南

2019-01-0909:56:06WEB前端开发Comments3,376 views字数 6113阅读模式

ES6 规范发布以来,带来很多新的特性,而我们在消化这些大量的知识时,ES 规范也在不停的调整和增加内容。可是我们没有一个特定的流程和渠道来获取最新的资讯,这反而会越来越落后于前沿技术。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

所以在2018年的年末我整理了一下学习 ES 特性的流程和过程中要接触到的名词。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

什么是 Ecma ?

在20世纪60随着计算机的普及,不同制造商在使用各自的标准开发软件,这使得为这些不同的设备编写语言更加困难。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

为了统一计算机领域的部分标准,欧洲知名的计算机制造商们决定城里一个协会来组建并制定章程和规则,这个协会就是「欧洲计算机制造协会」(European Computer Manufacturers Association) 简称「ECMA」文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

时间到了1994年,为了体现全球化的进程,该协会改名为「欧洲信息和通信系统标准化协会」(European association for standardizing information and communication systems) 简称 「Ecma International」,虽然名称变化了,但是因为某些历史原因「Ecma」的商标却任然保留了下来沿用至今。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

TC39怎么工作?什么是 ECMAScript ?Babel?2019JavaScript 新特性学习指南

Ecma 的历史文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

什么是 TC39 ?

「TC39」全称「Technical Committee 39」译为「第39号技术委员会」,是 Ecma 组织架构中的一部分。是负责迭代和发展 ECMAScript 语言规范的委员会,它的成员由各个主流浏览器厂商的代表组成,通常每年召开约 6 次会议来讨论未决提案的进展情况,会议的每一项决议必须得到大部分人的赞同,并且没有人强烈反对才可以通过。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

TC39怎么工作?什么是 ECMAScript ?Babel?2019JavaScript 新特性学习指南文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

TC39 主要负责:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

  1. 维护和更新 ECMAScript 编程语言的标准。
  2. 识别、开发、维护 ECMAScript 的扩展功能库。
  3. 开发测试套件。
  4. 为 ISO/IEC JTC 1 提供标准。
  5. 评估和考虑新添加的技术方案。

TC39 - ECMAScript文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

TC39 - Royalty Free TG文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

TC39怎么工作

ECMAScript 从 ES5 版本到 ES6 版本的发布经历了6年的时间,这带来了两个问题:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

  1. 即使很早就完成的某项特性,也必须等到整个版本发布才能发布出来。
  2. 有些特性的定制会花费很多时间,那么它在实现前都必须承受很大的压力,因为没有赶上本次发布就必须再等很久,直至下一次发布。

因此 TC39 改变了过去漫长的发布流程,从 ECMAScript 2016 (ES7) 开始,每年发布一个版本,这个版本会包含本年完成的所有功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

那什么功能算是完成,又有什么功能可以加入议程中呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

这就需要了解一下 TC39 的工作流程,TC39 会收集各种提案,这些提案来自 TC39 会员或注册为 TC39 撰稿人的非会员。而提案会从 0 阶段(stage 0)开始进入审核流程,它们最终会演变为 ECMAScript 的标准,或者被废弃。后面的章节中会详细介绍。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

什么是 ECMAScript ?

ECMAScript 是一种计算机语言的规范,是 Ecma 组织的第 262 号规范(Ecma-262)。现在我们也用 ESx 来指代 ECMAScript x 版本(x 代表6、2016、2017等)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

Javascript 是 ECMAScript 的一个实现。之所以用这么奇怪的方式来描述它,是因为任何人或组织都可以依照规范来实现语言。举例来说,微软也曾经按照 ECMAScript 标准开发出一门语言叫做 JScript,这门语言本用在 IE 浏览器中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

不过在普世语境下 Javascript 和 ECMAScript 两个词已经可互换使用了,而它们也确实有很深的羁绊。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

1996年8月,微软模仿 JavaScript 开发了一种相近的语言,取名为JScript(JavaScript 是 网景 的注册商标,微软不能用),首先内置于IE 3.0。网景公司面临丧失浏览器脚本语言的主导权的局面。网景公司决定将 JavaScript 提交给 Ecma,希望 JavaScript 能够成为国际标准,以此抵抗微软。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

在提交给 Ecma 之所以不叫 JavaScript,一方面是由于商标的关系,Java 是 Sun 公司的商标,根据一份授权协议,只有网景公司可以合法地使用 JavaScript 这个名字,且 JavaScript 已经被网景公司注册为商标,另一方面也是想体现这门语言的制定者是 Ecma,不是网景,这样有利于保证这门语言的开放性和中立性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

ECMAScript® 2018 Language Specification文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

JavaScript 语言的历史 - JavaScript 教程 - 网道文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

What is language and what is dialect for computers?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

ECMAScript 版本怎么命名?

1997年 Ecma 发布 「ECMAScript Language Specification, Edition 1」简称「ES1」,随后的每次发布都会在原有版本上加1。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

2009年 ES5正式发布,而两年后 ES5.1发布。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

又过了6年,一拖再拖的 ES6 才问世。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

人们已经察觉到 Javascript 的发展速度要比其规范要快得多,一旦一个想法进入讨论阶段,浏览器就会尝试为这个特性开发原型,而社区也会开始编码实验。所以有人建议未来的版本应该基于年份,比如用 ES2016 来标示在 2016 年结束之前敲定的任何特性规范。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

尽管 ES6 被正式更名为 ES2015,但人们还是更多的习惯称其为 ES6。不过从 ES6 以后的规范版本就正式使用年份的命名方式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

额外说一句,还没有正式发布的规范也就是还在定制阶段的特性都被称为 ESNext。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

你不知道的JavaScript(下卷) -图书-图灵社区文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

What is ESNext? Is it same as ECMAScript? - Web, Design, Programming文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

ECMAScript 的规范更新流程是什么?

之前说到 TC39 会收集各种提案,并让这些提案进入审核流程,一步步推进。整个流程有5个阶段,每个阶段都有一定的准入门槛和评定标准,我们也不需要关心这些标准条目,我们只需要知道一个提案到达的阶段越靠后则它被纳入规范的可能性就越大。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

TC39怎么工作?什么是 ECMAScript ?Babel?2019JavaScript 新特性学习指南

stage-0 - 稻草人(straw-man) 基本没有准入门槛,合规的想法都可以进入这个阶段。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

stage-1 - 提案(proposal) 需要确定一个提案推进人。然后概括问题或需求并且形成一个解决方案,列举新提案使用的方法或提供的API。讨论关键算法、概念和语义。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

stage-2 - 草案(Draft) 这个阶段需要使用正式的规范语言精确地描述语法和语义文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

stage-3 - 候选方案(Candidate) 当草案进入这个阶段就需要进一步细化并接收用户的反馈,并描述完所有语义、语法和 API。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

stage-4 - 结束(Finished) 当进入这个阶段时,提案会接受测试和验收,通过后就会进入下一个版本 ES 规范的标准之中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

每年7月份,TC39 会正式发布当年的 ES 规范。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

The TC39 Process文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

The TC39 process for ECMAScript features文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

在哪追踪 ES6 以后的规范变化?

很高兴 ECMAScript 拥抱了 GitHub 社区,通过社区本身的力量来发展自身并回馈于社区。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

TC39 on GitHub文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

TC39 拥有很多仓库:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

  • ecma262 仓库主要维护 ECMAScript 规范文档。
  • proposals 仓库主要维护提案的列表及进度。
  • 还有很多测试套件和其他一些规范。
TC39怎么工作?什么是 ECMAScript ?Babel?2019JavaScript 新特性学习指南

所以回归到章节的问题上来,我们要追踪 ES6 以后的规范变化就需要在 proposals 仓库里找答案。这个仓库包含了 4 大部分,分别是 「stage-0 的提案列表」「stage-1 到 3 的提案列表」「结束(stage-4)的提案列表」和「非活跃(inactive)的提案列表」文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

我们在 结束的提案列表里 能找到所有 ES6 以后添加的特性,下面就列出这些特性以及发布的规范版本: ES2016:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

  • Array.prototype.includes
  • 幂操作符

ES2017文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

  • Object.values / Object.entries
  • 字符串填补
  • Object.getOwnPropertyDescriptors
  • 容许函数参数尾后逗号
  • Async 函数
  • 内存分享和原子操作

ES2018文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

  • 正则表达式 s 标志
  • 正则表达式中组的命名
  • 对象属性的解构赋值
  • 正则表达式反向断言
  • 正则表达式 Unicode 属性转义
  • Promise.prototype.finally
  • 异步迭代器

在 结束的提案列表里 还包含了一些计划在 2019 年发布的特性,由于其还未正式发布我将其归纳在 ESNext 中就不在此列出了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

Release ES2016 Draft 1 · tc39/ecma262 · GitHub文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

proposals/finished-proposals.md · tc39/proposals · GitHub文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

ES 标准与浏览器实现差异

特性的演变迅速也让 JavaScript 开发者遇到了问题,新的特性可以使得编写出更高效健壮的代码,但我们我们的网站却要支持未提供这些新特性的旧版浏览器。在功能特性快速进化的环境下这个问题更加严峻。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

TC39怎么工作?什么是 ECMAScript ?Babel?2019JavaScript 新特性学习指南

上图中绿色的部分就是 ECMAScript 特性和浏览器支持的特性的差异部分,这个差异可以分成两大部分:新的 API新的语法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

新的 API 是在原有对象的拓展,比如 Array.includes 就是对数组对象的拓展。它通常是解决一些历史遗留问题或者对常用代码逻辑的封装。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

举例来说,Object.is() 是一个用于检查两个值是否严格相等的新接口。=== 在处理 NaN-0 这样的值时会有微妙的歧义,而 Object.is() 就是用来解决这样问题的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

NaN === NaN; // false
Object.is(NaN, NaN) // true
复制代码

对于 API 的扩展带来的规范特性和浏览器特性的差异,通常都有一个被称为 polyfill 或者 shim 的模式来抹平。这两个词的意思分别是 腻子 和 垫片,从词义上来说已经能很形象的描述它们的作用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

而 polyfill 可以使用 ES5 的代码来实现这些新 API,就以 Object.is() 来说就可以用以下代码来实现:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

if (!Object.is) {
  Object.is = function(x, y) {
    // SameValue algorithm
    if (x === y) { // Steps 1-5, 7-10
      // Steps 6.b-6.e: +0 != -0
      return x !== 0 || 1 / x === 1 / y;
    } else {
      // Step 6.a: NaN == NaN
      return x !== x && y !== y;
    }
  };
}
复制代码

新的语法就比如 let ,是对功能的扩展。想要在旧浏览器中使用不支持的语法就必须要使用「转换+编译」的技术,利用专门的工具把代码转化为等价(或近似)的可以在 ES5 环境下工作的代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

你不知道的JavaScript(下卷) -图书-图灵社区文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

ECMAScript Shims · GitHub文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

在哪里查看 ECMAScript 特性在运行环境中的兼容性?

这里提供一个网站,专门查看兼容性表格。包含浏览器、手机端和服务器端。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

TC39怎么工作?什么是 ECMAScript ?Babel?2019JavaScript 新特性学习指南

ECMAScript 6 compatibility table文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

什么是 Babel?

Babel 是一个 JavaScript 编译工具,专门用来编译 ECMAScript 6+ 的代码让其兼容就浏览器或运行环境。它可以转换语法、补充 API。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

在圣经故事里,Babel 译为「巴别塔」,当时世界只讲同一种语言,人类决定修建一座能够通天的高塔来传播自己的名声。上帝知道了此事,担心人类过于强大,就打乱了人类的语言,让人类不讲同语不齐同心。于是人类便分裂开来,这座塔也不再建造了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

而这个编译器借用 Babel 之名,似乎是想帮助人类统一 Javascript 语言呢(笑。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

鉴于它在社区的普及程度很高所以本文不会介绍其具体的使用方式,而是介绍它如何配合 TC39 的工作流程。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

如今的 Babel 已经发展到第7个大版本,它提供的子功能的责任划分也越来越清晰,对于开发者来说需要关心两个方面:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

  • 把代码编译到什么程度?
  • Babel 对新 ES 特性的支持程度是多少?

通常把代码编译到 ES5 的版本是最安全的,这个版本已经得到绝大多数浏览器的支持,但这会让编译后的代码文件更大。但我们总不能在2030年还这样做,随着旧浏览器逐渐被淘汰,我们也不需要把所有的特性都编译至 ES5 的版本。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

Babel 本次更新的第7个版本,引入了 @babel/preset-env 来动态管理编译程度。如果进入这个包而不做任何配置,则会默认把代码编译到 ES5 版本。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

重要的是这次 @babel/preset-env 仅包含了对已正式发布的 ES 规范的支持。如果要使用任一 stage-0 到 stage-3 中的特性或者 stage-4 中存在但是当年还未正式发布的特性,就必须安装相应的插件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

如果新特性以API的方式实现,就需要在polyfill中查看,polyfill中包含一个core-js列表专门包含了这些API。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

TC39怎么工作?什么是 ECMAScript ?Babel?2019JavaScript 新特性学习指南

巴别塔 - 维基百科,自由的百科全书文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

@babel/preset-env · Babel文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

@babel/Plugins · Babel文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

GitHub - zloirock/core-js: Standard Library文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

怎么搭配 TC39 和 Babel 来使用最新特性?

这就是本文的最终总结了,怎样尝试使用一个新的特性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

如果你在别人的代码里或者网络上发现一个你没见过的 JS 代码语法你应该怎么办呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

首先你应该尝试通过搜索引擎找到这种语法的正式名称。然后你就可以去 TC39 的 github 中找一下,你可以在 ecma-262 正式文档中找(不过这个文档太长了)也可以在 proposals 列表里找一下,别遗漏了 finished proposals 和 inactive proposales 列表,最终你就会找到这个语法的介绍和用例。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

接着你会想看一下这个语法在不同环境下的支持程度,所以你需要打开兼容性表格查询页面查找这个语法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

接着你也许会想尝试着编写一个用例并运行一下,那你需要在 Babel 的官网里查一下 plugins 列表里是否支持该语法,如果是新的 API 那就需要在 core-js 列表里找一下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

接着你就可以配置好 Babel 并编写用例,编译成浏览器兼容的代码,在浏览器里运行了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

学习 JS 参考页面总集

TC39 on GitHub - TC39 的 GitHub 帐号文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

ECMAScript® Language Specification - ECMAScript 最新修订版(当年准备发布的文档)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

ECMAScript® Language Specification - ECMAScript 最新正式版(已发布的最新文档)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

proposals - 提案列表文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

ECMAScript 6 compatibility table - 兼容性表格查询页面文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

@babel/Plugins · Babel - Babel 支持的语法插件列表文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

GitHub - zloirock/core-js - Babel polyfill 中支持的 API 列表文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

Exploring JS - 在线学习 JS 的网站作者挺牛的文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

ES.next News - ES 新闻订阅文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

写于2019年1月。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

作者:罗小黑写写文字
链接:https://juejin.im/post/5c346fe7f265da611510f823
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/9298.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/9298.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定