2017最好的JavaScript框架库和工具 — SitePoint

Posted 2020-09-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2017最好的JavaScript框架库和工具 — SitePoint相关的知识，希望对你有一定的参考价值。

与开发者数量相比，可能有更多的javascript框架、库和工具。截止到2017年5月，在GitHub上快速搜索能搜到超过110万的JavaScript项目。在npmjs上有50万的可用包，并且这些包每个月的下载量将近100亿次。

2017.05.29: 更新了本文，旨在能正确的描述当前JavaScript生态的状态。

本文着重讲述目前最流行的客户端JavaScript框架、库和工具之间的基本差异和他们的基本介绍。至于是不是你要寻找的最佳实践那是另外一个问题。你可以选择一个，并坚持使用一段时间，你要明白你最喜欢的那一个有可能被“更好”的所取代，而不管你是否选择使用这个更好的。

提纲目录

阅读本文章前，请接受下列条款和条件…！

因为JavaScript的发展日新月异，所以本文发布后可能立刻就过时了。
我所说的“最好”的意思是“最受欢迎和流行的项目”。我所列出的所有的免费/开源的项目可能没有你喜欢使用的那个。
已经宣告死亡的项目，比如：YUI不在本文所列的列表中，即使它还有很多的使用者。
本文只讨论客户端的项目。一些能在服务端工作的纯服务端框架，比如：Express.js 或者 Hapi不在本文的讨论列表中。
关于每一个项目的信息，我都是故意简明扼要的概述，目的是为了敦促你自己做进一步的研究。
每一个项目都我提供了一个“普及度指标”，但是众所周知统计数据往往都是不那么准确的，而且也有可能会误导别人，所以数据仅供参考。
我可能存在偏见，你也可能存在偏见，每个人都有可能存在偏见。本文列举的所有工具我并不是都有使用过，但我会告诉你我最喜欢使用哪个，但是你应该根据自己的需求做出自己的评估和选择。
在此声明，你的选择导致的不好的结果，我和SitePoint不负任何责任。

复杂的术语

“框架（framework）”、“库（library）”和“工具（tool）”这些词语，对于不同的人在不同时间不同的语境下会有不同的理解，但对于这些词语本文中使用的定义如下：

库

一个库是一个有组织的功能的集合。一个典型的库应该包括字符串处理、日期处理、html DOM元素处理、事件处理、cookie处理、动画、网络请求处理等功能。每个封装好的API函数都能将值正确的返回给调用他的应用程序，该应用程序是根据您选择的功能去看情况实现的。这可以看成汽车零部件的选择：你可以随意的选择零件来组装一个可以工作的完整车辆，但是你必须自己去建造你自己的引擎。

库通常提供的是一个更高的抽象级别，这对于实现细节和差异性会更加平滑和优雅。例如：Ajax通常会依赖XMLHttpRequest API，但是这需要几行代码就可以实现处理跨浏览器的细微的表现差别。库会提供一个ajax()函数，而你可以自由的专注的去实现你的更高级别的业务逻辑即可。

开发中使用一个库，可以节约20%的开发时间，因为你不必去关注某一功能具体的实现细节。然而缺点是：

如果你使用的库存在bug，往往难以定位和修复
如果有bug，不能保证库的开发团队会很快的发布补丁
一个补丁的更新可能会导致API的改变，进而会导致你的代码要做重大的改变来适应这个补丁的更新。

框架

一个框架是一个应用程序的骨架。他要求你要以一种特殊的方式（约定好的方式）进行软件的设计，必须特定的点加入你自己的逻辑。一般框架都会提供事件处理、存储、数据绑定等功能。拿汽车类比的话，框架会提供汽车的底盘、车身和发动机。保证功能正常运行的情况下你可以添加、删除和修改某些组件。

框架通常比库提供更高的抽象级别，框架能够快速帮你构建你项目的80%的工作。然而确定是：

如果你的剩下的20%的工作超出了框架的范围限制，将会变得很难做下去。
框架的更新是很困难的 - 如果是可更新的话
框架的核心代码和概念很少是发展成熟的。处理同样的事情时开发者总是能找到更好的处理方式。

工具

一个简单的工具能够提高开发效率，但是这并不是项目中必不可少的一部分。一般工具都包含：构建系统、编译器、转换功能、代码压缩、图像压缩、部署机制等功能。

