轻量级前端MVVM框架avalon源码分析-总结
距avalon0.7版本发布有一段时间,由于之前的稳定性,就停止一段时间更新,期间研究了下Knockout源码,也尝试写了一个小型的mvvm的实现模型,仅仅只是仿造ko的核心实现,把无关的东西给剥离掉了,有时间总结一下发布出来。
ko算很早就出现的MVVM库了,实现是手段也是异常的巧妙,但是把监听的东西都转成函数表达,调用的时候也必须是函数形式,但使用习惯上,我就不太喜欢了
Knockout

监控属性通过observable内部转换成后,返回带有一个观察者模式的的函数(执行调用与赋值的时候都会有不同的处理),所以在使用的时候还要 this.firstName()执行才行,
observable() 是一个特殊的javascript对象,可以通知用户有关变化并自动检测依赖,这样在Model属性的值被修改时,就可以使Model和ViewModel保持同步
值的学习的是对依赖关系的处理:
- 收集需要被执行的函数,放入到栈中,形成一个队列,最底的就是最先被执行的,它上面的就是此函数所依赖的函数,从而得到依赖关系。
- 利用订阅模式从上面的依赖检测中,将依赖函数作为被依赖者(最先执行的那个的)的订阅者,以后我们对被依赖者进行赋值时,就会通先订阅者更新自身,从而形成一个双向绑定链
- ko会将视图中的绑定属性进行转换,分解出求值函数与视图刷新函数,视图刷新函数依赖于求值函数,而求值函数亦依赖于我们VM中的某些属性(这时,它们都转换为函数)
- 在第一次扫描时,它们会加入对应属性的订阅者列队中, 从而VM中的某个属性改变,就会自动刷新视图。
猪脚上场 avalon

