avalon - 初步接触

avalon的介绍http://rubylouvre.github.io/mvvm/

按照作者的介绍,在HTML中添加绑定,在JS中用avalon.define定义ViewModel,再调用avalon.scan方法,它就能动了!

神奇的代码:

如上图所示:

开发者:

  1 定义一个带有自定义标签的HTML结构

2 定义一个简单的JS代码

用户操作:

用户在input文本框中改变值时,你就会发现对应的多条相关联的记录都被同步修改

问题:

  1. 事件是什么时候绑定的,因为开发者都没有操作dom
  2. js代码中定义的值,如何关联到html代码中
  3. 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 - 初步接触的更多相关文章

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

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

  2. php大力力 [006节]初步接触认识phpMyAdmin

    phpMyAdmin 2015-08-22 php大力力006. 初步接触认识phpMyAdmin 以下是phpAdmin网络截图: 这是通过MAMP一键安装的. php中MyAdmin的使用-猿代码 ...

  3. 初步接触CERNVM

    初步接触的来源是对ROOT数据分析工具的搜索,看到一个叫做Life as a Physicist的国外博客.知道了这个包含容器分发的软件,跟重要的是,这个欧洲核子中心开发的平台,对于我等科研人员是一大 ...

  4. Spring boot -环境搭建 ,初步接触(1)

    1. Eclipse 创建 maven project  项目目录如下: 2. pom.xml  配置文件 <project xmlns="http://maven.apache.or ...

  5. 为什么要使用puppet 及初步接触

    为什么要使用puppet 及初步接触   1.简介 云计算环境下,密度高,机器数量多,还要求弹性和伸缩性,这对于运维提出更高的要求.系统管理员需要经常安装操作系统,对系统参数进行配置和优化,对人员进行 ...

  6. C#初步接触

    如同非常多刚開始学习的人一样,刚接触C#的时候,也是一头雾水,学习了好长时间,都搞不清楚一些基本名称是什么.什么是C#?什么是.net?什么是visual studio?它们之间有什么关系?以下我们就 ...

  7. 初步接触html心得

    接触HTML大概有七天,做一下小总结,过过记忆. html大致可分为三部分:Dtd头.Head.Body三大部分. Dtd头:是用于浏览器编辑的,也就是俗话说的给电脑看的的东西. Head:内细分下大 ...

  8. 实验记录一 初步接触cortex-M3

    应该说老早就在接触cortex-M3了.曾经没想到会接触嵌入式,结果由于导师的缘故.在选择项目管理时,就呵呵了.不废话.搭配环境非常easy,纯粹傻瓜式.可由于自己的马虎,却让自己一直困惑. 记得在前 ...

  9. java_web学习(四) 二维表的制作(初步接触MVC)

    我们需要做一个jsp页面,动态显示信息表的内容. 一.需求分析 1.  做一个实体类:StudentInfo (包含4个字段) 2.  如图模拟生成3条数据,本质上就是new StudentInfo ...

随机推荐

  1. 整理Ruby相关的各种概念(rvm, gem, bundle, rake, rails等)

    转自:http://henter.me/post/ruby-rvm-gem-rake-bundle-rails.html Ruby 这个就不用多说了 RVM 用于帮你安装Ruby环境,帮你管理多个Ru ...

  2. 创建GitHub技术博客

    创建GitHub技术博客全攻略 githubio技术博客网站生成 说明: 首先,你需要注册一个 github 账号,最好取一个有意义的名字,比如姓名全拼,昵称全拼,如果被占用,可以加上有意义的数字.本 ...

  3. MongoDB的C#驱动

    MongoDB的C#驱动基本使用 MongoDB的官方C#驱动可以通过这个链接得到.链接提供了.msi和.zip两种方式获取驱动dll文件. 通过这篇文章来介绍C#驱动的基本数据库连接,增删改查操作. ...

  4. HDU 2079-课程时间(生成函数)

    课程时间(标题已被修改,注意阅读题) Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  5. 题注Oracle数据库的网络连接原理

    版权声明:本文博客原创文章,博客,未经同意,不得转载.

  6. JSP之项目路径问题(${pageContext.request.contextPath},<%=request.getContextPath()%>以及绝对路径获取)

    本随笔这是作为一个记录使用,以备后查.项目完成之后本地部署OK,本地Linux部署OK,都可以正常的访问,可是当我把它部署到服务器上面的时候,首页可以正常访问,可是当发出请求的时候却报错误了,说找不到 ...

  7. 常用Jquery插件整理大全

    做项目的时候总是少不了要用到Jquery插件,但是Jquery插件有太多,每次都要花费一些时间,因此本人就抽时间整理了一些Jquery插件,每个插件都有Demo或者是使用文档供大家下载.整理了一晚上才 ...

  8. return 使用和闭包

    1.return 使用 案例一: var a=1; for(var b=0; b<10; b++){ return b; }; sonsole.log(b)//返回为空 个人认为此处左右与为全局 ...

  9. leetcode[94] Unique Binary Search Trees

    给定n,那么从1,2,3...n总共可以构成多少种二叉查找数呢.例如给定3 Given n = 3, there are a total of 5 unique BST's. 1 3 3 2 1 \ ...

  10. Linux - 命令行 管道(Pipelines) 详细解释

    命令行 管道(Pipelines) 详细解释 本文地址: http://blog.csdn.net/caroline_wendy/article/details/24249529 管道操作符" ...