工具应该提供一个更容易的开发流程。例如：很多开发者喜欢用Sass去开发CSS，因为Sass提供了代码分离、嵌套，渲染时变量、循环和函数。由于浏览器无法解析Sass/SCSS语法，所以在测试和部署之前代码必须经过适当的工具编译为CSS代码。

不要给我贴标签

库、框架和工具之间的区别往往是模糊的。框架可能会依赖于一个库。库也许能够实现类似于框架的方法。工具对于两者可能是必不可少的。我试着给每个项目加标签进行分类，但是范围可能会有所不同。

如果你听起来觉得这太复杂的话，你可以考虑使用vanilla JavaScript进行编码。这听上去很好，但是你将不可避免地编写自己的库或着框架代码。JavaScript是浏览器和操作系统这两层抽象之上的又一层抽象。

JavaScript 框架和库

普及流行的项目…

jQuery

key	value
类型	库
官网	jquery.com
仓库地址	github.com/jquery/jquery
最新版本	3.2.1
开发者	jQuery team
发布日期	2006年8月
文件大小	30kb min
用途	通用
使用率	全球72.4% 的网站在使用

在WordPress、ASP.NET和其他几个框架中jQuery仍然是被使用最多的一个库。他引入了CSS选择器的方式去选择页面DOM节点、链式的事件处理方式、动画和Ajax调用的封装在客户端是一种具有革命性的开发方式。

jQuery近年来随着前端技术的不断发展变得有点落寞的迹象，但对于需要使用JavaScript功能的项目来说，它仍然是一个可行的选择。

优点:

文件尺寸很小
入门简单（渐进的学习曲线），便捷的线上学习答疑社区环境
简洁的语法
易于扩展

缺点:

增加了个客户端的API速度开销
浏览器兼容性的改善，使得它变的不是那么重要了
用法扁平
一些行业抵制反对不必要的使用.

React

key	value
类型	库
官网	facebook.github.io/react/
仓库地址	github.com/facebook/react
最新版本	15.5.4
开发者	Facebook and contributors
发布日期	2013年3月
文件大小	21kb min
用途	单页面应用
使用率	低

也许是过去一年中最受关注的JavaScript库，React声称是一个构建用户界面的JavaScript库。React侧重于MVC开发模式中的View的部分，并且可以更轻松的创建保留状态的UI组件。他是最先实现虚拟DOM的JavaScript库之一，它在内存中计算结构的差别然后高效的更新页面的显示。

统计中显示React的使用率并不高，可能是因为他被用于应用程序而不是网站。大约38%的开发者声称会使用React。

优点:

文件小, 高效, 性能高, 灵活
组件模型简单
丰富的文档和在线资源
支持服务端渲染
目前很流行，并且在告诉发展

缺点:

要学习新的概念和语法
必须要依赖构建工具
可能要求其他库或者框架来提供model和controller部分的功能
可能与修改DOM的代码或者其他库不兼容

可以通过我们的精品课程学习了解更多React，React the ES6 Way。

Lodash and Underscore

Lodash

key	value
类型	库
官网	lodash.com/
仓库地址	github.com/lodash/lodash/
最新版本	4.17.4
开发者	John-David Dalton
发布日期	2012年4月
文件大小	4kb – 24kb min
用途	通用
使用率	低

Underscore

key	value
类型	库
官网	underscorejs.org/
仓库地址	github.com/jashkenas/underscore
最新版本	1.8.3
开发者	Jeremy Ashkenas
发布日期	2009年10月
文件大小	6kb min
用途	通用
使用率	低

Lodash 和 Underscore 在本节中合在了一块，因为它们都提供了数百个功能性的JavaScript实用程序来扩充原生字符串，数字，数组和其他原始对象的方法，他们是同一类的库。他们之间的功能有一些重复，所以你不能也不必在同一个项目中同时使用这两个库。

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

优点:

小且简单
完善的文档方便学习
和大部分的库、框架都是兼容的
不扩展内置对象
客户端和服务端都可以使用

缺点:

只有部分方法支持ES2015和更新的JavaScript版本

AngularJS 1.x

AngularJS