- 正如司徒正美说所,avalon是在完全消化了knockout发展起来的,经过不断的修正重构,利用emberjs的defineProperties方法把监控属性替换成defineProperties方式,利用访问器属性setter,getter,借鉴了angular的插值表达式,过滤器机制,控制器绑定。。。等等。
- 从另一个角度来说,正美是前端出身,那么avalon是从JSer的角度去诠释MVVM模式的,angular很好很强大,但是它是一帮搞后端Java的人弄的,所以设计的层面角度完全不一样了,上手难度,包括源码实现,难度很高
MVVM在实际开发中还是有缺点的
1 简单的UI,真是大炮打蚊子 大材小用
2 数据绑定声明式,那么调试就很蛋疼了
3 大型应用数据绑定产生的大量的标记,那么务必的问题绑定比被绑定的对象还要多(ava会删除节点滴)
4 产生大量的VM对象,因为都是闭包嵌套滴
5 在VM和View之间需要进行解析,性能还是有成本的
当然啦,存在即是道理,合理的采用,而不是一味的盲目追从,我个人偏向迷你的只关注分离逻辑框架即可
计划
avalon要发布稳定版了,作为学习,所以打算重新把新版的avalon源码给重新写一遍 ~ ~
自己正在写一个公司内部MVVM版本
轻量级前端MVVM框架avalon源码分析-总结的更多相关文章
- 轻量级前端MVVM框架avalon - 执行流程2
接上一章 执行流程1 在这一大堆扫描绑定方法中应该会哪些实现? 首先我们看avalon能帮你做什么? 数据填充,比如表单的一些初始值,切换卡的各个面板的内容({{xxx}},{{xxx|html}}, ...
- 轻量级前端MVVM框架avalon - 初步接触
迷你简单易用的MVVM框架 avalon的介绍http://rubylouvre.github.io/mvvm/ 按照作者的介绍,在HTML中添加绑定,在JS中用avalon.define定义View ...
- 轻量级前端MVVM框架avalon - 整体架构
官网提供架构图 单看这个图呢,还木有说明,感觉有点蛋疼,作者的抽象度太高了,还好在前面已经大概分析过了执行流程 如图 左边是View视图,我们就理解html结构,换句话就是说用户能看到的界面,渲染页面 ...
- 基于vue实现一个简单的MVVM框架(源码分析)
不知不觉接触前端的时间已经过去半年了,越来越发觉对知识的学习不应该只停留在会用的层面,这在我学jQuery的一段时间后便有这样的体会. 虽然jQuery只是一个JS的代码库,只要会一些JS的基本操作学 ...
- 轻量级前端MVVM框架avalon - ViewModel
废话说了大几篇,我们开始来点干货了~ ViewModel的内部机制 在MVVM中,数据是核心.而jQuery则以DOM为核心. 而DOM只是HTML在JS的世界的抽象,是一个很易变的东西.因此如果业务 ...
- 轻量级前端MVVM框架avalon - 控制器
引子: 最近工作挺忙,avalon只能断断续续的写下去了,大概看了下angular的源码,看到小一半就比较难坚持了,是块硬骨头,慢慢啃吧 不过angular的的文档中用词还是很优雅: HTML编译器 ...
- 轻量级前端MVVM框架avalon - 模型转换
接上一章 ViewModel modelFactory工厂是如何加工用户定义的VM? 附源码 洋洋洒洒100多行内部是魔幻般的实现 1: function modelFactory(scope) { ...
- 轻量级前端MVVM框架avalon - 执行流程1
基本上确定了avalon的几个重要元素的关系: M,即model,一个普通的JS对象,可能是后台传过来的,也可能是直接从VM中拿到,即VM.$json.有关的这个$json的名字还在商讨 V,即Vie ...
- 前端MVVM框架avalon - 模型转换1
轻量级前端MVVM框架avalon - 模型转换(一) 接上一章 ViewModel modelFactory工厂是如何加工用户定义的VM? 附源码 洋洋洒洒100多行内部是魔幻般的实现 1: fun ...
随机推荐
- sublime插件
CnDict: 中英文字典软件,快捷键查词,目前支持金山词霸和有道词典. BracketHighlighter: 有个笑话,说前苏联间谍花了巨大的代价,偷到了阿波罗飞船的最后一屏的代码,发现全部是 } ...
- BestCoder Round 70
惨败,不能再嘲笑别人了,否则自己也会像别人那样倒霉 HDU 5615:http://acm.hdu.edu.cn/showproblem.php?pid=5615 求ax^2+bx+c能否拆成(px+ ...
- 使用神经网络来识别手写数字【译】(三)- 用Python代码实现
实现我们分类数字的网络 好,让我们使用随机梯度下降和 MNIST训练数据来写一个程序来学习怎样识别手写数字. 我们用Python (2.7) 来实现.只有 74 行代码!我们需要的第一个东西是 MNI ...
- UVA103 dp基础题,DAG模型
1.UVA103 嵌套n维空间 DAG模型记忆化搜索,或者 最长上升子序列. 2.dp[i]=max( dp[j]+1),(第i个小于第j个) (1) //DAG模型记忆化搜索 #include< ...
- 大BOSS随时都会到来
郑昀(微博:http://weibo.com/yunzheng) 去年在上市前后,我不止一次跟大家说过如下内容: 我们这帮兄弟第一精通业务,第二有丰富的战斗经验和规范,你们都是中流砥柱,都要带兵打仗. ...
- TreeSet
一.TreeSet中的元素比较有两种方式 1.定义一个类,实现Comparable接口 复写的是comparato方法 2.定义一个类,实现Comparator接口,覆盖compara方法(此种方法 ...
- *HDU1847 博弈
Good Luck in CET-4 Everybody! Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- iOS程序模块化设计
一.模块化设计的概述: 模块化设计(Block-based design):对一定范围内的不同功能或相同功能的不同性能.不同规格的产品进行功能分析的基础上,划分并设计出一系列功能模块,通过模块的选择和 ...
- POI读取Excel常见问题
最近在做一个将excel导入到报表中的功能,使用了POI来实现,发现POI使用有诸多不便之处,先记录下来,以后可能考虑使用Openxml. 1. 数值类型处理 通过POI取出的数值默认都是double ...
- Jquery 系列(1) 基本认识
本系列Jquery所用测试Demo版本是<uncompressed,development jQuery 1.11.3> 最新的jquery包可以从官网下载请参照http://jquery ...