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

迷你简单易用的MVVM框架

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