好用的JavaScript库和框架

javascript 已经存在了 20 多年，它是那些永不停止发展的语言之一。该语言最近一直在快速发展，这让我想知道今天众所周知的现代前端 JavaScript 技术是否会在几年后变得相关。 

尽管如此，通过使用最新的工具和框架来获得更好的开发工作流程，领先于游戏是很重要的。本文探讨了您现在应该考虑学习的各种 javaScript 库、框架和工具。

这是这篇文章中库和框架的快速索引：

Frameworks

• react

• vue

• Ember.js

• angular

• Next.js

• Svelte

• ionic

• Gatsby

• Meteor.js

• Express

Libraries

• jquery

• chart.js

• Three.js

• D3

• Anime.js

Task Runners

• Gulp

• ESLint

• Babel

• Grunt

• webpack

Testing

• Jest

• Jasmine

• Mocha

介绍

JavaScript 环境已经变得巨大。它有自己的库、框架、工具、包管理器和编译成 JavaScript 的新语言的生态系统。有趣的是， npm是事实上的 JavaScript 包管理器，也是世界上最大的软件注册中心。这是2017 年 1 月在Linux.com上发布的帖子的摘录。

在超过 350,000 个包中，npm 注册表包含的包注册表是第二个填充最多的包注册表（即 Apache Maven 存储库）的两倍多。事实上，它是目前世界上最大的包注册中心。

仅仅八个月后，npm 注册表中就有大约 500,000 个包。与其他软件包存储库相比，这是一个巨大的增长。 

资料来源： ModuleCounts.com

作为前端 JavaScript 开发人员，跟上现代 JavaScript 工具和库的步伐很重要。当一项技术变得流行时，对它的需求就会很高，这反过来意味着更多的编码工作可以支付业内最高的薪水。因此，我整理了一份我认为您应该了解的流行 JavaScript 技术的列表。 

构架

框架的架构决定了应用程序中的控制流。该框架描述了框架并告诉您应该如何组织所有内容。还为您提供了启动和运行应用程序所需的基本功能。此外，您必须遵循框架的设计原则和模式。框架和库之间的区别在于您调用库，而框架调用您。 

一个框架通常包含许多库并具有更高的抽象级别。诸如事件处理、进行ajax调用、模板和数据绑定以及测试等功能都内置在框架中。  

反应

React 是由 Facebook 和 Instagram 的开发人员构建的 JavaScript 库。React 一直被评为开发人员最喜爱和最受欢迎的技术之一。

那么为什么 React 会受到所有关注呢？使用 React，可以使用声明性 方法创建交互式 UI  ，您可以通过说“视图应该看起来像这样”来控制应用程序的状态。它使用基于组件的模型，其中组件是可重用的 UI 元素，每个组件都有自己的状态。

React 使用虚拟 dom，因此您不必担心直接操作 DOM。React 的其他显着特性包括单向数据流、可选的jsx语法和用于创建零构建配置的 React 项目的命令行工具。 

角

Angular 曾经是前端开发人员中最流行的 JavaScript 技术。它仍然被广泛使用，并得到谷歌以及个人和公司社区的支持。 

Angular 的一些特性包括：

• typescript over JavaScript 作为默认语言

• 基于组件的架构

• 提高移动和网络平台的性能

• 更好的工具和脚手架选项

Vue.js

Vue.js 框架已经流行了好几年。就 GitHub 星数而言，它也是 GitHub 上最受欢迎的 JavaScript 框架。Vue 声称自己是一个不那么固执己见的框架，因此开发人员很容易赶上。Vue 基于 html 的模板语法将渲染的 DOM 绑定到实例数据。 

该框架通过其虚拟 DOM 和可重用组件提供了类似 React 的体验，您可以使用这些组件来创建小部件和整个 Web 应用程序。此外，您可以使用 JSX 语法直接编写渲染函数。当状态发生变化时，Vue.js 使用反应系统来确定发生了什么变化并重新渲染最少数量的组件。Vue.js 还支持将其他库轻松集成到框架中。

Next.js

Next.js 自称为“用于生产的 React 框架”，是一个基于 React 的框架，它添加了新功能，包括服务器端渲染和静态网站生成。React 是一个 JavaScript 包，通常用于创建在客户端浏览器中使用 JavaScript 呈现的 Web 应用程序。它为您提供最好的开发人员体验，以及生产所需的所有功能。

