本文来自于：葡萄城控件技术团队博客
几乎每隔一个星期，就有一个新的 JavaScript 库席卷网络社区！Web 社区日益活跃、多样，并在多个领域快速成长。想要研究每一个重要的 JavaScript 框架和库，是个不可能完成的任务。接下来，我会分享一些前端开发的最著名和最有影响力的框架和库。下面，就让我们一起来看看，顶级的 JavaScript web 前端框架、库和工具及其使用。
请注意：
如果没有包括你最喜欢的 JavaScript 的框架和库，请多包涵。
请实时更新你的框架和库，最新版本往往有更好的跨浏览器和跨设备支持。可以使用检测设备一样的工具，来帮助确定一个旧版本，是否可以和配置最好的设备兼容。
接下来，让我们看看下面的列表！
AngularJS
AngularJS 是一种流行的企业框架，许多开发人员使用其构建和维护复杂的 Web 应用程序。AngularJS 是十分受欢迎的，许多公司都使用它，像达美乐披萨、瑞安航空、iTunes Connect，PayPal 支付，谷歌等。AngularJS 是由谷歌支持的开源框架。AngularJS 把自己描述为一个 HTML 的扩展，可用来构建复杂的 Web 应用程序。此外，如果你熟悉 TypeScript，将会很清楚 AngularJS 是如何编写的。
AngularJS 是一个 MVC 类型的框架，它提供了双向的数据模型和视图之间的绑定。这种数据绑定，允许在双方只要有一个数据变化时，自动进行更新。它使你可以构建可重用的 View 组件。同时，它也提供了一个服务框架，以便前后端服务的轻松通信。最后，它只是普通的 JavaScript。
什么时候使用 AngularJS？当你正在建立一个复杂的 web 前端应用程序，并且需要一个模块化的框架来处理一切时。
React
React 是今年最受喜爱的 JavaScript 的工程！每个人似乎都在谈论 ReactJS。每一个会议上，去年出席的会议，至少有两个人是在讨论 React。React 是开源的，主要是由 facebook 借助其它公司的主要技术开发出来的。React 描述自己是一个 JavaScript 库，用于构建用户界面。
React 在 MVC 中，主要是 View。它完全专注于 MVC 那部分，无视应用程序的其它部分。它提供了一个成分层，可以更容易使用UI元素，并将它们组合在一起。它抽象了 DOM，使其擅长于优化渲染，并允许使用 node.js 来表述 React ; 它实现了一个单向灵活的数据流，使得它更容易理解和使用其它框架。
作为在 MVC 中的 V，许多工程结合 React 和 AngularJS 或 Ember 一起使用。
什么时候使用 React？当你想要一个强大的 View 层，但应用的其它部分却不需要详尽的框架时，或者当你的应用中想要一个结合 了Angular、Backbone 或 Ember 的视图层时，又或者是创建一个同构的 Web 框架时。
Backbon
Backbone 是一个很著名的简单的框架，融入了一个单一的 JavaScript 文件。Backbone 流行了一段时间。由 Jeremy Ashkenas 从CoffeeScript 和 Underscore 框架中开发出来的。对于追寻小型架构的团队来说，Backbone 是特别受欢迎的。因为他们小型的 Web 应用是不需要使用像 AngularJS 和 Ember 这样的大型框架的。
Backbone 提供了一个完整的 MVC 框架和路由。该模型允许键-值绑定和处理数据变化的事件。Models（和 Collections）可以连接到 RESTful API 中。Views 可以声明事件处理，而路由器则可以非常出色地处理 URL 和状态管理。在建立一个不提供太多功能和非必要复杂功能的单页面应用时，能提供你所需的所有功能。
什么时候使用 Backbone？Backbone 是适用于简单 Web 应用的 GOTO 框架。
Ember
Ember 是一个独立的 Web 应用程序框架，专注于编码效率。Ember 是比较受欢迎的，核心团队包括牛人 Yehuda Katz，他是 Ruby on Rails 和 jQuery 的核心团队之一。Ember 描述自己为一个不浪费你的时间，能用于创建伟大 Web 应用程序的框架。 这是非常有主见，这也使你有了很多选择。
Ember 也是一个 MVC 框架。它包括一个模板和视图引擎，保证了数据变化时的自动更新，就像 AngularJS，Backbone 和 React 一样。它包括的概念 web 组件，让你用自己的标签来扩展 HTML（就像 AngularJS）。它也有一个路由和模型引擎，能够和 RESTful API 协同工作。
什么时候使用 Ember？如果你只是想要一个能够工作的框架时、或者你的预算紧张、又或者最后期限将近时，不追求太多的灵活性，可以使用 Ember。
JQuery
jQuery 是一个不需要过多介绍的框架。它凭一己之力使得跨浏览器站点成为现实并促使 Web 发展到今天。Web 标准被大多数主要浏览器厂商所采纳真正的尊重，jQuery 是其原因之一。jQuery 的基金会的使命是“通过开发和支持开源软件，提高开放的网络，使之为所有人开放，并与开发社区合作。”
jQuery 是世界上最常用的 JavaScript 库，没有应用程序不去使用它，除非不在乎编码效率。它使得在所有浏览器中，DOM traversal、事件处理、动画、AJAX 是如此的简单和容易。
什么时候使用 jQuery？除你想使用像 Zepto 这样的轻量级版本之外，都可以使用 jQuery。
Wijmo
Wijmo Enterprise 是为企业应用程序开发而推出的一系列包含 HTML5 和 JavaScript 的开发控件集。包含有先进的 JavaScript 控件、经典的 jQuery 小部件、金融图标、以及 FlexSheet 和 OLAP，能够满足移动端、PC 端和支持 IE6 等应用程序的需求。同时，Wijmo 还支持其它流行的框架，如 Angular、Angular2、KnockOut、Vue、React 等。
什么时候使用 Wijmo？当你想为应用程序构建具有良好用户体验的用户界面时。
Underscore＆lodash
对于程序开发者来说，一些 JavaScript 的内置，效率是不够高的。总有缺少实用的功能或将代码化简的函数。Underscore（和 lodash）是一个 JavaScript 库，提供了实用功能，同时不需要 JavaScript 对象内置的猴子补丁。这两个库提供超过 100 个帮助函数和其它特别好用的功能;，包括像地图，过滤器，调用，缩减，模板，调节，绑定，扩展，挑选，克隆和更多的功能。
什么时候使用 Underscore？当你需要一个单一 JavaScript 文件来提高编码效率时。
什么时候使用 lodash？当你需要一个模块和轻量高效的，容易被 AMD 和社区插件支持 Underscore 版本时。
D3.js
数据可视化和图表是 Web 应用程序的常见需求。当涉及到任何数据操作和可视化，D3.js 是事实上的标准。它是在 GitHub 上最受欢迎的项目之一，并在被数百个组织使用。大量的图形，图表和可视库建立在 D3 上。
D3 允许操作任何数据源的文件，并且可以转换为 DOM、SVG 或 CSS。D3 专注于现代网络标准，并确保像 Flash 或 Silverlight 等专有格式的免费。
什么时候使用 D3.JS？当你需要任何形式的可视化时。
Babylon.js
想要创建一个完全运行在现代 Web 标准和跨浏览器上的视频游戏？可以考虑 Babylon.js，Babylon.js 是一个建立在 WebGL 和 JavaScript 上的 3D 游戏引擎。你可以创建一个难以置信的高质量的游戏引擎，包括物理，音频和粒子系统。
什么时候使用 Babylon.js？当你正在构建一个包含任何复杂 3D 场景的视频游戏时。
three.js
想要创建一个 3D 可视化，却又不需要完整的游戏引擎？Three.js 提供了一个轻量的 3D 库来将 3D 渲染成一个 HTML5 canvas、SVG 和 WebGL。这确实是一个明确的库，在 Three.js 的用例展示中，有几百个效果很好的例子。
什么时候使用 three.js？每当你需要一个简单的三维可视化，可以输出到画布上时。
Mocha & Chai
在很长一段时间里，JavaScript 的测试令人难以置信的烦恼。从头开始，测试任何代码通常被视为令人讨厌的，但它是每一个开发者应该做的。同时，测试他们的代码，每个开发者似乎总是很不屑，而选择忽略它。有一个办法来改善这个问题，就是使用 Mocha & Chai 的形式。虽然这两个库从美味的热饮中得名的，但是它们都可以以不同的方式测试你的代码。
Mocha 是一个 JavaScript 测试框架，可以很轻松地在 node 模型和浏览器应用程序中测试异步代码。Mocha 测试可以串联运行，并且对于正确的测试用例具有高质量的跟踪异常。
Chai 是一个行为驱动的开发/测试驱动开发断言库，可以与 Mocha 配套使用。它使得可以很容易的以一种可读的方式去表达你的测试内容。
什么时候使用 Mocha 和Chai？ 永远都可以！请测试你的代码，使世界变得更美好。
Karma
这个列表上包含了 Mocha 和 Chai，如果不包含运行这些测试和设定持续集成测试的运行者，那么这将是不完整的。Karma 是一个旨在帮助针对不同的浏览器自动运行测试的工具。这将帮助你在所有的浏览器上运行 Mocha 和 Chai。
并不是每一个浏览器都可以在每个平台上运行，幸运的是，有一些免费的工具，你可以用来测试其他浏览器， 例如浏览器截图。如果你在 OS X 上运行，并希望测试 Edge 或 Internet Explorer，您可以使用这种免费工具。
什么时候使用 Karma？当你的应用程序有一个完整的测试套件，并想要确保在所有的浏览器上测试通过时。
PhantomJS
运行全功能浏览器，以测试你的代码内存和 CPU 密集型。PhantomJS 允许你在 Safari 和 Chrome 上运行 headless WebKit 的渲染引擎。这样你就可以运行你的测试，捕捉屏幕截图，监视网络，使用 JavaScript API 自动浏览页面。
什么时候使用 PhantomJS? 当你需要做更多的测试，操作页面并监视网络请求时。
Grunt & Gulp
产品网站建设通常会涉及到一些提高性能的任务，例如缩小 JavaScript 和 CSS，CoffeeScript/TypeScript 的编译，单元测试，性能 lintin。也许你已经为产品网站准备好了工具链，但是如果还没有，那么你可以使用 Grunt 和 Gulp 这样的工具。这两个工具都有很多插件，来帮助你完善产品网站。
什么时候使用 Grunt？如果你喜欢写配置文件，并且不介意任务运行期间产生中间文件时。
什么时候使用 Gulp？如果对比于写配置文件，你更喜欢写代码，并且想要使用 node.js 的流媒体功能来更快的执行任务时。
Babel
JavaScript 作为一门语言，发展地很快。2015年夏天的 ECMAScript 发布了它的许多在最新的浏览器中实现的新功能。如果你想看看2015年的 ECMAScript 兼容，你可以看看来自原 @kangax 的列表。你会发现最新版本的 Edge，Firefox 和 Chrome，具有近乎完全的兼容性。
我们不是生活在一个完美的世界。作为开发人员，我们需要继续支持那些没有最新 JavaScript 特性的旧版浏览器。我们要推进网络并提高我们的代码库。Babel 是一个 JavaScript 编译器，可以将最新的 JavaScript 标准编译成 ES5 兼容的 JavaScript，这样就允许在像 IE9 这样较老的浏览器上运行。它有一些插件，使得很容易的使用 React 去开发，甚至使用一些规格之外的特性去开发。
什么时候使用 Babel？当你要使用新的 JavaScript 语言特性，同时继续支持旧版浏览器时。
更多的Web开发实践
本文来自于 JavaScript 学习文章中微软技术布道者和工程师的系列文章之一，同时最好的文章里也包含微软的 Edge 浏览器和新的 EdgeHTML 渲染引擎。
我们鼓励大家测试跨浏览器和设备，例如微软的 Edge（Windows10 默认的浏览器）
文章来源：by Rami Sayar
原文链接：http://www.codeproject.com/Articles/1066408/Top-JavaScript-Frameworks-Libraries-Tools-and-Wh
转载请注明出自：葡萄城控件
关于葡萄城
葡萄城是全球控件行业领导者，世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商，为超过75%的全球财富500强企业提供服务。
