相比于JavaScript开发人员的框架数量，目前JavaScript框架、类库类库和工具的工具数量似乎更多一些。截至2017年5月，汇总GitHub上的框架快速搜索显示，有超过110万个JavaScript项目。类库npmjs.org有50万个可用的工具软件包，每月下载量近100亿次。汇总

本文将会讨论目前最为流行的框架客户端JavaScript框架、类库和工具以及它们之间的类库基本差异。也许本文无法告诉你哪个是工具***的，但是汇总最适合自己项目的，就是框架***的。

类库

类库是类库一个有组织的功能集合。典型的工具类库包括字符串处理、日期、HTML DOM元素、事件、Cookie、云服务器动画、网络请求等功能。你可以自己实现一个函数，以便选择该函数被调用时是否需要返回一个值。

类库通常提供一种高级别的抽象方法，能够帮助顺利实现项目的细节部分。例如，Ajax通常依赖于XMLHttpRequest API，只需要几行代码就实现功能，只是浏览器之间存在细微的差异。类库提供了更简单的ajax()函数，因此开发者可以专注于更高级别的业务逻辑上。

类库能够使将开发时间缩短20%，开发者不必担心细节实现。

但是也有缺点：

框架

框架是应用程序的骨架。它要求以特定的方式来进行软件设计，在某些节点上实现自己的逻辑。框架通常提供了事件、存储和数据绑定等功能。免费信息发布网

框架通常提供了比类库更高层次的抽象，帮助快速构建项目的前80%。

框架的缺点：

工具

工具会帮助开发工作，但却不是项目的组成部分。工具包括构建系统、编译器、转译器、代码分割器、图像压缩器、部署机制等。

工具帮助实现一个更容易的开发过程。例如，对比于CSS，许多编码者更喜欢Sass，因为它提供了代码分离、嵌套、渲染时变量、循环和函数。浏览器不了解Sass / SCSS语法，因此在测试和部署之前，必须使用适当的工具将代码编译为CSS。

类库、框架和工具的免费源码下载区别

类库、框架和工具之间的区别很小。框架可以包括一个类库，类库可以实现类似框架的方法，项目中任何一种工具都是必不可少的。所以不需要明确的区分类库、框架和工具。

JavaScript框架和类库

以下是按照流行程度进行的排序：

jQuery 

随着WordPress、ASP.NET和一些其它框架的发布，jQuery仍然是最常用的JavaScript类库。它通过将CSS选择器引入到DOM节点检索加链来应用事件处理程序、动画和Ajax调用，这彻底改变了客户端的开发。

jQuery近年来备受青睐，对于需要少量JavaScript功能的项目来说，仍然是一个好选择。

优点：

缺点：

Lodash 和 Underscore

Lodash和Underscore在本节一起谈论。它们提供了数百个功能性的JavaScript实用程序来补充原生字符串、数字、数组和其它原始对象方法。虽然两个类库之间有一些重叠，但是不太可能在一个项目中同时使用这两个类库。

虽然两个类库在客户端使用率很低，但是却可以在服务器端的Node.js应用程序中使用这两个类库。

优点：

缺点：

AngularJS 1.x

Angular是框架(或MVC应用程序框架)类列表中的***个。目前***的Angular版本是1.x，它使用双向数据绑定扩展HTML，同时解耦了DOM操作和应用程序逻辑。

尽管版本2(现在是版本4!)已经发布了，但是Angular 1.x仍在开发中。

优点：

缺点：

Angular 2.x(现在是Angular 4.x)

Angular 2.0于2016年9月发布。这是一个完整的重写，它引入了使用TypeScript创建的基于模块化组件的模型。Angular 4.0于2017年3月发布。

Angular 2.x与v1版本截然不同，也不与其它版本兼容 – 也许Google应该给项目起一个不同的名字!

优点：

缺点：

React

React是一个用于构建用户界面的JavaScript类库，也是去年最受关注的类库。它专注于Model-View-Controller(MVC)开发的“View”部分，使用它可以轻松创建保留状态的UI组件。它是实现虚拟DOM的***类库之一， 它的内存结构能够有效地计算差异，页面更新也更加有效。

统计显示React的使用度似乎很低，因为它是在应用程序中使用而不是在网站。

优点：

缺点：

了解更多关于React the ES6 Way

Vue.js

Vue.js是一个用于构建用户界面的轻量级渐进框架。它提供了一个类似React的虚拟DOM驱动视图层，可以与其它类库集成，用于构建强大的单页面应用。该框架是由之前在AngularJS工作过的Evan You创建的，他提取了AngularJS中自己喜欢的部分。

Vue.js使用HTML模板语法将DOM绑定到实例数据。Model是在数据改变时更新view的纯JavaScript对象。

优点：

缺点：

Backbone.js

