深度调研前端框架Vue、React、Angular、jQuery，附参考模板！_开发框架调研

前端交流企鹅：724396871

近两年前端各框架流行程度与趋势分析

      

图1

上图显示了2016年10月至2017年10月的12个月期间，各个框架的绝对受欢迎程度及其增长情况。可以看出：

①  Vue 的成长速度非常快。

②  Angular的受欢迎程度基本保持不变。

③  jQuery仍然非常受欢迎，但用户使用量越来越少。

④   React 既庞大又在快速增长。

 

明显以上四个框架在开发中优势较大，所以，本次调研在Vue 、Angular 、React 和jQuery之间做比较。

 

 

Vue.js框架

特点：MVVM框架、数据驱动、组件化、轻量、简洁、高效、快速、模块友好等。

资源上：在以上所有框架中，Vue.js虽然是其中最为年轻的框架，但它已经拥有不少成熟的UI组件、开发框架和实用库、辅助工具等，在开发中可以配合Vue.js框架使用。以下为网络整理组件库总结链接地址：

https://www.cnblogs.com/jearay/p/8580958.html

值得一提的是Vue.js提供脚手架Vue-cli，本质是一套文件结构，包含基础的依赖库，能够帮助快速的开始一个Vue项目。

在兼容性方面：Vue.js不支持IE8及其以下版本，因为Vue.js使用了IE8不能模拟的es5特性。同时，Vue.js支持所有兼容es5的浏览器。具体版本如下图2。

图2 Vue2.0兼容情况

在调试与维护方面：对于Vue.js,调试有着专门的插件Vue-devtools，是一款基于chrome浏览器的插件，能够极大提高调试的效率。之前提到一个Vue的特点就是它是一个MVVM设计模式的框架，这样的模式会使代码维护起来更加方便。

Vue的缺点：生态与老牌框架仍是不足。编辑器对Vue的支持度也是不够，缺少代码提示。

适用场景：Vue的解决方案适用于小型应用，但对于对于大型应用而言不太适合。

附参考模板：https://www.cnblogs.com/herozhou/p/7434931.html

http://www.templatesy.com/Article/550.html

 

 

 

React.js框架

React是由Facebook开发并维护的一款JS库。

特点：声明式设计、虚拟DOM、JSX语法、组件化、单向响应数据流、轻等。

资源上：React框架是如今最火爆的前端技术框架。它有最吸引人的一点就是拥有众多的成熟的组件库，比如其中一些较为出名的React Material-UI、React-Bootstrap、Ant Design React等，以下有常见较成熟组件库的简单介绍和地址：

https://blog.csdn.net/snsHL9db69ccu1aIKl9r/article/details/79454984

在兼容性方面：V15版本以后正式告别IE8，可以通过es5-shim和es5-sham来兼容。

在调试与维护方面：Facebook为React提供了一个很给力的调试工具，React Developer Tools。可以自由安装在Chrome中或者FireFox中，上手基本没有难度。React的组件化特性使每个组件都拥有独立的功能视图模块，许多小的组件组成一个大的组件，整个页面也是由组件组合成的，非常利于重复利用和后期的维护。

React的缺点：React本身只是一个View层的一个框架而已，如果需要开发的型的应用，需要配合其他的库和框架。

适用场景：React是组件化开发，非常适用于不是很复杂的移动端。

附参考模板：https://github.com/yezihaohao/react-admin

                    https://github.com/zuiidea/antd-admin

                    https://github.com/zhaoyu69/antd-spa

 

Angular.js框架

Angular是由Google负责维护的JS库。

特点：MVC模式、模块化、自动化双向数据绑定、依赖注入等。

在资源上：Angular目前由互联网巨头Google开发维护，在资源上是毋庸置疑的。社区基础是不用担心的，整个生态也已经是非常的完整，在开发中可以使用的组件、UI框架和库、服务性质的插件、用于测试与模拟数据的插件有许多。以下有Angular成熟好用的插件集合：

https://segmentfault.com/a/1190000003858219

在兼容性方面：AngularJS 1.2将继续支持IE8，但核心团队不会花时间去针对IE8或更早的IE浏览器问题作集成测试。如果确实需要在兼容IE8的同时使用1.3，就需要自己做全面测试。不过，这样做的话性价比比较低。所以，在工程实践中，一般以IE8为分界，如果需要兼容，就用1.2，否则就用之后的版本。在其他浏览器中，Angular的兼容是没有什么问题的。

调试与维护：关于Angular的调试，有专门用于浏览器的插件batarang。它可以查看作用域、输出调试信息、以及对性能进行监控。angular不像普通的js，如果抛出错误，只会报angularJs的错，找不到错误代码的位置，借助于batarang可以方便调试angular代码。
Angular的缺点：第一点，Angular框架过重，不像Vue和React是非常轻量级的框架，过大的框架导致性能方面消耗严重，这不是一个正常的前端网站能够容忍的，同时它的学习成本相对来说较高。第二点，Angular的文档编制非常糟糕，暴露的API中相当一部分是没有任何有用描述的方法和属性的简短存根。

适用场景：它试用在大型的浏览器端，大型网站项目。

附参考模板：https://github.com/akveo/blur-admin

                      https://github.com/akveo/ngx-admin

                       http://www.mycodes.net/154/9043.htm

                       https://github.com/myopenresources/cc

 

 

jQuery框架

与其说jQuery是框架倒不如说它是一个JS库更合适。它是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery核心特性：轻量级、具有独特的链式语法和短小清晰的多功能接口、具有高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件、jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera9.0+等。

在资源上：jQuery的易扩展性，吸引了来自全球开发者来编写jQuery的扩展插件。目前官方支持的插件已经有小几千种，民间插件就更多了。各种插件库、社区和工具网站也是非常多的。在所有的框架中jQuery在这一部分应该是最强的了。

兼容性：jQuery的1.x版本可以兼容到IE低版本（IE6、IE7、IE8），2.x及以上版本抛弃了对IE低版本的支持。

调试与维护：可以Chrome环境中安装jQuery Debugger插件。在Chrome默认的调试器中可以看到由插件生成的jQuery专用的调试栏。

jQuery的缺点：插件兼容性问题，jQuery不能向后见日兼容，这就导致了插件由于版本之间的不兼容出现的问题。再者在同一个项目中同时引入多个插件可能会引起插件之间的冲突，导致难以修复的BUG。

附参考模板：https://github.com/usmanhalalit/charisma