（点击
上方公众号
，可快速关注）
英文：Craig Buckler 译文：葡萄城控件
www.cnblogs.com/powertoolsteam/p/front_end_framework_2017.html
如有好文章投稿，请点击 → 这里了解详情
相比于JavaScript开发人员的数量，目前JavaScript框架、类库和工具的数量似乎更多一些。截至2017年5月，GitHub上的快速搜索显示，有超过110万个JavaScript项目。npmjs.org有50万个可用的软件包，每月下载量近100亿次。
本文将会讨论目前最为流行的客户端JavaScript框架、类库和工具以及它们之间的基本差异。也许本文无法告诉你哪个是最好的，但是最适合自己项目的，就是最好的。
类库
类库是一个有组织的功能集合。典型的类库包括字符串处理、日期、HTML DOM元素、事件、Cookie、动画、网络请求等功能。你可以自己实现一个函数，以便选择该函数被调用时是否需要返回一个值。
类库通常提供一种高级别的抽象方法，能够帮助顺利实现项目的细节部分。例如，Ajax通常依赖于XMLHttpRequest API，只需要几行代码就实现功能，只是浏览器之间存在细微的差异。类库提供了更简单的ajax（）函数，因此开发者可以专注于更高级别的业务逻辑上。
类库能够使将开发时间缩短20％，开发者不必担心细节实现。
但是也有缺点：
-
类库中的错误难以定位和修复
-
开发团队不能保证快速发布补丁
-
补丁程序可能会更改API，导致大量代码必须更改
框架
框架是应用程序的骨架。它要求以特定的方式来进行软件设计，在某些节点上实现自己的逻辑。框架通常提供了事件、存储和数据绑定等功能。
框架通常提供了比类库更高层次的抽象，帮助快速构建项目的前80％。
框架的缺点：
工具
工具会帮助开发工作，但却不是项目的组成部分。工具包括构建系统、编译器、转译器、代码分割器、图像压缩器、部署机制等。
工具帮助实现一个更容易的开发过程。例如，对比于CSS，许多编码者更喜欢Sass，因为它提供了代码分离、嵌套、渲染时变量、循环和函数。浏览器不了解Sass / SCSS语法，因此在测试和部署之前，必须使用适当的工具将代码编译为CSS。
类库、框架和工具的区别
类库、框架和工具之间的区别很小。框架可以包括一个类库，类库可以实现类似框架的方法，项目中任何一种工具都是必不可少的。所以不需要明确的区分类库、框架和工具。
JavaScript框架和类库
以下是按照流行程度进行的排序：
jQuery
|
jQuery
|
|
|
类型
|
类库
|
|
网站
|
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 和 Underscore
|
Lodash
|
|
|
类型
|
类库
|
|
网站
|
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应用程序中使用这两个类库。
优点：
-
小而简单
-
良好的文档易于学习
-
与大多数类库和框架兼容
-
不扩展内置对象
-
可以在客户端或服务器上使用
缺点：
AngularJS 1.x
|
AngularJS
|
|
|
类型
|
框架
|
|
网站
|
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仍在开发中。
优点：
缺点：
-
学习曲线陡峭
-
大的代码库
-
无法升级到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应该给项目起一个不同的名字！
优点：
缺点：
-
学习曲线陡峭
-
大的代码库
-
不能从Angular 1.x升级
-
与1.x相比，Angular 2.x较难理解
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的使用度似乎很低，因为它是在应用程序中使用而不是在网站。
优点：
-
小巧，高效，快捷灵活
-
简单的组件模型
-
良好的文档和在线资源
-
可实现服务器端渲染
-
目前受欢迎，经历了快速增长
缺点：
了解更多关于React the ES6 Way
Vue.js
|
Vue.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声称是一个类库，因为它可以与其它项目集成，但是我觉得大多数开发人员都认为它是一个框架。
优点：
缺点：
-
与AngularJS等其它框架相比，抽象度较低
-
需要额外的组件来实现数据绑定等功能
-
最新的框架已经不采用MVC架构了
Ember.js
|
Ember.js
|
|
|
类型
|
框架
|
|
网站
|
emberjs.com
|
|
知识库
|
github.com/emberjs/ember.js
|
|
当前版本
|
2.15.0
|
|
开发人员
|
Ember team
|
|
发布日期
|
2011年12月
|
|
大小
|
最小95kb
|
|
用途
|
单页面应用
|
|
使用度
|
低
|
Ember.js是基于Model-View-ViewModel（MVVM）模式的框架之一。它在单个包中实现模板化、数据绑定和类库。
优点：
缺点：
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是简单、快速和有趣的。
NPM
|
NPM
|
|
|
网站
|
npmjs.com
|
|
知识库
|
github.com/npm/npm
|
|
当前版本
|
4.5.0
|
|
每月下载
|
300万
|
npm是Node.js包管理器，但其脚本工具可用于运行通用任务。对于具有少量依赖关系的简单项目来说，这是一个很好的选择。然而，更复杂的任务可能会变得不太适用。
Grunt
|
Grunt
|
|
|
网站
|
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声称是一个模块捆绑程序，但是已经可以用作通用任务运行程序了。
Browserify
|
Browserify
|
|
|
网站
|
browserify.org
|
|
知识库
|
github.com/substack/node-browserify
|
|
当前版本
|
14.3.0
|
|
每月下载
|
260万
|
Browserify支持Node.js正在使用的CommonJS模块，它将所有模块编译成单个浏览器兼容的文件。
