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


Posted in Javascript onApril 27, 2016

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

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出来后又需要从头开始,不过又说回来, https://3water.com/article/79637.htm这篇文章很好说明了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,但社区还没有人主动站出来做这事

Javascript 相关文章推荐
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
浏览器兼容的JS写法总结
Apr 27 #Javascript
Vue.js基础知识汇总
Apr 27 #Javascript
JS onkeypress兼容性写法详解
Apr 27 #Javascript
使用vue.js开发时一些注意事项
Apr 27 #Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 #Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 #Javascript
常用原生JS兼容性写法汇总
Apr 27 #Javascript
You might like
Thinkphp中的curd应用实用要点
2015/01/04 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
js 操作符实例代码
2009/10/24 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
python 正确保留多位小数的实例
2018/07/16 Python
学习Python列表的基础知识汇总
2020/03/10 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
服装销售人员求职自我评价
2013/09/26 职场文书
建筑实习自我鉴定
2013/10/18 职场文书
工程管理造价应届生求职信
2013/11/13 职场文书
茶叶生产计划书
2014/01/10 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
民事调解书范文
2015/05/20 职场文书
python 进阶学习之python装饰器小结
2021/09/04 Python