14个优秀 JS 前端框架、库、工具及其使用时机-前端js框架

这篇文章主要描述现今流行的一些 Javascript web 前端框架，库以及它们的适用场景。

新的 Javascript 库层出不穷，从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 Javascript 框架和库近乎不可能，所以在这篇文章中主要介绍一些对前端发展***影响力的前端框架。接下来让我们来共同研究一些主流前端框架、库和工具，并讨论它们的适用场景。

同时：

如果该篇文章没有包含你喜欢的 Javascript 框架，勿喷
在使用前端框架进行开发时，建议保持版本更新。***版本的一般都会提供给更好的跨浏览器，跨平台效果。需检测某个框架的旧版本是否对各种浏览器以及设备的兼容，请使用类似这个扫描器的工具

准备好了吧，那么接下来逐个讨论它们。

AngularJS

Angular 是一款流行的企业级框架，很多程序员都用它来构建和维护复杂的网页应用。Angular 拥有巨大的人气，使用它的公司跟 Domino 的 Pizza 种类一样多，如 Ryanair, iTunes Connect, PayPal Checkout, Google。Angular 是一个由 Google 支持的开源框架。Angular 称自己为构建复杂网页应用而对 HTML 的扩展。如果你也对 TypeScript 很熟悉，那么可以看看怎样写 Angular 2 .

Angular 采用 MVC 架构。它提供了 Model 层和 View 层之间双重数据绑定。这种数据绑定方式的好处是不管哪边数据改变，都会自动的更新两边的数据。这有助于你构建可服用的 View 组件。它还提供了一个前后端服务易于交互的服务框架。最重要的是，它是简单的 JavaScript。

什么时候使用 AngularJS? 当你构建一个复杂的网页前端应用并需要一个单独的模块框架去处理一切时。

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

Current Version:1.4.7/1.2.29

Website: angularjs.org

React 是今年***的 JavaScript 项目！几乎人人都在谈论 ReactJS。去年，我参加的每一个会几乎都会有一两个话题探讨 React 和相同体系下的其它库( Flux ， Redux ) 。React 是一个开源项目，几乎是由 Fackbook 和其它主要的技术公司贡献开发的。React 称自己为为构建用户接口而提供的 JavaScript 库。

React 基本上用来作为 MVC 中的 V。它完全专注于 MVC 中的 V 部分，而忽略了应用中的其它部分架构。它提供了一个组件层，这让我们易于制作UI元素并将这些UI元素组合在一起。它抽象出了DOM，因此而优化了渲染，并允许你使用 node.js 渲染 React。另外，它实现了单向数据交互流，这使它比其它的框架更易于理解和使用。

多个项目例如 Angular ，Ember 绑定使用 React 成为 MVC 中的 V。

什么时候使用 React？当你想要有一个强大的 View 层，而应用中的其它部分缺不需要一个复杂的框架时，或当你想要一个 View 层和你的 Angular， Backbone，或者 Ember应用一起使用。当你试着构建一个同构的网页框架。

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

目前版本:v0.14.0

网址: Facebook.github.io/react/

Backbone

Backbone 是一个出名的精简的框架，所有内容都可以放到一个单一的文件里。Backbone 已经流行了一段时间，其作者是 Jeremy Ashkenas，曾经由于开发了 CoffeeScript 和 Underscore 而为大家所知。Backbone 特别适用于需要开发的 web 程序不大的那些团队，他们希望能使用小巧的框架，而不是像 Angular 或者 Ember 这样的大型框架。

Backbone 提供了全功能的 MVC 框架和路由。它的 Model 可以实现 key-value 绑定和数据更新的事件处理。Model(及 Collection)可以与 RESTful 的 API 协同工作。View 可以声明事件处理，Router 在 URL 处理和状态管理方面做的很好。对于开发一个单页面应用，所有需要的功能都可以支持，不需要额外引入不需要的复杂性。

何时使用 Backbone?对于小型的 web 程序，Backbone 是我必选的框架。

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

当前版本:1.2.3

官方网站: backbonejs.org

Ember 作为一个 web应用框架，非常专注于程序员的效率上。Ember 相对比较流行，核心团队有不少很聪明的成员，包括 Yehuda Katz，他是 Ruby on Rails 和 jQuery 的核心团队的成员。Ember 对自己的定位是“一个用来创建震撼的 web 应用的框架”，它也确实不会浪费你的时间。它在这方面非常专注，为你提供很多的选择。

Ember 同样也是一个 MVC 的框架。它包含一个模板和视图引擎，在数据更新时可以自动更新，这方面与Angular, Backbone, 和 React 类似。它还有一个 web 组件的概念，允许你用自己的标签扩展HTML，(如Angular)。它还有一个路由及 model 引擎，可以与 RESTful API 一起工作的很好。

何时使用 Ember?适用于你需要一个框架马上就能使用。对灵活性要求不高的时候可以选择 Ember，因为你通常是预算紧张或者工期紧张。

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

当前版本:2.1.0

官方网站: emberjs.com

JQuery 这个库就不用多做介绍了。它独立承担了让跨浏览器网站成为现实的重任，是它使得整个 web 成为今天这个样子。Web 标准的制定以及浏览器厂家对标准的接受方面，jQuery 功不可没。jQuery 基金会的目标是"通过开源软件的开发和支持，以及社区的协作，增进开放的网络，让每个人都能访问"

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?当你想要一个模块化的，性能更好好一点的，并附带有对于 AMD 和社区插件支持的 Underscore 版本时。

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

想要构建一个完全运行于现代浏览器上，并且能跨浏览器运行的视频游戏吗？那就看看 Babylon.js 吧，它是一个 3D 游戏引擎，基于 WebGL 和 JavaScript。你可以使用其物理、音频和粒子系统创造出超乎预期的高质量游戏来。

什么时候使用 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?当你需要一个简单的能输出为 Canvas 的 3D 视觉效果时。

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

我们已经在这份清单中囊括了 Mocha 和 Chai ，如果不去把可以运行这些测试或者也许可以设定持续集成测试的测试运行器拉进来的话，那么这份清单就不会是完整的。Karma 是一个用来帮助你在不同的浏览器中自动运行你的测试的工具。它将会帮助你在时下所有的浏览器上运行你的 Mocha 和 Chai 测试。

并不是每个浏览器都会运行于每个平台之上，不过幸运的是有许多免费的工具可供你用来测试其它的浏览器，可以在浏览器截屏上看一看。如果你是在 OS X 上运行的话，并且要测试的是 Edge 或者 IE 的话，你就可以免费使用这个工具。

什么时候使用 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

更多 Web 开发的实践

这篇文章是 web 开发系列的一部分，来自于 Microsoft 技术的传道者和工程师，内容都是关于实用的 JavaScript 学习、开源项目，还有互操作性***实践这些方面，包括了 Microsoft Edge 浏览器和新的 EdgeHTML 渲染引擎。

我们鼓励您在所有的浏览器和设备，包括作为 Windows 10 默认浏览器的 Microsoft Edge 上进行测试 —— 使用 dev.microsoftedge.com 上的免费工具：