顶级的JavaScript框架、库、工具及其使用

时间 2019-11-13

标签顶级 javascript 框架工具及其使用栏目 JavaScript 繁體版

原文原文链接

几乎每隔一个星期，就有一个新的 JavaScript 库席卷网络社区！Web 社区日益活跃、多样，并在多个领域快速成长。想要研究每个重要的 JavaScript 框架和库，是个不可能完成的任务。接下来，我会分享一些前端开发的最著名和最有影响力的框架和库。下面，就让咱们一块儿来看看，顶级的 JavaScript web 前端框架、库和工具及其使用。前端

请注意：node

若是没有包括你最喜欢的 JavaScript 的框架和库，请多包涵。
请实时更新你的框架和库，最新版本每每有更好的跨浏览器和跨设备支持。可使用检测设备同样的工具，来帮助肯定一个旧版本，是否能够和配置最好的设备兼容。

接下来，让咱们看看下面的列表！git

AngularJS

AngularJS 是一种流行的企业框架，许多开发人员使用其构建和维护复杂的 Web 应用程序。AngularJS 是十分受欢迎的，许多公司都使用它，像达美乐披萨、瑞安航空、iTunes Connect，PayPal 支付，谷歌等。AngularJS 是由谷歌支持的开源框架。AngularJS 把本身描述为一个 HTML 的扩展，可用来构建复杂的 Web 应用程序。此外，若是你熟悉 TypeScript，将会很清楚 AngularJS 是如何编写的。github

AngularJS 是一个 MVC 类型的框架，它提供了双向的数据模型和视图之间的绑定。这种数据绑定，容许在双方只要有一个数据变化时，自动进行更新。它使你能够构建可重用的 View 组件。同时，它也提供了一个服务框架，以便先后端服务的轻松通讯。最后，它只是普通的 JavaScript。web

何时使用 AngularJS？当你正在创建一个复杂的 web 前端应用程序，而且须要一个模块化的框架来处理一切时。canvas

React

React 是今年最受喜好的 JavaScript 的工程！每一个人彷佛都在谈论 ReactJS。每个会议上，去年出席的会议，至少有两我的是在讨论 React。React 是开源的，主要是由 facebook 借助其它公司的主要技术开发出来的。React 描述本身是一个 JavaScript 库，用于构建用户界面。windows

React 在 MVC 中，主要是 View。它彻底专一于 MVC 那部分，无视应用程序的其它部分。它提供了一个成分层，能够更容易使用UI元素，并将它们组合在一块儿。它抽象了 DOM，使其擅长于优化渲染，并容许使用 node.js 来表述 React ; 它实现了一个单向灵活的数据流，使得它更容易理解和使用其它框架。后端

做为在 MVC 中的 V，许多工程结合 React 和 AngularJS 或 Ember 一块儿使用。浏览器

何时使用 React？当你想要一个强大的 View 层，但应用的其它部分却不须要详尽的框架时，或者当你的应用中想要一个结合了Angular、Backbone 或 Ember 的视图层时，又或者是建立一个同构的 Web 框架时。前端框架

Backbone

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、Angular二、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 语言特性，同时继续支持旧版浏览器时。