轻量级前端MVVM框架avalon - 初步接触
迷你简单易用的MVVM框架
avalon的介绍 http://rubylouvre.github.io/mvvm/
按照作者的介绍,在HTML中添加绑定,在JS中用avalon.define定义ViewModel,再调用avalon.scan方法,它就能动了!
神奇的代码:
如上图所示:
开发者:
1 定义一个带有自定义标签的HTML结构
2 定义一个简单的JS代码
用户操作:
用户在input文本框中改变值时,你就会发现对应的多条相关联的记录都被同步修改
问题:
- 事件是什么时候绑定的,因为开发者都没有操作dom
- js代码中定义的值,如何关联到html代码中
- html代码中如何实现自动同步视图(input输入更改一条记录,多条相关联的同步被修正)
带着这几个问题,我们一起走入avalon源码部分
首先对于MVVM模式,我们理解几个概念:
- M,模型,一个数据体,用于填允我们的页面,通常PHP交给我们时数据已经填好了,想改变,就要再发出请求,然后通过jQuery寻找节点,修改它的innHTML与innerText。当然DOM操作是非常繁锁的,什么透明度,背景,位置等CSS属性我们都需要通过操作类名来修改。我们有时忙乎于这些细节,而把我们业务混在其中了。因此调试时,业务好了,但样式坏了,样好修好,这时务业又爆开了……
- 在MVVM中,M只是一个过客,它与其他表示业务状态的东西融入VM(ViewModel)中。ViewModel是一个状态的集合,当然还拖家带口监控着大量的回调。状态听起来是个深奥的概念,其实就是一个开关。比如if(aaa){}语句中的aaa,就是表示true与false,switch(bbb){}语句,它表示有多个值的状态,就像有人幼年,童年,少年,青年,中年,老年这几个阶段,它们都指向同一个东西。
- 在MVVM中,数据是核心。而jQuery则以DOM为核心。而DOM只是HTML在JS的世界的抽象,是一个很易变的东西。因此如果业务代码遍历选择器表达式会非常难维护。但不可否认,jQuery是操作DOM的王者,让我们操作DOM顺手拈来。但如果不让你操作DOM,不是更好吗?就像jQuery不让你用getElementById,getElementsByTagName, querySelecterAll,大家都不知道里面有多少坑,短短几个字母$(expr)是背后sizzle选择器引擎1700行的实现!!!!jQuery其实是在用户代码与原生API中提供一层厚厚的粘合层,因此摸起来光溜溜。在MVVM中,DOM操作基本是水下运作了。由于VM与V之间的双向绑定,操作了VM中的数据(当然只能是监控属性),就会同步到DOM,我们透过DOM事件监控用户对DOM的改动,也会同步到VM。DOM隐形了,就像软件公司,到处跑出来活动的是业务员与不写代码的经理老总,程序员全部关起来加班!虽然这比喻有点残酷,但这正体现了各司其职的威力。能说会道去拉风投接单子没什么不妥,喜欢呆在电脑前的就让他呆吧。jQuery的世界就是一个混乱的公司,全能的程序员什么都做
- 为了各司其职,必须有良好的分层。MVVM划分三层,M,VM,V,M是原始数据,用于转换为VM,VM管理状态与绑定回调,V通过绑定得到VM的状态与回调,渲染页面,绑定事件,切换类名,什么脏活都揽了——但用户只需要声明
avalon与其他前端MVVM框架最大的不同是:
- VM是用ecma262v5的新API, Object.defineProperties生成的一个充满访问器的对象,这样的对象,能通过用户对它的属性的读写,触发定义时的getter, setter函数。getter, setter对rubyer, pythoner, C#er应该很熟悉,我就不展开了。旧式IE,avalon利用VBScript的类实例,它也存在其他语言的访问器。不过,VBS对象不像JS对象那样随意添加新属性,删除已有属性,因此我们就无法监后添加的新属性。Object.defineProperties也一样,它能处理的属性也只是它定义时的属性,想监控后来的,需要再调用一次Object.defineProperties。尽管如此,也比其他MVVM框架魔幻多了
@author Aaron
轻量级前端MVVM框架avalon - 初步接触相关推荐
- 轻量级前端MVVM框架avalon - 整体架构
官网提供架构图 单看这个图呢,还木有说明,感觉有点蛋疼,作者的抽象度太高了,还好在前面已经大概分析过了执行流程 如图 左边是View视图,我们就理解html结构,换句话就是说用户能看到的界面,渲染页面 ...
- 轻量级前端MVVM框架avalon - 模型转换
接上一章 ViewModel modelFactory工厂是如何加工用户定义的VM? 附源码 洋洋洒洒100多行内部是魔幻般的实现 1: function modelFactory(scope) { ...
- html 属于mvvm框架,前端MVVM框架avalon揭秘 - HTML编译器
MVVM试图更加清晰的讲用户界面(UI)开发从应用程序的业务逻辑与行为中心分离,由于,不少这样的模式的实现都须要利用声明式数据绑定来实现讲View(视图)工做从其余层分离css 因此出现了一大堆自定义 ...
- 又想到了模板引擎和前端MVVM框架
最近接手了一个和报表有关的项目.项目后端的大部分工作都是在操作数据库,作为一个后端新手谈不上有什么感觉.但对于看了前端的写法之后,还是有一点点感想. 项目前端主要使用jQuery及其插件,也许这就是大 ...
- Fre:又一个小而美的前端MVVM框架
halo,大家好,好久不贱呢! 最近因为看了一些 be 的小说,整个人都比较致郁::>_<:: 就在昨天,我用了一天的时间写了 fre,又一个小而美的前端MVMM框架 可能你觉得,有了 v ...
- Fre:又一个小而美的前端MVVM框架 1
halo,大家好,好久不贱呢! 最近因为看了一些 be 的小说,整个人都比较致郁::>_<:: 就在昨天,我用了一天的时间写了 fre,又一个小而美的前端MVMM框架 可能你觉得,有了 v ...
- 疯狂 java轻量级框架_ViewModel从未如此清爽 - 轻量级WPF MVVM框架Stylet
Stylet是我最近发现的一个WPF MVVM框架, 在博客园上搜了一下, 相关的文章基本没有, 所以写了这个入门的文章推荐给大家. Stylet是受Caliburn Micro项目的启发, 所以借鉴 ...
- python的flask微服务-flask微服务框架的初步接触
测试2个关联的系统接口时,经常会遇到被测试系统或被测app的处理内部处理流程会依赖另一个系统的接口返回结果,这时, 常用的做法就是写一个模拟测试桩,用作返回请求时的结果.java可以用servicel ...
- JavaScript富应用MVC MVVM框架
对框架的挑选 Ember.js.Backbone.js.Knockout.js.Spine.js.Batman.js , Angular.js 1. 轻量级的应用选择哪一个会比较好? 2. 那一个比较 ...
- 揭秘支撑百度搜索、Feed、小程序三大业务的MVVM框架设计思想,San 核心人员倾力打造...
如果你是一名前端工程师,那么一定接触过组件化框架,比如 Angular.React.Vue-- 对于前端开发者而言,无论是初入职场的新兵还是久经沙场的老将,在面对纷繁复杂的业务需求和层出不穷的技术选型 ...
最新文章
- 研究人员提出增强Wi-Fi传输的新方法
- Fedora 13 Alpha测试手记横空出世
- bzoj3744: Gty的妹子序列 (BIT 分块)
- java zip 流压缩_关于zip:检测流是否用Java压缩的最佳方法
- C#读取文件-古文观止(总结一下)
- 博客园美化资源网站链接
- 大牛直播SDK-Windows RTMP/RTSP/本地FLV播放器使用说明...
- 利用神经网络识别12306验证码——(四)数据增广以及训练集、验证集的划分
- 004-中国五个城市PM 2.5数据分析
- 华东 1、华东 2、华北 1、华北 2、华南 1 服务器分别都在哪个城市
- Adobe证书含金量
- 【颜纠日记】精华乳,精华液,精华水和化妆水相通吗,分享操纵手段
- 锐龙AMD处理器 AndroidStudio无法安装使用安卓模拟器/虚拟机
- 神经网络中的对抗样本
- LabVIEW中VI的运行和调试
- 如何用panda3d写一个游戏
- [转]热电偶与热电阻的区别[2]
- php排名统计图_php 生成各类统计图实例
- python达内培训多少钱
- 企业架构框架主流工具比较
热门文章
- java map 容器_java容器-map的常用实现及原理
- 六石管理学:遇到问题先记录分析,再找人帮忙
- 支持x86/aarch/mips/loongarch的jogamp-2.3.2源码开源
- LINUX下载编译sqlite-jdbc的jar包
- 管理新语:根据工作难度,及时调整负责人员
- C中取得数组的地址,赋值给数组结构的字段
- deb方式安装openjdk8
- C中define的#和##
- Android中sendMessageAtTime()的用法
- 前端协商缓存强缓存如何使用_强制缓存(200)和协商缓存(304)