摘要：
本文着重讲述目前最流行的客户端JavaScript框架、库和工具之间的基本差异和他们的基本介绍。至于是不是你要寻找的最佳实践那是另外一个问题。你可以选择一个，并坚持使用一段时间，你要明白你最喜欢的那一个有可能被“更好”的所取代，而不管你是否选择使用这个更好的。
与开发者数量相比，可能有更多的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%的开发时间，因为你不必去关注某一功能具体的实现细节。然而缺点是：
框架
一个框架是一个应用程序的骨架。他要求你要以一种特殊的方式（约定好的方式）进行软件的设计，必须特定的点加入你自己的逻辑。一般框架都会提供事件处理、存储、数据绑定等功能。拿汽车类比的话，框架会提供汽车的底盘、车身和发动机。保证功能正常运行的情况下你可以添加、删除和修改某些组件。
框架通常比库提供更高的抽象级别，框架能够快速帮你构建你项目的80%的工作。然而确定是：
工具
一个简单的工具能够提高开发效率，但是这并不是项目中必不可少的一部分。一般工具都包含：构建系统、编译器、转换功能、代码压缩、图像压缩、部署机制等功能。
工具应该提供一个更容易的开发流程。例如：很多开发者喜欢用
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
。
优点:
-
文件小, 高效, 性能高, 灵活
-
组件模型简单
-
丰富的文档和在线资源
-
支持服务端渲染
-
目前很流行，并且在告诉发展
缺点:
可以通过我们的精品课程学习了解更多React，
React the ES6 Way
。
Lodash and Underscore
Lodash
Underscore
Lodash 和 Underscore 在本节中合在了一块，因为它们都提供了数百个功能性的JavaScript实用程序来扩充原生字符串，数字，数组和其他原始对象的方法，他们是同一类的库。他们之间的功能有一些重复，所以你不能也不必在同一个项目中同时使用这两个库。
客户端使用率很低，但是可以在服务器端的Node.js应用程序中使用这两个库。
优点:
-
小 且 简单
-
完善的文档方便学习
-
和大部分的库、框架都是兼容的
-
不扩展内置对象
-
客户端和服务端都可以使用
缺点:
AngularJS 1.x
AngularJS
Angular是第一个出现在本文列表中的MVC应用程序框架 。Angular的最流行的版本就是1.x版本，他支持HTML和数据的双向绑定，并从业务逻辑中解耦DOM的操作。
Angular 1.x 版本仍在发展，尽管版本2（现在是版本4了）已经发布。不理解？往下看…
优点:
缺点:
-
相比其他框架有着陡峭的学习曲线
-
代码库文件很大
-
无法直接升级到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+版本另外取一个不同的名字!
优点:
缺点:
Vue.js
Vue.js
Vue.js是一个用于构建用户界面的轻量级渐进式框架。Vue.js的核心是提供一个类似于React的虚拟DOM服务于视图层，他不仅可以独立的构建一个完整的单页面应用，也可以与其他库集成使用。该框架是由之前在AngularJS工作过的尤雨溪创建的。
Vue.js使用HTML模板的语法绑定DOM实例数据。模型就是普通的JavaScript对象，当数据被改变时，它会自动更新视图。另外还提供了Vue.js生态工具，其中包括：脚手架（scaffolding）、路由（routing）、状态管理（state management）、动画（animations）等。
优点:
-
快速发展普及，并且日益流行
-
很容易开发出高质量的项目，让开发者很有成就感
-
依赖性小，性能好
缺点:
Backbone.js
Backbone.js
