本节目录
1.4 如何应对 JavaScript 的不同版本 How do we work with JavaScript?
上面介绍的语言特性都很不错,但正如前文提到的那样,适用性最广的 JavaScript
的版本,往往并不是最新的 ES13
,而更有可能是早期的 JS5
。这当中 Node.js
算个例外。它基于 Chrome
浏览器的 V8
高性能 JavaScript
引擎。该引擎已经实现了多项 ES13
特性。尽管如此,截至目前(2023 年 5 月),V8
引擎对 ES13
特性的覆盖率仍达不到 100%,总会有一些特性缺失(更多 Node.js
和 V8
信息,详见 https://nodejs.org/en/learn/getting-started/ecmascript-2015-es6-and-beyond)。这种情况今后肯定会改变,因为 Internet Explorer
浏览器将逐渐淡出人们的视野(对它的支持已于 2022 年 6 月正式结束),取而代之的,是共享 Chrome
引擎的 Microsoft Edge
浏览器。无论如何,就目前而言,我们仍须同旧的、效率较低的 JS
引擎打交道。
怎样在当前可用的早期版本中尝鲜新的语言特性呢?或者,如果您的大多数用户使用的是旧版浏览器,不支持您推崇备至的那些花哨的特性,该如何是好?让我们来看看一些现成的解决方案。
若要在尝试任何特定的新特性之前进行选择,可以查看 https://compat-table.github.io/compat-table/es6/ 上的兼容性列表(如 图1.1 所示);查看 Node.js
规范,详见 http://node.green/。
【图 1.1 JavaScript 的最新特性可能无法全面支持,使用前需要检查一下】
1.4.1. 使用转译工具 Using transpilers
为了解决可用性和兼容性的问题,可以使用一些 转译工具(transpilers
)。转译器将您的原始 ES10
代码(可能涉及最新的 JavaScript
特性)转换为等效的 JS5
代码。这是一个从源码到源码(source-to-source
)的转换,而不是编译过程使用的源码到对象(source-to-object
)的方式。编码时可以用高级 ES10
特性,而用户的浏览器接收的是 JS5
代码。尽管浏览器在桌面端和移动端采用新标准尚需时日,转译器可以让您同步到即将发布的语言版本。
关于 transpiler
一词的来历,它是 translate
和 compiler
的结合体。类似的组合在技术领域屡见不鲜:电邮 email
(electronic
与 mail
的组合)、表情符号 emoticon
(emotion
和 icon
的组合)、恶意软件 malware
(malicious
与 software
的组合)以及字母数字 alphanumeric
(alphabetic
与 numeric
的组合)……不一而足。
最常见的 JavaScript
转译器是 Babel
(详见 https://babeljs.io/)和 Traceur
(详见 https://github.com/google/traceur-compiler)。结合 npm
或 webpack
等工具,相关配置十分轻松,可将代码自动转译成终端用户需要的版本。您也可以在线转译,如 图 1.2 所示的 Babel 在线转译环境示例:
【图 1.2 Babel 在线转译器将 ES10 代码转译为兼容的等效 JS5 代码示意图】
如果喜欢 Traceur
,可以在 https://google.github.io/traceur-compiler/demo/repl.html# 进行尝试,不过需要在开发者控制台查看转译后的代码结果(图 1.3 为转译后的代码示例)。选中 EXPERIMENTAL
选项来启用 ES10
特性:
【图 1.3 Traceur 转译工具是 ES10 转 JS5 的另一种行之有效的替代方案】
小贴士
了解转译工具也是学习新语言特性的绝佳途径。在左边敲入代码即可在右边得到等效的转译代码。此外,还可以使用命令行工具来转译源代码,对比查看输出的结果。
最后还有一种方案:选用 Microsoft
的 TypeScript
(http://www.typescriptlang.org/),而不是 JavaScript
。它是 JavaScript
的超集,可以被编译为 JS5
的代码。TypeScript
的主要优点是能够向 JavaScript
选择性地添加静态类型检查,这有助于在编译时检测某些代码问题。注意:与 Babel
或 Traceur
一样,并非所有 ES10
语言特性都支持。
除了
TypeScript
,还可以使用Flow
进行类型检查(详见 https://flow.org)。
若选用 TypeScript
,可以利用其 playground
训练场模块进行线上功能测试(详见 http://www.typescriptlang.org/play/)。TypeScript
可以对类型检查的严格程度进行配置,也可以实时运行代码,如 图 1.4 所示:
【图 1.4 TypeScript 新增的类型检查特性有助于更安全地编写代码】
通过使用 TypeScript
,可以规避掉一些常见的类型方面的错误。当下有个积极的趋势,是大多数工具(框架、库等)正在慢慢朝这个方向发展,从而使今后的编码工作越来越轻松。
1.4.2. 应用在线环境 Working online
网上有不少工具可以用来测试 JavaScript
代码,比如 JSFiddle
(https://jsfiddle.net/)、CodePen
(https://jsbin.com/)等等。您需要设定是否使用 Babel 或 Traceur,否则新语言特性将不生效。如 图 1.5 中的 JSFiddle
示例:
【图 1.5 JSFiddle 可以在无需引入其他工具的情况下试验新的 JavaScript 特性(带 HTML 及 CSS)】
这些工具的应用为我们快速尝试新特性、试验新功能提供了新的途径——这一点我可以保证,因为本书大部分代码就是采用这种方式进行测试的结果!
1.4.3. 测试环境 Testing
本书也会涉及测试方面的知识,毕竟易于测试是函数式编程的主要优点。本书之前的版本用的测试框架为 Jasmine
(https://jasmine.github.io/),这一版改用 Facebook 的 Jest
(jestjs.io/)框架——一款基于 Jasmine
构建的新测试框架。
Jest
以其卓越的易用性与广泛的适用性而持续受到热捧:无论是前端应用还是后端代码,几乎不需要什么配置就能进行同等效果的测试(更多安装配置详情,可参阅 jestjs.io/docs/getting-started)。本书不会对每一段代码编写测试用例,但遵循 测试驱动开发(test-driven development, 即 TDD) 的观点,大多数情况还是会考虑测试的。