欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue,angular,avalon这三种MVVM框架优缺点

程序员文章站 2022-04-17 14:13:36
本文的主要内容是参考官方文档说明总结而来: vue.js vue.js @尤雨溪 老师写的一个用于创建 web 交互界面的库,是一个精简的 mvvm。从技术角度讲,vu...

本文的主要内容是参考官方文档说明总结而来:

vue.js

vue.js @尤雨溪 老师写的一个用于创建 web 交互界面的库,是一个精简的 mvvm。从技术角度讲,vue.js 专注于 mvvm 模型的 viewmodel 层。它通过双向数据绑定把 view 层和 model 层连接了起来。实际的 dom 封装和输出格式都被抽象为了directives 和 filters。vue.js和其他库相比是一个小而美的库,作者的主要目的是通过一个尽量简单的 api 产生可反映的数据绑定和可组合的视图组件,感觉作者的思路非常清晰。

优点:

简单:官方文档很清晰,比 angular 简单易学。
快速:异步批处理方式更新 dom。
组合:用解耦的、可复用的组件组合你的应用程序。
紧凑:~18kb min+gzip,且无依赖。
强大:表达式 & 无需声明依赖的可推导属性 (computed properties)。
对模块友好:可以通过 npm、bower 或 duo 安装,不强迫你所有的代码都遵循 angular 的各种规定,使用场景更加灵活。

缺点:

新生儿:vue.js是一个新的项目,2014年3月20日发布的0.10.0 release candidate版本,目前github上面最新的是0.11.4版本,没有angular那么成熟。
影响度不是很大:google了一下,有关于vue.js多样性或者说丰富性少于其他一些有名的库。
不支持ie8:哈哈不过angularjs 1.3也抛弃了对ie8的支持,但是 @司徒正美 老师的avalon是支持ie6+的,应该下了很多努力去优化。这一点对于那些需要支持ie8的项目就不好了,不过这也是web前端开发的一个趋势,像ie低版本就应该退出历史舞台了,通过改变我们的前端思维,而不是顺应那些使用老版本而不去升级的人。 @玉伯老师就说过一句话,我觉得说的非常好“这年头,支持 ie6、7 早就不再是特性,而是耻辱。努力推动支付宝全面不支持 ie6、7,期待更多兄弟加盟”。

angularjs

angularjs最近很火,追随者也很多。 superheroic javascript mvw framework
官方说得很朴素:“完全使用javascript编写的客户端技术。同其他历史悠久的web技术(html、css和javascript)配合使用,使web应用开发比以往更简单、更快捷“。当你学习它的时候,我相信你会被它的很多新特效所吸引。

优点:

动态视图:以前从来没有想过js可以如此扩展html的属性,但是angularjs做到了,它替我们静态的html加了很多扩展性功能,有一种让html由死变活的感觉。
完善:是一个比较完善的前端mvw框架,包含模板,数据双向绑定,路由,模块化,服务,依赖注入等所有功能,模板功能强大丰富,并且是声明式的,自带了丰富的 angular 指令。
google维护:angularjs有google来维护,无疑有了一个强大的后台,对于推广和维护明显比vue.js和avalon有优势,社区也非常活泼,能够很好促进它的发展。
angularjs & ionic:ionic: advanced html5 hybrid mobile app framework,这俩就是一个好基友,ionic通过用angularjs为了创建一个框架,最适合开发的丰富和强大的应用程序。上次于知乎答了一个相关问题做webapp开发,性能和效率最好的框架和打包app平台分别是哪个? - 汤威的回答,详细可以见这里。

缺点:

大而全:学习起来有难度,对于我来讲学习曲线很曲折,比较难理解一些。
推翻重写:前段时候逛社区发现angularjs2.0会把之前的推翻重写,两个框架的改变很大,基本是两个框架了,等于是说等到2.0出来后又需要从头开始,不过又说回来, 这篇文章很好说明了angularjs2.0的变化。
不支持ie8以下,貌似2.0变得只支持移动端了,等到出来后再看吧。

avalon.js

avalon.js是 @司徒正美 老师所写的个简单易用迷你的mvvm框架,它最早发布于2012.09.15,为解决同一业务逻辑存在各种视图呈现而开发出来的。常常可以看到老师推广他的avalon.js,出了很多教程,无疑对国内学习avalon.js的人提供了巨大方便。

优点

使用简单,在html中添加绑定,在js中用avalon.define定义viewmodel,再调用avalon.scan方法,它就能动了!
兼容到 ie6 (其他mvvm框架,knockoutjs(ie6), angularjs(ie9), emberjs(ie8), winjs(ie9) ),另有avalon.mobile,它可以更高效地运行于ie10等新版本浏览器中
没有任何依赖,不到5000行,压缩后不到50kib
支持管道符风格的过滤函数,方便格式化输出
局部刷新的颗粒度已细化到一个文本节点,特性节点
要操作的节点,在第一次扫描就与视图刷新函数相绑定,并缓存起来,因此没有选择器出场的余地。
让dom操作的代码近乎绝迹
使用类似css的重叠覆盖机制,让各个viewmodel分区交替地渲染页面
节点移除时,智能卸载对应的视图刷新函数,节约内存
操作数据即操作dom,对viewmodel的操作都会同步到view与model去
自带amd模块加载器,省得与其他加载器进行整合。

缺点

1,对数组的过滤没有angular那么方面,avalon的过滤器只能用于ms-text, ms-html

2,没有英文文档,宣传受到限制

3,oniui的皮肤不够好看,许多人说要配合boostrap,但社区还没有人主动站出来做这事