key	value
类型	框架
官网	angularjs.org
仓库地址	github.com/angular/angular.js
最新版本	1.6.4
开发者	Google
发布日期	2010年10月
文件大小	144kb
用途	单页应用
使用率	低

Angular是第一个出现在本文列表中的MVC应用程序框架 。Angular的最流行的版本就是1.x版本，他支持HTML和数据的双向绑定，并从业务逻辑中解耦DOM的操作。

Angular 1.x 版本仍在发展，尽管版本2（现在是版本4了）已经发布。不理解？往下看…

优点:

被几家大公司广泛使用的流行框架
构建现代web应用程序的单一解决方案
MEAN (MongoDB, Express.JS, AngularJS, NodeJS)技术栈的一部分，有大量的文章和教程可供学习

缺点:

相比其他框架有着陡峭的学习曲线
代码库文件很大
无法直接升级到Angular 2.x版本
尽管是谷歌项目，谷歌似乎没有使用它？

Angular 2.x (现在 4.x)

Angular

key	value
类型	框架
官网	angular.io
仓库地址	github.com/angular/angular.js
最新版本	4.1
开发者	Google
发布日期	2016年9月
文件大小	450kb min
用途	单页应用
使用率	低

Angular 2.0 于2016年9月发布。相比较之前的版本是完全被重写了，2.x版本引入了使用TypeScript（需要被编译为JavaScript）创建的基于模块化组件的模型。更加混乱的是，在2017年的3月份发布了4.0的版本（版本3直接被跳过，为了避免版本语义的问题）。

Angular 2+版本和v1版本之间有着根本的区别。两者互不兼容—— 或者 Google 应该给2+版本另外取一个不同的名字!

优点:

构建现代web应用程序的单一解决方案
仍然是 MEAN 技术栈的一部分，尽管Angular 2+ 教程只有很少的一部分是可用的
TypeScript提供了一些类似于静态语言（例如：C#、Java）的新特性。

缺点:

相比其他框架有着陡峭的学习曲线
代码库文件很大
无法从Angular 1.x版本直接升级
与1.x相比，Angular 2.x的使用率相对较低
尽管是谷歌项目，谷歌似乎没有使用它？

Vue.js

key	value
类型	框架
官网	vuejs.org
仓库地址	github.com/vuejs/vue
最新版本	2.0
开发者	Evan You
发布日期	2014年2月
文件大小	19kb min
用途	单页应用
使用率	低

Vue.js是一个用于构建用户界面的轻量级渐进式框架。Vue.js的核心是提供一个类似于React的虚拟DOM服务于视图层，他不仅可以独立的构建一个完整的单页面应用，也可以与其他库集成使用。该框架是由之前在AngularJS工作过的尤雨溪创建的。

Vue.js使用HTML模板的语法绑定DOM实例数据。模型就是普通的JavaScript对象，当数据被改变时，它会自动更新视图。另外还提供了Vue.js生态工具，其中包括：脚手架（scaffolding）、路由（routing）、状态管理（state management）、动画（animations）等。

优点:

快速发展普及，并且日益流行
很容易开发出高质量的项目，让开发者很有成就感
依赖性小，性能好

缺点:

新项目使用Vuejs——可能存在很大风险
依赖于单个开发者（目前此项目是尤小右一个人开发）的更新
相较于其他框架，Vuejs的教程资源不多

Backbone.js

key	value
类型	框架
官网	backbonejs.org
仓库地址	github.com/jashkenas/backbone/
最新版本	1.3.3
开发者	Jeremy Ashkenas
发布日期	2010年10月
文件大小	8kb min
用途	单页应用
使用率	低

Backbone.js是提供在服务器端框架中常见的MVC结构的最早的客户端选项之一。Backbone.js只有Underscore.js一个依赖，而且Backbone.js和Underscore.js都是出自同一个开发者之手。

Backbone.js自称是一个库，因为他可以与其他项目集成。我猜大部分人都把他当做一个框架，尽管不像其他人认为的那样。

优点:

小, 轻量，简单
不在HTML中添加业务逻辑
完善的文档
很多应用程序使用，如：Trello, WordPress.com, LinkedIn 和 Groupon 等

缺点:

相较于其他框架（如AngularJS）它的抽象级别很低（尽管这被看做一种优势）
需要依赖其他组件来实现一些功能，例如：数据绑定功能
目前越来越多的框架已经不再采用MVC结构了

