本文将会讨论目前最为流行的客户端javascript框架、类库和工具以及它们之间的基本差异。也许本文无法告诉你哪个是最好的，但是最适合自己项目的，就是最好的。
类库类库是一个有组织的功能集合。典型的类库包括字符串处理、日期、html dom元素、事件、cookie、动画、网络请求等功能。你可以自己实现一个函数，以便选择该函数被调用时是否需要返回一个值。
类库通常提供一种高级别的抽象方法，能够帮助顺利实现项目的细节部分。例如，ajax通常依赖于xmlhttprequest api，只需要几行代码就实现功能，只是浏览器之间存在细微的差异。类库提供了更简单的ajax（）函数，因此开发者可以专注于更高级别的业务逻辑上。
类库能够使将开发时间缩短20％，开发者不必担心细节实现。
但是也有缺点：
类库中的错误难以定位和修复
开发团队不能保证快速发布补丁
补丁程序可能会更改api，导致大量代码必须更改
学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！
框架框架是应用程序的骨架。它要求以特定的方式来进行软件设计，在某些节点上实现自己的逻辑。框架通常提供了事件、存储和数据绑定等功能。
框架通常提供了比类库更高层次的抽象，帮助快速构建项目的前80％。
框架的缺点：
如果你的应用程序超出了框架的范围，最后20％可能会很难
框架更新很困难
核心框架代码和概念很少更新
工具工具会帮助开发工作，但却不是项目的组成部分。工具包括构建系统、编译器、转译器、代码分割器、图像压缩器、部署机制等。
工具帮助实现一个更容易的开发过程。例如，对比于css，许多编码者更喜欢sass，因为它提供了代码分离、嵌套、渲染时变量、循环和函数。浏览器不了解sass / scss语法，因此在测试和部署之前，必须使用适当的工具将代码编译为css。
类库、框架和工具的区别类库、框架和工具之间的区别很小。框架可以包括一个类库，类库可以实现类似框架的方法，项目中任何一种工具都是必不可少的。所以不需要明确的区分类库、框架和工具。
javascript框架和类库以下是按照流行程度进行的排序：
jqueryjquery
类型 类库
网站 jquery.com
知识库 github.com/jquery/jquery
当前版本 3.2.1
开发人员 jquery团队
发布日期 2006年8月
大小 最小30kb
用途 通用
使用度 72.4％的网站
随着wordpress、asp.net和一些其它框架的发布，jquery仍然是最常用的javascript类库。它通过将css选择器引入到dom节点检索加链来应用事件处理程序、动画和ajax调用，这彻底改变了客户端的开发。
jquery近年来备受青睐，对于需要少量javascript功能的项目来说，仍然是一个好选择。
优点：
分布规模小
学习曲线平缓，丰富的在线帮助
简洁的语法
容易拓展
缺点：
增加了原生api的速度开销
浏览器兼容性不好，但已得到改善
用法扁平
一些行业反对使用
lodash 和 underscorelodash
类型 类库
网站 lodash.com/
知识库 github.com/lodash/lodash/
当前版本 4.17.4
开发人员 john-david dalton
发布日期 2012年4月
大小 最小4kb – 24kb
用途 通用
使用度 低
underscore
类型 类库
网站 underscorejs.org/
知识库 github.com/jashkenas/underscore
当前版本 1.8.3
开发人员 jeremy ashkenas
发布日期 2009年10月
大小 最小6kb
用途 通用
使用度 低
lodash和underscore在本节一起谈论。它们提供了数百个功能性的javascript实用程序来补充原生字符串、数字、数组和其它原始对象方法。虽然两个类库之间有一些重叠，但是不太可能在一个项目中同时使用这两个类库。
虽然两个类库在客户端使用率很低，但是却可以在服务器端的node.js应用程序中使用这两个类库。
优点：
小而简单
良好的文档易于学习
与大多数类库和框架兼容
不扩展内置对象
可以在客户端或服务器上使用
缺点：
有些方法只在es2015及更高版本的javascript中可用。
angularjs 1.xangularjs
类型 框架
网站 angularjs.org
知识库 github.com/angular/angular.js
当前版本 1.6.4
开发人员 google
发布日期 2010年10月
大小 144kb
用途 单页应用程序
使用度 低
angular是框架（或mvc应用程序框架）类列表中的第一个。目前最流行的angular版本是1.x，它使用双向数据绑定扩展html，同时解耦了dom操作和应用程序逻辑。
尽管版本2（现在是版本4！）已经发布了，但是angular 1.x仍在开发中。
优点：
一些大公司正在使用的流行框架
开发现代web应用程序的解决方案
是标准mean栈（mongodb，express.js，angularjs，nodejs）的一部分，有许多文章和教程可用
缺点：
学习曲线陡峭
大的代码库
无法升级到angular 2.x
angular 2.x（现在是angular 4.x）angular
类型 框架
网站 angular.io
知识库 github.com/angular/angular.js
当前版本 4.1
开发人员 google
发布日期 2016年9月
大小 最小450kb
用途 单页面应用
使用度 低
angular 2.0于2016年9月发布。这是一个完整的重写，它引入了使用typescript创建的基于模块化组件的模型。angular 4.0于2017年3月发布。
angular 2.x与v1版本截然不同，也不与其它版本兼容 – 也许google应该给项目起一个不同的名字！
优点：
开发现代web应用程序的解决方案
是标准mean栈的一部分，尽管只有少量的教程可用
对于熟悉静态类型语言（如c＃和java）的开发人员，typescript提供了一些优势。
缺点：
学习曲线陡峭
大的代码库
不能从angular 1.x升级
与1.x相比，angular 2.x较难理解
学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！
react
react
类型 框架
网站 facebook.github.io/react/
知识库 github.com/facebook/react
当前版本 15.5.4
开发人员 facebook和贡献者
发布日期 2013年3月
大小 21kb分钟
用途 单页应用程序
使用度 低
react是一个用于构建用户界面的javascript类库，也是去年最受关注的类库。它专注于model-view-controller（mvc）开发的“view”部分，使用它可以轻松创建保留状态的ui组件。它是实现虚拟dom的首选类库之一， 它的内存结构能够有效地计算差异，页面更新也更加有效。
统计显示react的使用度似乎很低，因为它是在应用程序中使用而不是在网站。
优点：
小巧，高效，快捷灵活
简单的组件模型
良好的文档和在线资源
可实现服务器端渲染
目前受欢迎，经历了快速增长
缺点：
需要学习新的概念和语法
构建工具很重要
需要其它类库或框架提供model和controller部分
与修改dom的代码和其它类库不兼容
了解更多关于react the es6 way
vue.jsvue.js
类型 框架
网站 vuejs.org
知识库 github.com/vuejs/vue
当前版本 2.0
开发人员 evan you
发布日期 2014年2月
大小 最小19kb
用途 单页面应用
使用度 低
vue.js是一个用于构建用户界面的轻量级渐进框架。它提供了一个类似react的虚拟dom驱动视图层，可以与其它类库集成，用于构建强大的单页面应用。该框架是由之前在angularjs工作过的evan you创建的，他提取了angularjs中自己喜欢的部分。
vue.js使用html模板语法将dom绑定到实例数据。model是在数据改变时更新view的纯javascript对象。
优点：
可以快速使用，并且日益普及
很容易提高高水平开发人员的满意度
依赖性小，性能好
缺点：
一个较新的项目 – 风险可能会更大
部分依赖开发人员进行更新
相比于其它框架，资源较少
backbone.js
backbone.js
类型 框架
网站 backbonejs.org
知识库 github.com/jashkenas/backbone/
当前版本 1.3.3
开发人员 jeremy ashkenas
发布日期 2010年10月
大小 最小8kb
用途 单页面应用
使用度 低
backbone.js是提供服务器端框架中常见的mvc结构的最早客户端选项之一。它唯一的依赖是underscore.js。
backbone.js声称是一个类库，因为它可以与其它项目集成，但是我觉得大多数开发人员都认为它是一个框架。
优点：
体积小，重量轻，复杂度低
不添加html逻辑
文件丰富
采用了许多应用，包括trello、wordpress.com、linkedin和groupon
缺点：
与angularjs等其它框架相比，抽象度较低
需要额外的组件来实现数据绑定等功能
最新的框架已经不采用mvc架构了
ember.jsember.js
类型 框架
网站 emberjs.com
知识库 github.com/emberjs/ember.js
当前版本 2.15.0
开发人员 ember team
发布日期 2011年12月
大小 最小95kb
用途 单页面应用
使用度 低
ember.js是基于model-view-viewmodel（mvvm）模式的框架之一。它在单个包中实现模板化、数据绑定和类库。
优点：
为客户端应用程序提供了单一解决方案
开发人员可以立刻提高开发效率 – 它使用jquery
良好的向后兼容性和升级选项
采用了现代web开发标准
缺点：
大型分配式
与其它正在向较小组件结构发展的框架相比，它十分的庞大
学习曲线陡峭
knockout.js
knockout.js
类型 框架
网站 knockoutjs.com
知识库 github.com/knockout/knockout
当前版本 3.4.2
开发人员 steve sanderson
发布日期 2010年7月
大小 最小59kb
用途 单页面应用
使用度 低
knockout.js是最早的mvvm框架之一，它确保了ui与底层数据保持同步，具有模板和依赖关系跟踪。
优点：
小而轻便，无依赖
优秀的浏览器支持，可以支持到ie6
良好的文档资源
缺点：
较大的项目可能变得很复杂
发展已经放缓
使用情况似乎在减弱
更多的框架和类库以下项目虽然不是特别流行，但值得考虑：
polymer – 可以跨浏览器支持html5网页组件的类库
meteor – 一个用于web应用程序的全栈平台
aurelia – 一种相对较新的，轻量级的跨平台框架
svelte – 一个将框架源代码转换为干净javascript的新项目
conditioner.js – 一个基于状态自动加载和卸载模块的类库
工具：执行通用任务构建工具自动执行各种web开发任务，例如预处理、编译、优化图像、缩小代码、代码分析和运行测试等。任务可以在一个可执行包中统一管理。
目前最受欢迎的工具如下：
gulp.js
gulp.js
网站 gulpjs.com
知识库 github.com/gulpjs/gulp
当前版本 3.9.1
每月下载 300万
虽然gulp不是第一个任务执行工具，它却很快成为了最受欢迎的。gulp使用易于阅读的javascript代码，将源文件加载到流中，并在将数据输出到构建文件夹之前，通过各种插件管理数据。在任何其它选项之前检查gulp.js是简单、快速和有趣的。
npmnpm
网站 npmjs.com
知识库 github.com/npm/npm
当前版本 4.5.0
每月下载 300万
npm是node.js包管理器，但其脚本工具可用于运行通用任务。对于具有少量依赖关系的简单项目来说，这是一个很好的选择。然而，更复杂的任务可能会变得不太适用。
gruntgrunt
网站 gruntjs.com
知识库 github.com/gruntjs/grunt
当前版本 1.0.1
每月下载 200万
grunt是第一批被大规模采用的javascript任务执行工具之一，但其速度和复杂的json配置却导致了gulp的兴起。现在这些问题已经得到了解决，grunt仍然是一个受欢迎的选择。
工具：模块绑定多个javascript文件的管理已经成为了一件繁琐的事情。默认情况下，浏览器文件不会被编译，因此其依赖关系必须以适当的顺序进行加载或连接。虽然有像es6模块和commonjs这样的选项，但是浏览器支持是有限的，因此模块绑定变得十分重要。
webpack
webpack
网站 webpack.js.org
知识库 github.com/webpack/webpack
当前版本 2.5.1
每月下载 600万
webpack支持所有流行的模块选项，并已成为react开发的代名词。虽然webpack声称是一个模块捆绑程序，但是已经可以用作通用任务运行程序了。
browserifybrowserify
网站 browserify.org
知识库 github.com/substack/node-browserify
当前版本 14.3.0
每月下载 260万
browserify支持node.js正在使用的commonjs模块，它将所有模块编译成单个浏览器兼容的文件。
requirejsrequirejs
网站 requirejs.org
知识库 github.com/jrburke/r.js
当前版本 2.3.3
每月下载 百万
requirejs是一种浏览器中的模块加载器，它也可以在node.js中使用。
工具：代码分析代码分析工具用于分析代码中潜在错误或偏离语法的标准。一个未闭合括号或未声明的变量一定会被检测出。
eslinteslint
网站 eslint.org
知识库 github.com/eslint/eslint
当前版本 3.19.0
每月下载 600万
eslint是一种可插拔的代码分析工具。每个规则都是一个插件，因此可以根据个人喜好进行配置。
jshint
jshint
网站 jshint.com
知识库 github.com/jshint/jshint
当前版本 2.9.4
每月下载 200万
jshint是一个灵活的javascript代码分析工具，它很好的平衡了真正的错误和老旧的语法。
jslint
jslint
网站 jslint.com
知识库 github.com/reid/node-jslint
当前版本 0.10.3
每月下载 50000
jslint是最早的代码分析工具之一，它实现了一套严格的默认规则。
工具：单元测试测试驱动开发的任务要求需要编写代码来测试自己的代码。目前有许多选择，包括ava, tape 和jest ，但目前最流行的三个工具是：
mochamocha
网站 mochajs.org
知识库 github.com/mochajs/mocha
当前版本 3.3.0
每月下载 500万
mocha是一个javascript测试框架，可以在node.js或浏览器中运行测试。它支持异步测试，并且经常与chai配合使用，这样可以使测试代码以可读取的方式表达。
jasminejasmine
网站 jasmine.github.io
知识库 github.com/jasmine/jasmine-npm
当前版本 2.6.0
每月下载 200万
jasmine是一个行为驱动的测试工具，可以在浏览器中自动测试ui和交互。
qunitqunit
网站
知识库 github.com/kof/node-qunit
当前版本 1.0.0
每月下载 25000
qunit是一个单元测试框架，可以在输入特定参数时，检查函数结果。它还上报测试结果，确保没有错过特定的代码分支。
总结与建议目前最为流程的框架是react，同时其它的框架也在向着流行的趋势发展。
如果需要一个安全的、通用的web应用程序，可以考虑使用vue.js。
整体框架已经不再受欢迎了，如果你需要对一个较大型项目进行严格的结构管理，angularjs是一个不错的选择。目前大多数人坚持使用angular 1.0版本，但是长远来讲，如果你愿意学习typescript，angular 4.x版本是个更好的选择。
jquery虽然现在并不十分流行，在技术新闻中也很少会被提到，但不可否认它是积极开发的，同时也是网站和应用程序的有力工具。jquery具有平缓的学习曲线，全球许多开发人员能够很好地理解。
如果你想要冒险，可以试试svelte这是一个有趣的客户端/服务器框架，它可以在构建时预先呈现javascript，并且可以改变我们开发的方式。
工具的选择因项目而异。虽然目前使用gulp的开发者占大多数，但webpack却越来越受欢迎。同时你也不能错过eslint和mocha等测试工具。
以上就是最新的前端框架、类库、工具比较的详细内容。