Backbone.js是提供服务器端框架中常见的MVC结构的最早客户端选项之一。它唯一的依赖是Underscore.js。

Backbone.js声称是一个类库，因为它可以与其它项目集成，但是我觉得大多数开发人员都认为它是一个框架。

优点：

缺点：

Ember.js

Ember.js是基于Model-View-ViewModel(MVVM)模式的框架之一。它在单个包中实现模板化、数据绑定和类库。

优点：

缺点：

Knockout.js

Knockout.js是最早的MVVM框架之一，它确保了UI与底层数据保持同步，具有模板和依赖关系跟踪。

优点：

缺点：

更多的框架和类库

以下项目虽然不是特别流行，但值得考虑：

工具：执行通用任务

构建工具自动执行各种Web开发任务，例如预处理、编译、优化图像、缩小代码、代码分析和运行测试等。任务可以在一个可执行包中统一管理。

目前***的工具如下：

Gulp.js

虽然Gulp不是***个任务执行工具，它却很快成为了***的。Gulp使用易于阅读的JavaScript代码，将源文件加载到流中，并在将数据输出到构建文件夹之前，通过各种插件管理数据。在任何其它选项之前检查Gulp.js是简单、快速和有趣的。

NPM

npm是Node.js包管理器，但其脚本工具可用于运行通用任务。对于具有少量依赖关系的简单项目来说，这是一个很好的选择。然而，更复杂的任务可能会变得不太适用。

Grunt

Grunt是***批被大规模采用的JavaScript任务执行工具之一，但其速度和复杂的JSON配置却导致了Gulp的兴起。现在这些问题已经得到了解决，Grunt仍然是一个受欢迎的选择。

工具：模块绑定

多个JavaScript文件的管理已经成为了一件繁琐的事情。默认情况下，浏览器文件不会被编译，因此其依赖关系必须以适当的顺序进行加载或连接。虽然有像ES6模块和CommonJS这样的选项，但是浏览器支持是有限的，因此模块绑定变得十分重要。

WebPack

Webpack支持所有流行的模块选项，并已成为React开发的代名词。虽然Webpack声称是一个模块捆绑程序，但是已经可以用作通用任务运行程序了。

Browserify

Browserify支持Node.js正在使用的CommonJS模块，它将所有模块编译成单个浏览器兼容的文件。

RequireJS

RequireJS是一种浏览器中的模块加载器，它也可以在Node.js中使用。

工具：代码分析

代码分析工具用于分析代码中潜在错误或偏离语法的标准。一个未闭合括号或未声明的变量一定会被检测出。

ESLint

ESLint是一种可插拔的代码分析工具。每个规则都是一个插件，因此可以根据个人喜好进行配置。

JSHint

JSHint是一个灵活的JavaScript代码分析工具，它很好的平衡了真正的错误和老旧的语法。

JSLint

JSLint是最早的代码分析工具之一，它实现了一套严格的默认规则。

工具：单元测试

测试驱动开发的任务要求需要编写代码来测试自己的代码。目前有许多选择，包括Ava, Tape 和Jest ，但目前***的三个工具是：

Mocha

Mocha是一个JavaScript测试框架，可以在Node.js或浏览器中运行测试。它支持异步测试，并且经常与Chai配合使用，这样可以使测试代码以可读取的方式表达。

Jasmine

Jasmine是一个行为驱动的测试工具，可以在浏览器中自动测试UI和交互。

QUnit

QUnit是一个单元测试框架，可以在输入特定参数时，检查函数结果。它还上报测试结果，确保没有错过特定的代码分支。

总结与建议

目前最为流程的框架是React，同时其它的框架也在向着流行的趋势发展。

如果需要一个安全的、通用的Web应用程序，可以考虑使用Vue.js。

整体框架已经不再受欢迎了，如果你需要对一个较大型项目进行严格的结构管理，AngularJS是一个不错的选择。目前大多数人坚持使用Angular 1.0版本，但是长远来讲，如果你愿意学习TypeScript，Angular 4.x版本是个更好的选择。

jQuery虽然现在并不十分流行，在技术新闻中也很少会被提到，但不可否认它是积极开发的，同时也是网站和应用程序的有力工具。jQuery具有平缓的学习曲线，全球许多开发人员能够很好地理解。

如果你想要冒险，可以试试Svelte这是一个有趣的客户端/服务器框架，它可以在构建时预先呈现JavaScript，并且可以改变我们开发的方式。

工具的选择因项目而异。虽然目前使用Gulp的开发者占大多数，但WebPack却越来越受欢迎。同时你也不能错过ESLint和Mocha等测试工具。

过去的十年，JavaScript经历了革命性的发展。过去只有少量基本的类库可以选择，但是现在可供选择的类库已经铺天盖地。也许无法确定哪个类库、框架和工具是***的，但是最适合自己项目的，就是***的。