Ember.js

key	value
类型	框架
官网	emberjs.com
仓库地址	github.com/emberjs/ember.js
最新版本	2.15.0
开发者	Ember team
发布日期	2011年12月
文件大小	95kb min
用途	单页应用
使用率	低

Ember.js基于 Model-View-ViewModel (MVVM)模式最有异议的框架之一。他在单个包中实现了模板、数据绑定和库。他的“约定优于配置”的概念对于Ruby on Rails 的使用者来说一点都不陌生。

优点:

为客户端应用程序构建提供了单一的解决方案
开发者能够很快的上手开发程序并投入生产——它依赖于Jquery
良好的向后兼容和升级选项
采用了现代web开发的标准

缺点:

大量可分发（large distributable）
和那些朝着小组件结构的方向发展的框架相比他是庞大笨重的
陡峭的学习曲线——这是Ember学习的方法或者没有方法学习

Knockout.js

key	value
类型	框架
官网	knockoutjs.com](http://knockoutjs.com))
仓库地址	github.com/knockout/knockout
最新版本	3.4.2
开发者	Steve Sanderson
发布日期	2010年7月
文件大小	59kb min
用途	单页应用
使用率	低

一个较老的MVVM框架，Knockout.js采用观察者模式去确保UI与底层数据是保持同步的。他的特性是：模板化和依赖追踪。

优点:

小，轻量，而且没有依赖
优秀的浏览器支持（那怕是IE6）
完善的文档

缺点:

大项目将会变得混乱复杂
发展很缓慢
使用率在缩水

其他值得关注的

渴望更多？下面的这些项目虽然不是很流行但是很值得关注：

Polymer – 能够跨浏览器支持HTML5 web组件的库。
Meteor – 一个用于web应用程序的全栈平台。
Aurelia – 一个较新的，轻量级的，跨平台的框架。
Svelte – 一个非常新的项目，这个项目可以把框架的源码解压缩并格式化为显示友好的JavaScript。
Conditioner.js – 一个基于状态自动决定加载或者卸载模块的库。

工具: 通用自动构建工具

构建工具可以自动构建各种web开发任务，比如：预编译、编译、图像压缩优化、代码压缩、代码校验以及运行测试等。并且可以在单一可执行的文件中管理所需的任务。最常用的工具如下所列：

Gulp.js

key	value
官网	gulpjs.com
仓库地址	github.com/gulpjs/gulp
最新版本	3.9.1
月下载量	300万

Gulp.js并不是第一个自动构建工具，但他很快变成了最流行的，他也是我个人最喜欢用的。Gulp使用易于阅读的JavaScript代码，将源文件加载到流中，并在将数据输出到构建文件夹之前通过各种插件管道处理数据。它简单、快速、有趣——Gulp.js和之前任何一个可选项比较你都会发现这些特点（examine Gulp.js before any other option）。

npm

key	value
官网	npmjs.com
仓库地址	github.com/npm/npm
最新版本	4.5.0
月下载量	300万

npm是Node.js的包管理工具，但是他的脚本工具可以被用于通用的自动构建工具。对于一个没有很多依赖的简单项目来说这是一个不错的选择。但是，用于很复杂的任务你会很快发现这是不现实的。

Grunt

key	value
官网	gruntjs.com
仓库地址	github.com/gruntjs/grunt
最新版本	1.0.1
月下载量	200万

Grunt是第一个实现批量处理的JavaScript任务自动构建工具之一，但是他的构建速度的瓶颈和复杂的JSON配置导致了Gulp的快速发展。现在最糟糕的问题已经被解决了，Grunt仍然是一个很好的工具可供选择。

工具:模块打包工具

管理越来越多的JavaScript文件将很快变成一个苦差事。一般情况下，浏览器加载文件是不会被编译的，所以文件之间的依赖关系必须通过合适的文件加载顺序来保证。处理这种顺序的方式有很多，比如： ES6 Modules 和 CommonJS，但是浏览器支持的限制，模块打包工具变得必不可少。

Webpack

key	value
官网	webpack.js.org
仓库地址	github.com/webpack/webpack
最新版本	2.5.1
月下载量	600万

Webpack支持所有流行的模块配置，并已成为React开发的代名词。虽然Webpack声称是模块打包工具，Webpack也可以用于通用的自动构建工具。

Browserify

key	value
官网	browserify.org
仓库地址	github.com/substack/node-browserify
最新版本	14.3.0
月下载量	260万

Browserify可以让你使用Node.js的CommonJS模块方式来组织你的JavaScript代码，通过编译将所有模块打包在一个浏览器兼容的文件中。

RequireJS

key	value
官网	requirejs.org
仓库地址	github.com/jrburke/r.js
最新版本	2.3.3
月下载量	100万

RequireJS是一个在浏览器端（客户端）的模块加载器，尽管他也能被用于Node.js端（服务端）。

工具: 代码校验工具

“代码校验工具（Linting）”会分析你的代码，检测代码中潜在的错误和不规范的语法结构。这样你的代码中就不会再出现缺少括号或者未声明的变量这样的错误。

ESLint

key	value
官网	eslint.org
仓库地址	github.com/eslint/eslint
最新版本	3.19.0
月下载量	600万

ESLint是一个可插拔的代码校验工具。每一个校验规则都是一个插件来实现，所以他可以灵活配置成你所需要的样子。

JSHint

key	value
官网	jshint.com
仓库地址	github.com/jshint/jshint
最新版本	2.9.4
月下载量	200万

一个灵活的JavaScript代码校验工具，他可以很好的在真正的错误和严格的语法要求之间取得很好的平衡（既可以发现代码中的错误，又不至于严格的按照死板的语法标准来校验代码）。JSHint是我个人最喜欢用的一个校验工具。

JSLint

key	value
官网	jslint.com
仓库地址	github.com/reid/node-jslint
最新版本	0.10.3
月下载量	5万

这是最先实现一套严格默认规则的代码校验工具之一，但是这对于我是使用场景貌似不太一致（我不喜欢使用这个工具）。

工具: 测试工具

TDD（测试驱动开发）需要你先编写测试代码（用来测试业务代码），然后再开始写业务代码。当然如果你能编写代码去测试你的测试代码那就更好了。

这样的工具你会有很多选择，比如：Ava, Tape 和 Jest ，但是最流行的三个如下所列：

Mocha

key	value
官网	mochajs.org
仓库地址	github.com/mochajs/mocha
最新版本	3.3.0
月下载量	500万

Mocha是一个既可以在Node.js运行也可以在浏览器运行的JavaScript测试框架。Mocha支持异步的测试方式，他通常和Chai一起使用，为了使测试代码能够以一种可读的方式被表示。

Jasmine

key	value
官网	jasmine.github.io
仓库地址	github.com/jasmine/jasmine-npm
最新版本	2.6.0
月下载量	200万

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

QUnit

key	value
官网	https://qunitjs.com/
仓库地址	github.com/kof/node-qunit
最新版本	1.0.0
月下载量	2.5万

毫无疑问，QUnit是一个单元测试框架，他可以在传递特定参数时检查函数结果。它还将反馈测试覆盖率，以确保您没有遗漏特定的代码分支。

工具:其他

尽管我尽了很大的努力，我还是接受有人不喜欢JavaScript！也许编译器比如：TypeScript, LiveScript 和 CoffeeScript能够让你的开发生活变得有趣一点。另外，现代的转换工具Babel能够将简洁的 ES2015代码转换为浏览器兼容的ES5代码，也许又会让你有更多的乐趣。

市面上现在存在几十个JavaScript驱动的HTML模板引擎，比如：Mustache, Handlebars, Pug (Jade) 和 EJS。我比较倾向于选择使用保持JavaScript语法的轻量模板，比如：EJS 和 doT。

最后, 能自动生成文档的时候谁会愿意自己手动的去写呢？ES2015兼容的文档生成器有： ESDoc, JSDoc, YUIdoc, documentation.js 和 Transcription。

总结和推荐

版权声明

本译文仅用于学习、研究和交流目的，欢迎非商业转载。转载请注明出处、译者和众成翻译的完整链接。要获取包含以上信息的本文Markdown源文本，请点击这里。

以上是关于2017最好的JavaScript框架库和工具 — SitePoint的主要内容，如果未能解决你的问题，请参考以下文章

2017年前端框架类库工具大比拼

前端框架类库工具大比拼