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 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 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
php防攻击代码升级版
2010/12/29 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
Vue 实现简易多行滚动"弹幕"效果
2020/01/02 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
Python实现时间序列可视化的方法
2019/08/06 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
flask实现验证码并验证功能
2019/12/05 Python
python 8种必备的gui库
2020/08/27 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
Notino法国:购买香水和化妆品
2019/04/15 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
施工资料员岗位职责
2014/01/06 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
小学班主任个人总结
2015/03/03 职场文书
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers