最佳 JavaScript 框架、库和工具及其使用场景

Rami Sayar

4.89/5 (6投票s)

2015 年 12 月 22 日

CPOL

12分钟阅读

30307

让我们来了解一下最佳的 JavaScript Web 前端框架、库和工具，以及何时使用它们。

似乎几乎每周都有一个新的 JavaScript 库席卷 Web 社区！Web 社区日益活跃、多元化，并在多个方面快速发展。要调查每一个主要的 JavaScript 框架和库几乎是不可能完成的任务。因此，我将分享一些最有名和最具影响力的用于前端开发的项目。所以，让我们来了解一下最佳的 JavaScript Web 前端框架、库和工具，以及何时使用它们。

还有

如果您最喜欢的 JavaScript 工具未在此列出，请不要介意。
请始终记住保持您的框架和库的更新。最新版本通常具有最佳的跨浏览器和跨设备支持。您可以使用此类扫描器来帮助确定旧版本是否与最广泛的设备兼容。

好了，开始列表吧！

AngularJS

Angular 是一个流行的企业级框架，许多开发人员都使用它来构建和维护复杂的 Web 应用程序。Angular 的普及度极高，使用它的公司也多种多样，包括 Domino's Pizza、Ryanair、iTunes Connect、PayPal Checkout、Google。Angular 是一个由 Google 支持的开源框架。Angular 将自己描述为 HTML 的扩展，用于构建复杂的 Web 应用。此外，如果您熟悉 TypeScript，那么 Angular 2 的编写方式就是如此。

Angular 是一个 MVC 类型框架。它在模型和视图之间提供双向数据绑定。这种数据绑定允许在数据发生变化时自动更新双方。它使您能够构建可重用的视图组件。它提供了一个服务框架，方便前后端服务器通信。最后，它只是纯粹的 JavaScript。

何时使用 AngularJS？ 当您正在构建一个复杂的 Web 前端应用程序，并且需要一个单一的模块化框架来处理所有事情时。

GitHub：https://github.com/angular/angular.js

当前版本 1.4.7/1.2.29

网站：angularjs.org

React

React 是今年的热门 JavaScript 项目！每个人似乎都在谈论 ReactJS。过去一年我参加过的每一次会议都有至少几场关于 React 和同家族其他库（Flux、Redux）的演讲。React 是开源的，主要由 Facebook 开发，其他主要科技公司也有贡献。React 将自己描述为一个用于构建用户界面的 JavaScript 库。

React 主要是 MVC 中的 V（视图）部分。它完全专注于 MVC 的这一部分，而忽略了您应用程序其余部分的架构。它提供了一个组件层，使创建 UI 元素和将它们组合在一起更加容易。它抽象了 DOM，从而优化了渲染，并允许您从 node.js 渲染 React。此外，它实现了一元响应式数据流，比其他框架更容易理解和使用。

作为 MVC 中的 V，许多项目会将 React 与 Angular 或 Ember 等结合使用。

何时使用 React？ 当您需要一个强大的视图层，但又不需要为应用程序的其余部分提供一个复杂的框架时，或者当您希望为您的 Angular、Backbone 或 Ember 应用程序提供一个视图层时。当您尝试构建一个同构 Web 框架时。

GitHub：https://github.com/facebook/react

当前版本：v0.14.0

网站：Facebook.github.io/react/

Backbone

Backbone 是一个非常简洁的框架，它包含在单个 JavaScript 文件中。Backbone 已经存在一段时间了；由 Jeremy Ashkenas（CoffeeScript 和 Underscore 的创作者）开发。Backbone 对于那些希望为小型 Web 应用程序提供简单结构的团队来说尤其受欢迎，而无需引入像 Angular 或 Ember 这样的大型框架。

Backbone 提供了一个完整的 MVC 框架以及路由功能。模型支持键值绑定和事件来处理数据变化。模型（和集合）可以连接到 RESTful API。视图具有声明式事件处理，路由器在处理您的 URL 和状态管理方面做得非常出色。它提供了构建单页应用程序所需的一切，但又不过于冗余，也没有不必要的复杂性。

何时使用 Backbone？ Backbone 是我用于简单 Web 应用程序的首选框架。

GitHub：https://github.com/jashkenas/backbone/

当前版本 1.2.3

网站：backbonejs.org

Ember

Ember 是一个注重程序员生产力的、有主见的 Web 应用框架。Ember 相对受欢迎，核心团队包括 Yehuda Katz 等聪明人，他曾是 Ruby on Rails 和 jQuery 核心团队的成员。Ember 将自己描述为“一个用于创建雄心勃勃的 Web 应用程序的框架”，它不会浪费您的时间。它非常有主见，并为您做了许多选择。

Ember 也是一个 MVC 框架。它包含一个模板和视图引擎，当数据更改时会自动更新，就像 Angular、Backbone 和 React 一样。它包含了 Web Components 的概念，允许您使用自己的标签扩展 HTML（就像 Angular 一样）。它还有一个路由和模型引擎，知道如何与您的 RESTful API 协同工作。

何时使用 Ember？ 当您只需要一个“即插即用”的框架时。当您不需要灵活性，因为您的预算有限或时间紧迫时，请使用 Ember。

GitHub：https://github.com/emberjs/ember.js

当前版本 2.1.0

网站：emberjs.com

JQuery

jQuery 是一个无需介绍的库。它单枪匹马地实现了跨浏览器网站的现实，并为 Web 带来了今天的样子。Web 标准已被大多数主要浏览器制造商采用并受到尊重，而 jQuery 是原因之一。jQuery 基金会的使命是“通过开源软件的开发和支持，以及与开发社区的合作，使开放 Web 更加完善，让每个人都能访问”。

jQuery 是全球使用最广泛的 JavaScript 库，除非您不喜欢程序员的生产力，否则任何应用程序都不应缺少它。它使得所有浏览器下的 DOM 遍历、事件处理、动画、AJAX 都变得更加简单易用。

何时使用 jQuery？ 随时随地，除非您想使用更轻量级的版本，例如 Zepto。

GitHub：https://github.com/jquery/jquery

当前版本：v1.11.3 或 v2.1.4

网站：jquery.com

Underscore & lodash

有时 JavaScript 内置的功能对程序员来说不够用，无法实现真正的生产力。总会缺少一个实用函数，或者一个能简化代码的函数。Underscore（和 lodash）是一个 JavaScript 库，提供了一整套实用函数，而无需“猴子补丁”JavaScript 内置对象。这两个库都提供了 100 多个函数式辅助函数和其他专用功能；包括 map、filter、invoke、reduce、template、throttle、bind、extend、pick、clone 等等。

何时使用 Underscore？ 当您想要一个立即提高程序员生产力的单个 JavaScript 文件时。

Underscore GitHub：https://github.com/jashkenas/underscore

Underscore 当前版本 1.8.3

Underscore 网站：underscorejs.org

何时使用 lodash？ 当您想要 Underscore 的模块化且性能稍好一些的版本，并且更容易支持 AMD 和社区插件时。

Lodash GitHub：https://github.com/lodash/lodash

Lodash 当前版本：v3.10.1

Lodash 网站：lodash.com

D3.js

数据可视化和图表是 Web 应用程序的常见需求。在任何数据操作和可视化方面，D3.js 都是事实上的标准。它是 GitHub 上最受欢迎的项目之一，被数百个组织使用。大量的图形、图表和可视化库都构建在 D3 之上。

D3 允许您处理来自任何来源的数据文档，并将其转换为 DOM、SVG 或 CSS。D3 专注于现代 Web 标准，并确保您摆脱了 Flash 或 Silverlight 等任何专有格式。

何时使用 D3.js？ 任何时候您需要任何形式的可视化。

GitHub：https://github.com/mbostock/d3

当前版本 3.5.6

网站：d3js.org

Babylon.js

想构建一个完全基于现代 Web 标准并在浏览器中运行的视频游戏吗？看看 Babylon.js，这是一个基于 WebGL 和 JavaScript 的 3D 游戏引擎。您可以创建具有物理、音频和粒子系统等功能的令人难以置信的高质量游戏。

何时使用 Babylon.js？ 任何时候您正在构建视频游戏或任何类型的复杂 3D 场景。

GitHub：https://github.com/BabylonJS/Babylon.js

当前版本 2.2

网站：babylonjs.com

Three.js

想构建 3D 可视化但不需要一个完整的游戏引擎？Three.js 提供了一个轻量级的 3D 库，允许将 3D 渲染到 HTML5 Canvas、SVG 和 WebGL。它是一个非常直接的库，并且在 three.js 展示区有数百个精美的示例。

何时使用 Three.js？ 任何时候您需要一个简单的 3D 可视化，并且可以输出到 Canvas。

GitHub：https://github.com/mrdoob/three.js/

当前版本：r73

网站：threejs.org

Mocha & Chai

长时间以来，测试 JavaScript 一直是一件非常令人头疼的事情。打消这个念头吧，测试任何代码通常都被认为是令人讨厌的，但却是每个开发人员都应该做的事情。与其测试他们的代码，不如每个开发人员似乎总是鄙视和忽略它。这种憎恨有一个解决办法，那就是 Mocha 和 Chai。虽然这两个库的名字都来自美味的热饮，但它们都以不同的方式帮助您测试代码。

Mocha 是一个 JavaScript 测试框架，可以轻松测试您的 node 模块或浏览器应用程序中的异步代码。Mocha 测试可以串行运行，并具有将异常追溯到正确测试用例的附加功能。

Chai 是一个行为驱动开发/测试驱动开发断言库，可以与 Mocha 配对使用。它使得以可读的风格表达您正在测试的内容变得简单。

何时使用 Mocha & Chai？ 永远！请测试您的代码，让世界变得更美好。

Mocha GitHub：https://github.com/mochajs/mocha

Mocha 当前版本2.3.3

Mocha 网站：mochajs.org

Chai GitHub：https://github.com/chaijs/chai

Chai 当前版本：v3.4.1

Chai 网站：chaijs.com

Karma

既然将 Mocha 和 Chai 包含在此列表中，那么不包含用于运行这些测试或设置持续集成测试的测试运行器将是不完整的。Karma 是一个旨在帮助自动化跨不同浏览器运行测试的工具。它将帮助您在所有浏览器上运行 Mocha 和 Chai 测试。

并非所有浏览器都在所有平台上运行，但幸运的是，有一些免费工具可供您测试其他浏览器，请查看 Browser Screenshots。如果您在 OS X 上运行并想测试 Edge 或 Internet Explorer，可以使用此免费工具。

何时使用 Karma？ 当您拥有应用程序的全面测试套件，并希望确保测试在所有浏览器上都能通过时。

GitHub：https://github.com/karma-runner/karma

当前版本：v0.13

网站：karma-runner.github.io

PhantomJS

运行完整的浏览器来测试代码会占用大量内存和 CPU。PhantomJS 允许您运行无头 WebKit - Safari 和以前的 Chrome（现在是 Blink）背后的渲染引擎。它使您能够通过 JavaScript API 运行测试、捕获屏幕截图、监控网络和自动化页面浏览。

何时使用 PhantomJS？ 当您需要进行更多测试、操作页面和监控网络请求时。

GitHub：https://github.com/ariya/phantomjs

当前版本：v2.0

网站：phantomjs.org

Grunt & Gulp

为生产环境构建网站通常涉及一些提高性能的任务，例如 JavaScript 和 CSS 的最小化、CoffeeScript/TypeScript 的编译、单元测试、代码检查。您可能已经有一个现成的工具链来准备您的网站以供生产使用，但如果您还没有，则希望使用 Grunt 或 Gulp 等任务运行器。两者都有无数的插件可以对您的网站进行几乎任何转换，使其准备好投入生产。

何时使用 Grunt？ 当您更喜欢编写配置文件，并且不介意您的任务运行器生成中间文件时。

Grunt GitHub：https://github.com/gruntjs/grunt

Grunt 当前版本：v0.4.5

Grunt 网站：gruntjs.com

何时使用 Gulp？ 当您更喜欢编写代码而不是配置，并希望利用 Node.js 的流能力来实现更快的任务执行时。

Gulp GitHub：https://github.com/gulpjs/gulp

Gulp 当前版本：v3.9.0

Gulp 网站：gulpjs.com

Babel

JavaScript 语言本身正在快速发展。ECMAScript 2015 于去年夏天发布，其许多新功能已在最新浏览器中实现。如果您想了解 ECMAScript 2015 的兼容性，可以查看 @kangax 的表格。您会注意到，Edge、Firefox 和 Chrome 的最新版本兼容性几乎是完整的。

我们生活在一个不完美的世界。作为开发人员，我们将需要继续支持那些没有最新、最棒 JavaScript 功能的旧浏览器。我们确实希望推动 Web 的发展并改进我们的代码库。Babel 是一个 JavaScript 编译器，它将最新的 JavaScript 标准编译成符合 ES5 标准的 JavaScript，允许您在 IE9 等旧浏览器上运行。它提供了一些插件，可以更轻松地使用 React 进行开发，甚至可以使用不属于规范的功能（例如 ES7）。

何时使用 Babel？ 当您想使用新的 JavaScript 语言功能，同时仍然支持旧浏览器时。

GitHub：https://github.com/babel/babel

当前版本6.1.2

网站：babeljs.io