距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. WinForm开发笔记

    Button Button默认不产生DoubleClick事件 (MSDN说明:https://msdn.microsoft.com/zh-cn/library/system.windows.form ...

  2. SDOI2009

    1226: [SDOI2009]学校食堂Dining Description 小F 的学校在城市的一个偏僻角落,所有学生都只好在学校吃饭.学校有一个食堂,虽然简陋,但食堂大厨总能做出让同学们满意的菜肴 ...

  3. 简述JavaScript对象、数组对象与类数组对象

    问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...

  4. servlet中文乱码问题

    通过response对象向页面输出内容时遇到的乱码问题可分为两种情况 1.字节流 字节流输出时可以通过设置响应头"Content-Type"的值为"text/html;c ...

  5. URL的截取问题

    $(function (){ if (window.location.href.includes('?')) { if (window.location.href.split('?')[1].spli ...

  6. OC--init,initialize,initWithCoder:,initWithFrame:各方法的区别和加载顺序

    1.先把OC的类分清楚各有什么方法 普通类的方法 init initialize: 控制器类的方法 init initialize: initWithCoder: UI控件类的方法 init init ...

  7. JSONObject、JSONArray区别

    json,就是一个键对应一个值,超级简单的一对一关系.现在用到的json那可以层层嵌套啊,刚开始接触的时候,确实有种崩溃的赶脚,不想去理,取个数据还那么麻烦.其实,就跟if else语句一样,如果if ...

  8. js Date学习

    Date.parse()接收一个表示日期的字符串参数(参数错误时返回NaN),返回相应日期的毫秒数.(使用自 UTC(Coordinated Universal Time,国际协调时间)1970 年 ...

  9. 基于webdriver的jmeter性能测试-Selenium IDE

    前言: 由于某些项目使用了WebGL技术,需要高版本的Firefox和Chrome浏览器才能支持浏览,兼容性很弱,导致Loadrunner和jmeter(badboy)无法正常进行录制脚本.因此我们采 ...

  10. 【转】Android Studio-1.2版本设置教程

    如果重新安装Android Studio的话要重新配置风格选项啥的,这篇是个很好的教程,原文链接:http://blog.csdn.net/skykingf/article/details/45485 ...