Ember.js

Ember.js 是一个 Javascript 框架，通过利用现有单页应用生态系统模式中的语言、最佳实践和模式，帮助开发人员构建可扩展的单页 Web 应用程序。它通过提供包括数据管理和应用程序流的综合解决方案来支持客户端 JavaScript 应用程序的开发。

苗条

与 React 和 Vue 等传统框架在浏览器中完成大部分工作不同，Svelte 将这些工作转移到构建应用程序时发生的编译步骤中。这使其成为用户界面开发的有用选项。

离子

ionic是一个免费的开源框架，它提供了一个针对移动设备优化的 UI 组件、手势和工具库，用于创建高速、高交互性的应用程序。它允许您创建混合移动应用程序。

盖茨比

这个开源的静态网站生成器使用webp ack 和 graphql 技术，建立在 React 前端开发框架之上。您可以使用 Gatsby 创建渐进式 Web 应用程序以及快速且安全的静态站点。它被多个知名组织使用，包括 Tinder、Snapchat 和 Affirm，并且在构建网站时非常快速和灵活。

流星.js

Meteor.js 是一个免费的 JavaScript 框架，用于开发 Web 和移动应用程序。Meteor 既方便又流行，而且它有一个反应式 UI。如果您是一位经验丰富的开发人员，那么您应该尝试 Meteor.js。它具有快速便捷的开发过程。

Meteor 尤其适用于为客户端和服务器编写具有共享代码库的全栈应用程序。

表达

Express 是一种流行且功能强大的工具，可用于为任何 Web 应用程序编写服务器端代码。它既免费又开源。它用于快速轻松地设计和创建 Web 应用程序。

图书馆

库是提供某些功能的可重用代码。它是您可以在应用程序中使用的函数、对象和类的集合。库抽象了不同的层，因此您不必担心它们的实现细节。 

您可以调用库函数并向其传递一些参数，然后库执行它并将控制权返回给您。但是，它不会设置任何限制您如何使用该库的结构约束。流行的 JavaScript 库包括：

jQuery

jQuery 是一个库，它使 JavaScript 比以前更容易上手，并且 DOM 操作更容易。jQuery 温和的学习曲线和简单的语法催生了新一代的新客户端开发人员。几年前，jQuery 被认为是构建具有跨浏览器支持的健壮网站的可靠解决方案。jQuery 的核心特性，例如基于css选择器的 DOM 操作、事件处理和进行 AJAX 调用，推动了它的流行。 

然而，事情发生了变化，JavaScript 环境也在稳步发展。jQuery 的一些特性已被合并到较新的 ECMAScript 规范中。此外，当今使用的新库和框架具有绑定 DOM 的本地方式，因此不再需要简单的 DOM 操作技术。jQuery 的流行度正在下降，但我认为它不会很快消失。

D3：数据驱动的文档

D3（或 D3.js）是一个强大的 JavaScript 库，用于使用svg、HTML 和 CSS等 Web 标准生成交互式可视化。与其他可视化库不同，D3 提供了对最终可视化结果的更好控制。 

D3 通过将数据绑定到 DOM，然后对文档进行转换来工作。它还拥有自己的生态系统，由扩展其基本功能的插件和库组成。该库自 2011 年以来一直存在，它有大量的文档和教程可以帮助您入门。 

图表.js

这个漂亮的 JavaScript 库旨在使开发人员和设计人员能够使用 JavaScript 轻松地可视化数据。chart .js 是使用最广泛的数据可视化包之一，也是最用户友好的包之一。使用最少的代码，Chart.js 为您的数据创建即用型交互式视觉效果。

动漫.js

使用简单但功能强大的 Anime.js 动画库，您可以在 CSS 属性以及 SVG 图像和 DOM 属性上创建范围广泛的动画。您可以在此处阅读有关 Anime.js 的更多信息。

三.js

Three.js 是一个 JavaScript 库，用于在 Web 浏览器中创建和动画化 3D 计算机图像。它是一个单一的 JavaScript 文件，其中包含效果、设置、相机、灯光、材质、模型、着色器、动画和 3D 对象等。

工具

工具是在开发过程中帮助您的例程的集合。与库不同，工具通常在客户端代码上执行任务。它将您的代码作为输入，对其执行任务，然后返回输出。常用的工具包括转译器和构建工具、资产压缩器、模块捆绑器和脚手架工具。 

