JavaScript 前端框架、库和工具

AngularJS

Angular 是流行的企业级框架，许多开发人员都在使用它来构建和维护复杂的 web 应用程序。Angular 的人气很是高，包括 Domino’s Pizza, Ryanair, iTunes Connect, PayPal Checkout, 谷歌等企业都在使用它。Angular 是一个由谷歌支持的开源框架。Angular 自称是 HTML 的一个扩展，用来构建复杂的 web 应用程序。另外若是你熟悉 TypeScript， Angular 2就是用它构建的。

这个做者的更多文章

• 构建一个基于 Node.js 的聊天室 Web App：远程调试

• 构建一个基于 Node.js 的聊天室 Web App：经过 WebSockets 链接

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 的 V 部分，忽视应用程序架构的其他部分。它提供了一个组件层，使得建立 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 已经存在有一段时间了，是以 CoffeeScript 和 Underscore 闻名的 Jeremy Ashkenas 所开发的。对于一些为小型 web 应用寻找一个结构简单的框架，而不想引入如 Angular 或 Ember 这些大型框架的团队，Backbone 特别受欢迎。

Backbone 提供一个完整的 MVC 框架以及路由。模型容许键-值绑定和数据变化的事件处理。模型（和集合）能够链接到RESTful API。视图具备声明式事件处理，路由在处理 URL 和状态管理上作的很出色。它包含你建立一个单页面应用程序所须要的一切，且没有提供太多东西，没有没必要要的复杂度。

什么时候使用 Backbone？Backbone 是我建立简单 web 应用程序的首选框架。

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

当前版本: 1.2.3

网站: backbonejs.org

Ember

Ember 是一个执拗的 web 应用程序框架，关注程序员的工做效率。Ember 比较流行，它的核心团队包括像曾是 Ruby on Rails 和 jQuery 核心团队成员的 Yehuda Katz 的聪明人。Ember 自称是“一个用于建立大规模 web 应用程序的框架”，且不浪费你的时间。它很执拗，为你提供了不少选择。

Ember 也是一个 MVC 框架。它包括一个模板和视图引擎，当数据变化时自动更新，就像 Angular，Backbone 和 React 同样。它包含 web组件 的思想，让你使用本身标签扩展 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 or 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 和社区插件时。

LodashGitHub: 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？不管什么时候，只要你想作一个视频游戏或任何类型的复杂三维场景，都能用上。

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

当前版本: 2.2

网站: babylonjs.com

Three.js

想要构建一个 3D 可视化场景，但不须要一个完整的游戏引擎？three.js 提供了一个轻量级的 3d 库，容许渲染 3d 为 HTML5 画布、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 模块和浏览器 app 中测试异步代码变得更容易。Mocha 测试能够串联运行，能够为正确的测试用例添加异常跟踪的能力。

Chai 是一个行为驱动开发/测试驱动开发的断言库，能够搭配 Mocha 使用。它能够把你须要测试的东西用可读的风格简单地表达出来。

什么时候使用 Mocha & Chai？老是！请测试你的代码，让世界变得更美好。

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 或 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 语言正在迅速发展。ECMAScript2015 于去年夏天发布，它的许多新特性在最新的浏览器上实现了。若是你想看看 ECMAScript 2015 的兼容性，你能够看看来自 @kangax 的这个 表。你会注意到，最新版本的 Edge，Firefox 和 Chrome 已经几乎彻底兼容了。

咱们并非生活在一个完美的世界。做为开发人员，咱们须要继续支持旧的浏览器，它们没有最新最好的 JavaScript 特性。咱们要推动 web 和改善咱们的代码库。Babel 是一个 JavaScript 编译器，用于把最新的 JavaScript 标准编译成可在 IE9 等老浏览器上运行的兼容ES5的 JavaScript。它有一些插件，使得 React 开发更容易，甚至可使用一些不属于该规范的特性（例如ES7）。

什么时候使用 Babel？当你想使用新的 JavaScript 语言特性，同时还要支持老版本浏览器时。

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

当前版本: 6.1.2

网址: babeljs.io

更多 Web 开发实践

本文来自微软技术布道师 Web 开发系列，里面有实用的 JavaScript 学习，开源项目和互操做性的最佳实践（包括与 微软Edge 浏览器和新的 EdgeHTML渲染引擎）。

咱们鼓励你跨浏览器和设备进行测试，包括微软的Edge——Windows 10的默认浏览器——在 dev.modern.IE 上有免费工具:

• 扫描你的网站中过期的库，布局问题和可访问性

• 下载 Mac, Linux 和 Windows 下的免费虚拟机

• 跨浏览器检查 Web 平台状态，包括微软 Edge 的路线图

• 在你的设备上远程测试微软 Edge

来自咱们工程师和布道者的更深刻学习：

• GitHub 上的编码实验室： 跨浏览器测试和最佳实践

• 2015 微软 Edge Web 峰会 (来自咱们的工程师团队和JS社区)

• 很棒，我能够在 Mac 和 Linux 上测试 Edge 和 IE 了！ (来自Rey Bango)

• 推动 JavaScript 同时不破坏 Web (来自Christian Heilmann)

• Edge 渲染引擎让 Web 工做 (来自Jacob Rossi)

• 基于 WebGL 的 3D 渲染 (来自David Catuhe)

• 托管 web app 和 web 平台的革新 (来自Kevin Hill和Kiril Seksenov)

咱们的社区开源项目：

• vorlon.JS (跨设备远程 JavaScript 测试)

• manifoldJS (部署跨平台托管 web app)

• babylonJS (让 3D 图形制做更简单)