多种前端框架的优缺点

Web前端目前现有的UI框架：Bootstrap、JqueryUi、Foundation、Semantic UI、Pure、UIkit

UI框架优缺点具体可参考：https://blog.csdn.net/qq_41852103/article/details/79619250

Web前端目前现有的JS框架：JQuery、Zepto、VueJS、AngularJS、ReactJS、backbone 、ember

一、JQuery

优点：  1、轻量级：大小只有18KB。

             2、强大的选择器：JQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及JQuery独创的高级而且复杂的选择器，另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。

             3、出色的DOM操作的封装：JQuery封装了大量常用的DOM操作

             4、可靠的事件处理机制：JQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华，是的JQuery在处理事件绑定的时候相当可靠。在预留退路、循序渐进以及非入侵式编程思想方面，JQuery也做得非常不错。

             5、完善的Ajax：JQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

             6、不污染顶级变量：JQuery只建立一个名为JQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交流控制权，绝对不会污染其他的对象。该特性是JQuery可以与其他JavaScript库共存，在项目中放心地引用而不需要考虑到后期的冲突。

             7、出色的浏览器兼容性：JQuery能够在IE6.0+,FF 2+,Safari2.+和Opera9.0+下正常运行。JQuery同时修复了一些浏览器之间的的差异，使开发者不必在开展项目前建立浏览器兼容库。

             8、链式操作方式：JQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个JQuery对象上的一组动作，可以直接接连写无需要重复获取对象。这一特点使得JQuery的代码无比优雅。

            9、隐式迭代：当用JQuery找到带有“.myClass”类的全部元素，然后隐藏他们时。无需循环遍历每一个返回的元素。相反，JQuery里的方法都被设计成自动操作的对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅度地减少代码量。

           ·10、行为层与结构层的分离：开发者可以使用选择器选中元素，然后直接给元素添加事件。这种将行为层与结构层完全分离的思想，可以使JQuery开发人员和HTML或其他页面开发人员各司其职，摆脱过去开发冲突或个人单干的开发模式。同时，后期维护也非常方便，不需要在HTML代码中寻找某些函数和重复修改HTML代码。

             11、丰富的插件支持：JQuery的易扩展性，吸引了来自全球开发者来编写JQuery的扩展插件。目前已经有超过几百种官方插件支持，而且还不断有新插件面试。

             12、完善的文档：JQuery的文档非常丰富，例如JQuery的中文API。

             13、开源：JQuery是一个开源的产品，任何人都可以自由地使用并提出修改意见。
 

缺点：

              1、不能向后兼容：每一个新版本不能兼容早期的版本。举例来说，有些新版本不再支持某些selector，新版jQuery却没有保留对它们的支持，而只是简单的将其移除。这可能会影响到开发者已经编写好的代码或插件。

              2、插件兼容性：与上一点类似，当新版jQuery推出后，如果开发者想升级的话，要看插件作者是否支持。通常情况下，在最新版jQuery版本下，现有插件可能无法正常使用。开发者使用的插件越多，这种情况发生的几率也越高。我有一次为了升级到jQuery 1.3，不得不自己动手修改了一个第三方插件。

             3、多个插件冲突：在同一页面上使用多个插件时，很容易碰到冲突现象，尤其是这些插件依赖相同事件或selector时最为明显。这虽然不是jQuery自身的问题，但却又确实是一个难于调试和解决的问题。

             4、jQuery的稳定性：jQuery没有让浏览器崩溃，这里指的是其版本发布策略。jQuery 1.3版发布后仅过数天，就发布了一个漏洞修正版1.3.1。他们还移除了对某些功能的支持，可能会影响许多代码的正常运行。

             5、对动画和特效的支持差：在大型框架中，jQuery核心代码库对动画和特效的支持相对较差。但是实际上这不是一个问题。目前在这方面有一个单独的jQuery UI项目和众多插件来弥补此点。

 

二、Zepto

Zepto最初是为移动端开发的库，是jQuery的轻量级替代品，因为它的API和jQuery相似，而文件更小。Zepto最大的优势是它的文件大小，只有8k多，是目前功能完备的库中最小的一个，尽管不大，Zepto所提供的工具足以满足开发程序的需要。简单的说，jquery用于电脑端开发，Zepto用于手机端开发。

