距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源码分析-总结的更多相关文章

  1. 轻量级前端MVVM框架avalon - 执行流程2

    接上一章 执行流程1 在这一大堆扫描绑定方法中应该会哪些实现? 首先我们看avalon能帮你做什么? 数据填充,比如表单的一些初始值,切换卡的各个面板的内容({{xxx}},{{xxx|html}}, ...

  2. 轻量级前端MVVM框架avalon - 初步接触

    迷你简单易用的MVVM框架 avalon的介绍http://rubylouvre.github.io/mvvm/ 按照作者的介绍,在HTML中添加绑定,在JS中用avalon.define定义View ...

  3. 轻量级前端MVVM框架avalon - 整体架构

    官网提供架构图 单看这个图呢,还木有说明,感觉有点蛋疼,作者的抽象度太高了,还好在前面已经大概分析过了执行流程 如图 左边是View视图,我们就理解html结构,换句话就是说用户能看到的界面,渲染页面 ...

  4. 基于vue实现一个简单的MVVM框架(源码分析)

    不知不觉接触前端的时间已经过去半年了,越来越发觉对知识的学习不应该只停留在会用的层面,这在我学jQuery的一段时间后便有这样的体会. 虽然jQuery只是一个JS的代码库,只要会一些JS的基本操作学 ...

  5. 轻量级前端MVVM框架avalon - ViewModel

    废话说了大几篇,我们开始来点干货了~ ViewModel的内部机制 在MVVM中,数据是核心.而jQuery则以DOM为核心. 而DOM只是HTML在JS的世界的抽象,是一个很易变的东西.因此如果业务 ...

  6. 轻量级前端MVVM框架avalon - 控制器

    引子: 最近工作挺忙,avalon只能断断续续的写下去了,大概看了下angular的源码,看到小一半就比较难坚持了,是块硬骨头,慢慢啃吧 不过angular的的文档中用词还是很优雅: HTML编译器 ...

  7. 轻量级前端MVVM框架avalon - 模型转换

    接上一章 ViewModel modelFactory工厂是如何加工用户定义的VM? 附源码 洋洋洒洒100多行内部是魔幻般的实现 1: function modelFactory(scope) { ...

  8. 轻量级前端MVVM框架avalon - 执行流程1

    基本上确定了avalon的几个重要元素的关系: M,即model,一个普通的JS对象,可能是后台传过来的,也可能是直接从VM中拿到,即VM.$json.有关的这个$json的名字还在商讨 V,即Vie ...

  9. 前端MVVM框架avalon - 模型转换1

    轻量级前端MVVM框架avalon - 模型转换(一) 接上一章 ViewModel modelFactory工厂是如何加工用户定义的VM? 附源码 洋洋洒洒100多行内部是魔幻般的实现 1: fun ...

随机推荐

  1. Mac osx 安装PIL出现Some externally hosted files were ignored (use --allow-external PIL to allow).

    出现这个问题Some externally hosted files were ignored (use --allow-external PIL to allow)的主要原因是PIL的一些依赖库还没 ...

  2. Python列表和元组

    Python是没有数组的概念,但是和数组比较相近的概念是列表和元素. 下面两个例子展示列表和元组. # coding=utf-8 # 元组 students = ('小明', '小黄', '小李', ...

  3. C++:为什么说 goto 没有用

    要了解一个功能有没有用,首先应该分析它能实现的所有功能. goto 可以实现的功能只有两种:一,向前面跳:二,向后面跳.这两种情况对应三种功能:一,重复执行也就是循环:二,跳过一段代码也就是条件判断: ...

  4. 算法_bitmap算法

    概述 所谓bitmap就是用一个bit位来标记某个元素对应的value,而key即是这个元素.由于采用bit为单位来存储数据,因此在可以大大的节省存储空间     算法思想 32位机器上,一个整形,比 ...

  5. C#判断数组是否为空

    string[] array=new[] { "1", "2", "3", "4", "5" }; ...

  6. [转]android:动态创建多个按钮 及 批量设置监听

    之前投机取巧,先创建好多个按钮,再根据需要的数量进行部分隐藏,不过还是逃不过呀. 这样根本无法批量地 findId,批量地 设置监听. 所以今天还是认认真真地研究回“动态创建按钮”,终于,通过不断尝试 ...

  7. Spotlight监控Oracle数据库的链接创建

    最近在做性能测试时,由于要挂载空间数据,开发人员直接将所有业务表都挂到了Oracle数据库中.最近做了几次测试发现响应时间和吞吐量都不是很理想,进行一番分析后怀疑可能在Oracle中出现问题,因此再网 ...

  8. (转)C# XMPP客户端与openfire通信(Matrix Xmpp 授权破解教程)

    FROM:http://www.cnblogs.com/crabo/p/CRACK_MATRIX_XMPP.html 如此著名的XMPP , 居然试过jabber-net, agsXmpp,matri ...

  9. bzoj3631: [JLOI2014]松鼠的新家(LCA+差分)

    题目大意:一棵树,以一定顺序走完n个点,求每个点经过多少遍 可以树链剖分,也可以直接在树上做差分序列的标记 后者打起来更舒适一点.. 具体实现: 先求x,y的lca,且dep[x]<dep[y] ...

  10. mysql添加一个用户

    对于添加mysql的远程访问用户,一定要记得刷新刷新系统权限表不然你怎么弄都是不成功的. insert into mysql.user(Host,User,Password) values(" ...