现代 JavaScript：概念和工具

现代 JavaScript 最棒的一点就是其多样性。有数百个 JavaScript 项目填补了大多数用户（99%）都意识到的空白。此外，还有许多其他的 JavaScript 项目解决了只有其所有者或一小部分用户才知道的边缘情况。这导致了许多 JavaScript 社区成员所谓的“JavaScript 疲劳”：由于每天都有新的 JavaScript 项目出现，学习曲线永无止境。

你不必因为无法跟上所有提供更快、更好或更先进的解决方案的项目而放弃 JavaScript。学习现代 JavaScript 的基础知识，不仅可以更有效地创建和理解 JavaScript，还可以快速筛选掉成千上万不符合你需求的 JavaScript 项目。

基本核心功能

如果你想跟上现代 JavaScript 的步伐，以下是每个开发者都应该熟悉的要点和功能总结。

• 箭头函数是编写函数的简洁方式。它们消除了在单个表达式中使用“return”关键字的必要性，同时保留了 this 的上下文。
• Promises（Promises）： Promises 使异步操作更易于处理，因此你可以按顺序执行操作或干净地捕获错误。
• Async/Await： 它通过使你的异步代码看起来和运行起来都像同步代码，从而简化了 Promises 的使用。
• Modules（模块）： 模块使代码更清晰、更模块化。它们将代码划分为可重用的部分，这些部分可以从一个文件导出并在另一个文件中导入。

这些概念构成了现代 JavaScript 编程的基础，简化了代码并提高了可读性。

ECMAScript

JavaScript 基于一项称为 ECMAScript 的规范。因此，JavaScript 引擎使用 ECMAScript 作为蓝图来实现和支持规范中概述的功能。浏览器和其他环境需要 JavaScript 引擎来执行 JavaScript 代码。

ECMAScript 或 ES 的版本很重要，因为它们包含了增加语言功能和易用性的新特性。值得注意的是，直到 2015 年 ES6 发布以及 1999 年 ES3 发布之前，ES 版本基本保持不变。这表明 JavaScript 受益于长时间的特性稳定性。

ECMAScript 版本及其引用的完整列表如下所示。

• ECMAScript 1 或 ES1 于 1997 年 6 月发布。
• ECMAScript 2 或 ES2 于 1998 年 6 月发布。
• ECMAScript 3 或 ES3 于 1999 年 12 月发布。
• ES4 或 ECMAScript 4。- 被放弃。
• ES5（2009）：它引入了 Object.keys 和 Array.prototype.forEach 等有用的方法。
• ES6/ES2015：2015 年，类、箭头函数和 Promises 等功能可用。
• ES2016-ES2022（2016–2022）：它包括 async/await、可选链和空值合并等其他功能。async/await、可选链和空值合并。

JavaScript 随着每个新版本获得新功能，从而改善和扩展其功能。

Polyfills 和 Shims（垫片和填充）

Polyfill 是一种软件，它实现了浏览器本应内置的功能。与 Shim（提供功能来完成旧项目的某些新功能，而你不想丢弃它）不同，Polyfill 提供功能来完成某些新功能，因为尚不支持它。这就是 Polyfill 的“填充”含义；它弥补了缺失的功能。许多现代 JavaScript 库（如 Angular 和 Web Components）依赖 Polyfills 来在尚未原生支持某些现代 JavaScript 功能的浏览器上运行。

在技术和非技术领域，“shim”（垫片）一词可以互换使用。“Shim”一词指的是用于调平不稳定的桌椅的木质或纸质装置。在技术行业中，Shim 是一种软件，它可以在不断变化的需求下保持旧组件或 API 的运行。ES7 Shim 是一种特殊的 JavaScript Shim，它使较早的 JavaScript 引擎的运行方式与 JavaScript ES7 标准相似。如果你使用的应用程序是 ES7，你可以使用 ES7 Shim 来让旧浏览器理解 ES7 功能。

JavaScript 中的压缩器和压缩工具

它消除了像 Java 和 C# 这样的编程语言在开发和执行之间所需额外编译阶段的要求。

JavaScript Minifier 是一种专门用于压缩 .js 源文件的程序。Minifier 有两种类型：独立式和集成式。有些 Minifier 设计为手动操作，而另一些则集成到更广泛的工作流程中。

“.js”源文件及其压缩后的 `.min.js` 版本之间的区别在于，后者具有人类难以阅读的结构，并且比前者小约 30% 到 60%。在其最基本的形式下，压缩会从“.js”文件中删除空格、换行符和其他可读性特征。然而，许多压缩工具甚至会更改.js 文件中的变量和函数引用，以期达到更好的效果。

