【玩转 JS 函数式编程_004】1.4 如何应对 JavaScript 的不同版本

发布于:2024-10-10 ⋅ 阅读:(70) ⋅ 点赞:(0)

1.4 如何应对 JavaScript 的不同版本 How do we work with JavaScript?

上面介绍的语言特性都很不错,但正如前文提到的那样,适用性最广的 JavaScript 的版本,往往并不是最新的 ES13,而更有可能是早期的 JS5。这当中 Node.js 算个例外。它基于 Chrome 浏览器的 V8 高性能 JavaScript 引擎。该引擎已经实现了多项 ES13 特性。尽管如此,截至目前(2023 年 5 月),V8 引擎对 ES13 特性的覆盖率仍达不到 100%,总会有一些特性缺失(更多 Node.jsV8 信息,详见 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.1 JavaScript 的最新特性可能无法全面支持,使用前需要检查一下】

1.4.1. 使用转译工具 Using transpilers

为了解决可用性和兼容性的问题,可以使用一些 转译工具transpilers)。转译器将您的原始 ES10 代码(可能涉及最新的 JavaScript 特性)转换为等效的 JS5 代码。这是一个从源码到源码(source-to-source)的转换,而不是编译过程使用的源码到对象(source-to-object)的方式。编码时可以用高级 ES10 特性,而用户的浏览器接收的是 JS5 代码。尽管浏览器在桌面端和移动端采用新标准尚需时日,转译器可以让您同步到即将发布的语言版本。

关于 transpiler 一词的来历,它是 translatecompiler 的结合体。类似的组合在技术领域屡见不鲜:电邮 emailelectronicmail 的组合)、表情符号 emoticonemotionicon 的组合)、恶意软件 malwaremalicioussoftware 的组合)以及字母数字 alphanumericalphabeticnumeric 的组合)……不一而足。

最常见的 JavaScript 转译器是 Babel(详见 https://babeljs.io/)和 Traceur(详见 https://github.com/google/traceur-compiler)。结合 npmwebpack 等工具,相关配置十分轻松,可将代码自动转译成终端用户需要的版本。您也可以在线转译,如 图 1.2 所示的 Babel 在线转译环境示例:

图 1.2 Babel 在线转译器将 ES10 代码转译为兼容的等效 JS5 代码示意图

【图 1.2 Babel 在线转译器将 ES10 代码转译为兼容的等效 JS5 代码示意图】

如果喜欢 Traceur,可以在 https://google.github.io/traceur-compiler/demo/repl.html# 进行尝试,不过需要在开发者控制台查看转译后的代码结果(图 1.3 为转译后的代码示例)。选中 EXPERIMENTAL 选项来启用 ES10 特性:

图 1.3 Traceur 转译工具是 ES10 转 JS5 的另一种行之有效的替代方案

【图 1.3 Traceur 转译工具是 ES10 转 JS5 的另一种行之有效的替代方案】

小贴士

了解转译工具也是学习新语言特性的绝佳途径。在左边敲入代码即可在右边得到等效的转译代码。此外,还可以使用命令行工具来转译源代码,对比查看输出的结果。

最后还有一种方案:选用 MicrosoftTypeScript(http://www.typescriptlang.org/),而不是 JavaScript。它是 JavaScript 的超集,可以被编译为 JS5 的代码。TypeScript 的主要优点是能够向 JavaScript 选择性地添加静态类型检查,这有助于在编译时检测某些代码问题。注意:与 BabelTraceur 一样,并非所有 ES10 语言特性都支持。

除了 TypeScript,还可以使用 FacebookFlow 进行类型检查(详见 https://flow.org)。

若选用 TypeScript,可以利用其 playground 训练场模块进行线上功能测试(详见 http://www.typescriptlang.org/play/)。TypeScript 可以对类型检查的严格程度进行配置,也可以实时运行代码,如 图 1.4 所示:

图 1.4 TypeScript 新增的类型检查特性有助于更安全地编写代码

【图 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.5 JSFiddle 可以在无需引入其他工具的情况下试验新的 JavaScript 特性(带 HTML 及 CSS)】

这些工具的应用为我们快速尝试新特性、试验新功能提供了新的途径——这一点我可以保证,因为本书大部分代码就是采用这种方式进行测试的结果!

1.4.3. 测试环境 Testing

本书也会涉及测试方面的知识,毕竟易于测试是函数式编程的主要优点。本书之前的版本用的测试框架为 Jasminehttps://jasmine.github.io/),这一版改用 Facebook 的 Jestjestjs.io/)框架——一款基于 Jasmine 构建的新测试框架。

Jest 以其卓越的易用性与广泛的适用性而持续受到热捧:无论是前端应用还是后端代码,几乎不需要什么配置就能进行同等效果的测试(更多安装配置详情,可参阅 jestjs.io/docs/getting-started)。本书不会对每一段代码编写测试用例,但遵循 测试驱动开发(test-driven development, 即 TDD) 的观点,大多数情况还是会考虑测试的。


网站公告

今日签到

点亮在社区的每一天
去签到