通用任务运行器

通用任务运行器是用于自动化某些重复性任务的工具。流行的通用任务运行器包括：

吞咽

Gulp 是一个 JavaScript 工具包，用作任务运行器和 Web 开发中的构建系统。编译、代码缩小、图像优化、单元测试和 linting 等重复性任务应该是自动化的。Gulp 使编写任务的过程更容易，即使对于不太熟悉 JavaScript 的人也是如此。 

Gulp 使用管道将数据从一个插件流式传输到另一个插件，并将最终结果输出到目标文件夹。与 Grunt 相比，Gulp 性能更好，因为它不会创建临时文件来存储中间结果，从而减少了 I/O 调用。

咕噜声

Grunt 任务运行器和自动化工具有一个命令行界面，可让您运行在名为 Gruntfile 的文件中定义的自定义任务。Grunt 有数以千计的插件可供选择，它们应该涵盖了您会遇到的大部分常见的重复性任务。使用 Grunt，您可以在一个命令下运行所有任务，让您的生活更轻松。

npm

Gulp 和 Grunt 要求您花时间学习和掌握新工具，这需要时间。通过选择已经与node .js捆绑的替代方案，可以避免在项目中引入额外的依赖项。尽管 npm 以包管理器而闻名，但 npm 脚本可用于执行上述大部分任务。 

ESLint

ESLint 是一个可插入的 JavaScript 工具，它可以分析您的代码以发现可能导致代码中的错误或不一致的问题。

更漂亮

Prettier 是一个有强烈意见的代码格式化程序。它通过分析您的代码并根据其标准重新打印它来强制执行一致的样式，该标准考虑了最大行长度并根据需要包装代码。它适用于多种语言，并且可以与您喜欢的一些编辑器集成。

网页包

使用 Webpack 模块捆绑器，您可以捆绑 JavaScript 文件以在浏览器中使用，Webpack 还可以修改和捆绑您的样式和资产。

通天塔

Babel 是一个免费的开源 JavaScript 编译器，可以将新的语言特性转换为旧的特性。它也被称为“转译器”。如果您只使用捆绑器，任何人都可以编写使用所有现代 JavaScript 功能但无需使用 Babel 即可在旧浏览器上运行的代码。 

测试工具

测试是验证和验证应用程序是否满足预期的业务和技术要求的过程。测试驱动开发方法还有助于发现错误，因此应该被视为现代前端开发堆栈的一个组成部分。

有

Jest 是由 Facebook 编写的一个相对较新的测试框架，受到 React 社区的好评。有一个普遍的误解认为 Jest 是专门为与 React 一起工作而设计的。但是，根据 Jest 文档：

虽然 Jest 可能被认为是特定于 React 的测试运行器，但实际上它是一个通用的测试平台，能够适应任何 JavaScript 库或框架。您可以使用 Jest 测试任何 JavaScript 代码。

与其他测试套件相比，使用 Jest 的最大优势是您需要零或最少的配置来开始编写测试。该框架有一个内置的断言库，并支持使用模拟函数或间谍。

Jest 有一个称为快照测试的功能，可让您确保应用程序的 UI 不会意外更改。Facebook 的开发人员和其他贡献者最近为这个项目投入了大量的工作，所以如果 Jest 成为未来几年最流行的 JavaScript 测试框架也就不足为奇了。

摩卡

这个 JavaScript 测试框架具有浏览器支持、异步支持（包括 Promise）、测试覆盖率报告和用于运行测试的 JavaScript api。Mocha 通常与 Chai、should.js、expect.js 或 better-assert 等断言库配对使用，因为它缺乏自己的断言库。

茉莉花

Jasmine 是一个行为驱动的 JavaScript 测试框架。Jasmine 旨在成为一个独立于浏览器、平台和框架的测试套件。Jasmine 有自己的断言库，称为匹配器，它为它提供了简洁易读的语法。Jasmine 没有内置的测试运行器，您可能不得不使用像 Karma 这样的通用测试运行器。 

概括

JavaScript 是一种网络语言，自 1995 年问世以来一直保持相关性。只要浏览器不决定放弃它而使用另一种语言，它就可能会保持这种状态。尽管有很多其他语言可以编译成 JavaScript，但在可预见的将来没有其他脚本语言可以取代 JavaScript。为什么？因为 JavaScript 已经变得太流行而无法替代。