JavaScript 中的混淆器

需要记住的是，当涉及到修改.js 文件时，该过程也属于混淆。在 JavaScript 的早期，Minifiers 和 Obfuscators 是独立的工具，但随着 JavaScript 的发展，Minifiers 已经包含了大多数 Obfuscators 提供的基本功能。尽管如今仍有一些独立的 JavaScript Obfuscators 可用，但这些工具主要专注于更高级的混淆方法，旨在阻止逆向工程和知识产权盗窃。

JavaScript 中的源代码映射

Source Maps 是 Minifiers 的一个有用的补充。当 .js 文件被压缩成 .min.js 文件时，原始的 .js 文件（可能包含数千行）会被压缩成单行。让我们谈谈 Source Maps。Source Map 是通常在压缩过程中创建的文件，扩展名为 .map。它的目的是包含原始 .js 文件与其压缩后的 .min.js 版本之间的映射。Source Maps 标识了原始 .js 文件中任何错误的精确位置，以便在 .min.js 文件中出现错误时可以立即进行修复。

Transpilers（转译器）和 Transpiling（转译）

将源代码转换为不同类型代码的过程称为“transpiling”（转译）。从技术上讲，转译是一种特殊的编译过程。与编译源代码以将其转换为机器码以便运行的编译不同，转译仅在编程语言之间修改源代码。随着生成 JavaScript 的语言的兴起，转译已变得普遍。

转译器有多种应用。转译过程可以作为应用程序构建过程的一部分进行，确保所有内容都部署为纯 JavaScript；或者，它可以被添加到网页中，并在最终用户的浏览器中完成。

需要注意的是，虽然将转译器集成到网页中会增加用户的浏览器负担，但这应该仅用于开发。由于浏览器无需进行转译过程，因此建议在生产环境中将转译器作为构建过程的一部分，以将纯 JavaScript 发送到用户浏览器。

命名空间、模块和模块类型

JavaScript 的早期版本不使用 import/export/include 声明，因为至少直到最近，它才缺乏这些声明。在 JavaScript 的早期，模块和命名空间仅通过一种临时的机制得到支持，该机制将构造函数包含在一个变量中，该变量为所有内容生成一个伪命名空间。

模块对编程语言至关重要，因为它们将功能分离到独立的单元中（例如，一个用于处理 XML 的模块，另一个用于处理 JSON）。这使得可以独立修改这些单元并将它们作为构建块集成到更大的项目中。模块还带有命名空间的概念，为模块内的每个变量、函数、类或构造函数分配唯一的标识符。

此时抱怨创建了如此多的不同 JavaScript 模块类型是徒劳的；事实是它们确实存在，而且你必须适应它们。以下是不同的 JavaScript 模块方法，顺序不分先后。

• 使用 exports 和 require 关键字。Node JS 包大量使用 CommonJS。Node JS 包大量使用 CommonJS。
• 异步模块定义 (AMD)。AMD 异步加载 JavaScript 模块。AMD 确保 JavaScript 模块在后台加载，而不会导致程序在加载过程中“冻结”。
• 通用模块定义 (UMD) - 似乎 UMD 支持 AMD 和 CommonJS 的功能。
• 原生 ES6 (ES2015) 模块。- 直到 ECMAScript 6 发布，JavaScript 才有其原生模块语法。它是在其他模块方法之后很多年实现的。ES6 模块提供 AMD（异步加载）和 CommonJS（紧凑且声明式语法）的特性，以及一些额外的处理循环依赖项的功能。

模块加载器和打包器

模块加载器负责协调 JavaScript 模块之间可能出现的任何差异。这意味着一个应用程序可以同时使用 ES6 和 CommonJS 模块，并且加载器会使它们协同工作。此外，模块加载器负责转译过程，该过程将 TypeScript 或 JSX 代码转换为标准 JavaScript。

模块打包器通常与模块加载器是同一个软件。由于它将应用程序的模块统一到一个模块中，因此模块打包器很有用。SystemJS、RequireJS、webpack 和 Browserify 是一些更知名的模块加载器和打包器。

结论

借助现代 JavaScript 原则和工具，开发速度更快、更可靠、更易于扩展。至关重要的是要跟上 JavaScript 生态系统中最新的发展，以创建高效、稳定且性能优越的应用程序。你正在使用 ES6+ 特性来实现更清晰的语法，或者使用 webpack、TypeScript 或测试库等强大工具。