多种前端框架的优缺点

悠悠 2021-12-19 03:39 330阅读 0赞

Web前端目前现有的UI框架：Element、Bootstrap、JqueryUi、Foundation、Semantic UI、Pure、UIkit  
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][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中，路由用作模型，句柄模板作为视图，控制器处理模型中的数据。

# Vue与React： #

*  Vue  
    API设计上简单，语法简单，学习成本低  
    更快的渲染速度和更小的体积
 *  React  
    React的渲染系统可配置性更强，并包含如shallow rendering这样的特性，可结合React的测试工具一起使用，从而大为提高代码的可测试性及可维护性。  
    更适用于大型应用和更好的可测试性  
    同时适用于Web端和原生App  
    更大的生态圈带来的更多支持和工具
 *  共同点：

React和Vue都会构建一个虚拟DOM并同步到真实DOM中，实现快速渲染
        轻量级
        响应式组件
        服务器端渲染
        易于集成路由工具，打包工具以及状态管理工具
        优秀的支持和社区

*  区别

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>Vue</th> 
   <th>React</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>渲染</td> 
   <td>渲染过程中是跟踪每一个组件的依赖，即更改了哪个组件渲染哪个</td> 
   <td>会重新渲染全部子组件</td> 
  </tr> 
  <tr> 
   <td>方式</td> 
   <td>利用数据双向绑定，模板式开发。（模板能更好地把功能和布局分割开来）</td> 
   <td>React应用则与之相反，不使用模板，而是要求开发者借助JSX在JavaScript中创建DOM。</td> 
  </tr> 
  <tr> 
   <td>状态</td> 
   <td>Vue中的数据是可变的（mutated），改变数据，页面就会重新渲染更新。（Vue中改变状态的操作不仅更加简洁，而且它的重新渲染系统实际上比React的更快更高效。）</td> 
   <td>React里的状态（state）是不可变（immutable）的，因此你不能直接地改变它，而是要用setState</td> 
  </tr> 
 </tbody> 
</table>

[http_www.html.cn_doc_underscore_RESTful_histroy_Backbone.Router]: http://www.html.cn/doc/underscore/%EF%BC%89%E3%80%82%E5%9F%BA%E4%BA%8ERESTful%EF%BC%88%E4%B8%80%E4%B8%AA%E6%9E%B6%E6%9E%84%E6%A0%B7%E5%BC%8F%E7%9A%84%E7%BD%91%E7%BB%9C%E7%B3%BB%E7%BB%9F%EF%BC%89%E7%9A%84%E7%BA%A6%E6%9D%9F%EF%BC%8Chistroy%E7%9A%84%E6%94%AF%E6%8C%81%E4%BE%9D%E8%B5%96%E4%BA%8EBackbone.Router