优点：轻量级，适合移动端开发

缺点： Zepto 不支持旧版本的 Internet Explorer浏览器(<10)。

 

三、VueJS

     其实Vue.js不是一个框架，因为它只聚焦视图层，是一个构建数据驱动的Web界面的库。

     Vue.js通过简单的API（应用程序编程接口）提供高效的数据绑定和灵活的组件系统。

     Vue.js的特性如下：

　　    1.轻量级的框架

　　    2.双向数据绑定

　　    3.指令

　　    4.插件化

 

   优点： 1. 简单：官方文档很清晰，比 Angular 简单易学。

　　　　  2. 快速：异步批处理方式更新 DOM。

　　　　  3. 组合：用解耦的、可复用的组件组合你的应用程序。

　　　　  4. 紧凑：~18kb min+gzip，且无依赖。

　　　　  5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。

　　　　  6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

 

　 缺点：  1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。

　　　　　2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。

　　　　　3. 不支持IE8：

 

四、AngularJS

　　angularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

　　angularJS的特性如下：

　　　　1.良好的应用程序结构

　　　　2.双向数据绑定

　　　　3.指令

　　　　4.HTML模板

　　　　5.可嵌入、注入和测试

 

　　优点： 1.  模板功能强大丰富，自带了极其丰富的angular指令。

　　　　　 2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；

　　　　    3. 自定义指令，自定义指令后可以在项目中多次使用。

　　　　　 4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。

　　　　　 5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。
 
　　缺点： 1. angular 入门很容易 但深入后概念很多, 学习中较难理解.

　　            2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.

　　　　　 3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.

　　　 　    4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.

　　　　     5. DI 依赖注入 如果代码压缩需要显示声明

                   6. AngularJS的路由机制，很容易出问题

                   7. 验证功能错误信息显示比较薄弱，需要写很多模板标签

                   8. ngView只能有一个，不能嵌套多个视图，虽然有angular-ui/ui-router 解决，但ui-router 对于URL的控制不是很灵活，必须是嵌套式的

                  9. 这次从1.0.X升级到1.2.X，貌似有比较大的调整，没有完美兼容低版本，升级之后可能会导致一个兼容性的BUG

 

五、ReactJS

 React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。
 
　  React特性如下：　
　　　　1.声明式设计：React采用声明范式，可以轻松描述应用。

　　　　2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。

　　　　3.灵活：React可以与已知的库或框架很好地配合。

 

　　优点： 1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。

　　　　　 2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。

　　　　　 3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。

　　　　 　4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。

　　　　　 5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。

　　　　　 6. 兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

 

　　缺点： 1. React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

 

六、BackboneJS

Backbone.js为复杂WEB应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件；集合附有可枚举函数的丰富API； 视图可以声明事件处理函数，并通过RESRful JSON接口连接到应用程序。

Backbone唯一重度依赖的是Underscore.js( >= 1.5.0)（注：Underscore.js 中文文档请查看 http://www.html.cn/doc/underscore/）。基于RESTful（一个架构样式的网络系统）的约束，histroy的支持依赖于Backbone.Router ，DOM处理依赖于 Backbone.View，包括jQuery ( >= 1.11.0), 和 json2.js对旧的IE浏览器的支持。（模仿Underscore 和 jQuery 的APIs，例如 Lo-Dash 和 Zepto，在不同的兼容性下也一样能运行）

~~~~具体等学习到了，再补充~~~~~~

 

七、EmberJS

Ember.js是一个开源的JavaScript客户端框架，用于开发Web应用程序并使用MVC（模型 - 视图 - 控制器）架构模式。在Ember.js中，路由用作模型，句柄模板作为视图，控制器处理模型中的数据。

~~~~具体等学习到了，再补充~~~~~~

 

以上内容参考自：

https://blog.csdn.net/writebook2016/article/details/79061318

https://blog.csdn.net/sk_shenghuo/article/details/83105399

https://blog.csdn.net/inmyownsky1/article/details/5590462