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

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

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

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

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

提纲目录

• 复杂的术语

• 库

• 框架

• 工具

• 不要给我贴标签

• JavaScript 框架和库

• jQuery

• React

• Lodash and Underscore

• AngularJS 1.x

• AngularJS 2.x (now 4.x)

• Vue.js

• Backbone.js

• Ember.js

• Knockout.js

• 其他值得关注的

• 工具:通用自动构建工具

• Gulp.js

• npm

• Grunt

• 工具:模块打包工具

• Webpack

• Browserify

• RequireJS

• 工具:代码校验工具

• ESLint

• JSHint

• JSLint

• 工具:测试框架工具

• Mocha

• Jasmine

• QUnit

• 工具:其他

• 总结和推荐

• 评论

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

• 因为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

jQuery

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

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

优点:

• 文件尺寸很小

• 入门简单（渐进的学习曲线），便捷的线上学习答疑社区环境

• 简洁的语法

• 易于扩展

缺点:

• 增加了个客户端的API速度开销

• 浏览器兼容性的改善，使得它变的不是那么重要了

• 用法扁平

• 一些 行业 抵制 反对不必要的使用.

React

React

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

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

优点:

• 文件小, 高效, 性能高, 灵活

• 组件模型简单

• 丰富的文档和在线资源

• 支持服务端渲染

• 目前很流行，并且在告诉发展

缺点:

• 要学习新的概念和语法

• 必须要依赖构建工具

• 可能要求其他库或者框架来提供model和controller部分的功能

• 可能与修改DOM的代码或者其他库不兼容

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

Lodash and Underscore

Lodash

Underscore

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

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

优点:

• 小 且 简单

• 完善的文档方便学习

• 和大部分的库、框架都是兼容的

• 不扩展内置对象

• 客户端和服务端都可以使用

缺点:

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

AngularJS 1.x

AngularJS

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

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

Vue.js

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

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

优点:

• 快速发展普及，并且日益流行

• 很容易开发出高质量的项目，让开发者很有成就感

• 依赖性小，性能好

缺点:

• 新项目使用Vuejs——可能存在很大风险

• 依赖于单个开发者（目前此项目是尤小右一个人开发）的更新

• 相较于其他框架，Vuejs的教程资源不多

Backbone.js

Backbone.js

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

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

优点:

• 小, 轻量 ，简单

• 不在HTML中添加业务逻辑

• 完善的文档

• 很多应用程序使用，如：Trello, WordPress.com, LinkedIn 和 Groupon 等

缺点:

• 相较于其他框架（如AngularJS）它的抽象级别很低（尽管这被看做一种优势）

• 需要依赖其他组件来实现一些功能，例如：数据绑定功能

• 目前越来越多的框架已经不再采用MVC结构了

Ember.js

Ember.js

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

优点:

• 为客户端应用程序构建提供了单一的解决方案

• 开发者能够很快的上手开发程序并投入生产——它依赖于Jquery

• 良好的向后兼容和升级选项

• 采用了现代web开发的标准

缺点:

• 大量可分发（large distributable）

• 和那些朝着小组件结构的方向发展的框架相比他是庞大笨重的

• 陡峭的学习曲线——这是Ember学习的方法或者没有方法学习

Knockout.js

Knockout.js

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

优点:

• 小，轻量，而且没有依赖

• 优秀的浏览器支持（那怕是IE6）

• 完善的文档

缺点:

• 大项目将会变得混乱复杂

• 发展很缓慢

• 使用率在缩水

其他值得关注的

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

• Polymer – 能够跨浏览器支持HTML5 web组件的库。

• Meteor – 一个用于web应用程序的全栈平台。

• Aurelia – 一个较新的，轻量级的，跨平台的框架。

• Svelte – 一个非常新的项目，这个项目可以把框架的源码解压缩并格式化为显示友好的JavaScript。

• Conditioner.js – 一个基于状态自动决定加载或者卸载模块的库。

工具: 通用自动构建工具

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

Gulp.js

Gulp.js

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

npm

npm

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

Grunt

Grunt

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

工具:模块打包工具

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

Webpack

Webpack

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

Browserify

Browserify

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