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

接上一章 执行流程1

在这一大堆扫描绑定方法中应该会哪些实现？

首先我们看avalon能帮你做什么？

• 数据填充，比如表单的一些初始值，切换卡的各个面板的内容({{xxx}},{{xxx|html}}, ms-html)
• 类名处理，如隔行变色，掠过变色(ms-class, ms-hover)
• 事件绑定(ms-click)
• 属性处理(ms-checked, ms-href, ms-disabled)
• 数据格式化与验证(过滤器与$watch)
• 将某个元素转为一些功能更强大的UI，如果拖动块，滑动块，弹出层，颜色选择器，手风琴，切换卡……

有了avalon，做登录后无缝刷新页面这样操作毫无压力

回顾到我们最开始的3个问题：

• 开发者没有绑定任何事件
• 开发者没有做任何多余的监控绑定
• 开发者没有操作DOM代码

由此可见在扫描绑定所匹配方法中就实现了,事件,dom,view,model,m等双向绑定的最终操作

   <p>First name: <input ms-model="firstName" /></p>

如图以input的 ms-model绑定为例

分解后

modelBinding.INPUT = function(element, fn, scope) {
　　
    //当value变化时改变model的值
    var updateModel = function() {
        //data-observe="false" 跳过处理
        if (god.data("observe") !== false) {
            fn(scope, element.value);
        }
    };

    //当model变化时,它就会改变value的值
    var updateView = function() { //先执行updateView
        var neo = fn(scope);
        if (neo !== element.value) {
            //更新节点元素值
            element.value = neo;
        }
    };

　  element.addEventListener("input", updateModel, false);　//绑定事件

　　Publish[expose] = updateView;
　　updateView.element = element;
　　updateView();
　　delete Publish[expose];
}

仔细观察:

提供2个处理方法,一个事件绑定,还有一堆不知名的东东(这里不考虑兼容问题)

具体简单介绍下 : 以后会有详细的源码分析

Publish[expose]这是个临时的收集东东，用来处理依赖关系, 比如说

• 定义了ms-model ="firstName" ,那么在哪些地方会用到它这个就是依赖,比如后面的插值表达式中就有{firstName}

 <p>First name: <input ms-model="firstName" /></p>  定义       firstName 监控属性
  <div>{{firstName +" | "+ lastName }}</div>        关联依赖    这里又关联

• updateView();从名字就能知道它是用来更新视图的,通俗的说就是把用户定义的值给插到html结构中

定义的HTML结构
 <p>First name: <input ms-model="firstName" /></p>

通过updateView
变成了
 <p>First name: 正妹</p>

还有文本扫描,基本类似这样一下来所有M中定义的数据就给替换到了view了,并且绑定好事件及处理的回调方法,OK.以上是静态的时候处理的流程.

然后用户交互的时候：

用户比如在input中输入：

在开始扫描的时候呢element.addEventListener("input", updateModel, false);　//绑定事件

这个input元素就已经在后台给绑定好事件了

所以用户输入就等于直接执行了updateModel回调

updateModel简单分解

方法分解：

fn(scope, element.value); 就处理一个回调方法

fn回调处理方法中包含了一堆的依赖关系

 var fn = Function("scope", "value",
                    "if(arguments.length === 1){" +
                        ";return scope." + name + "" +
                     " }else{" +
                         " scope." + name + " = value;" +
                     " }");

fn 是一个new Function方法
fn 内部的实参数值有2个
fn 提供修改与设置

*重点 

scope.name 与 scope.name  = value; 都是从scrope（vm模型中获取）

vm模型是被转换过的对象,对属性的操作都会调用set get方法也就是,当然这个地方有点绕

            //生成defineProperties需要的配置属性
            Descriptions[name] = {
                set: accessor,
                get: accessor,
                enumerable: true
            };

简单的来说,给模型中的属性(赋值或者取值)就会调用accessor方法,而不是简简单单的赋值操作（请注意!）

所以在执行accessor我们可以看到这样一堆东西

看到了吧 $1371537226241就是收集的依赖列表

所以我们在直接这个方法的时候，依赖的东东也会一并执行，达到同步多个view的目的

整个流程大概就是这样允许运作的，当然这只会是简单的流程

实际上的代码还有很多“精巧”的设计,值的学习！

以后会逐步一一分析.

    MVVM是前端未来的发展方向，微软有knockout, winjs等MVVM框架； 著名的.Net组件开发公司 Telerik 推出了一套基于 jQuery的MVVM UI库kendoui； 谷歌组织开发angula

r；jQuery, rails，Sproutecore，Merb，Handlebars这几个著名框架的核心成员，超级大牛Yehuda Katz推出了emberjs！

　　同样的MVMM框架,angular是找大而面的道路，因此体积非常庞大，1.6-1.7万行,由于avalon直接是使用VBS与Object.defineProperty等原生C++接口，比knockout那些包无数

层JS的方法快多了。在渲染时，虽然双方都边扫描都绑定，但遇到text, html绑定（这些绑定会改变DOM树构造，增删节点，导致reflow）， avalon会使用零秒延迟，让性能消耗低的

先执行再进行性能消耗大的（chrome等高级浏览器，直接使用HTML5的新属性 hidden，把90%的reflow屏蔽了）。因此整体速度是knockout的百倍或几百倍以上，这视页面的复杂情况

，越复杂reflow越严重，knockout就越惨

avalon短小精悍,而且作者离我们近,第一时间能反馈问题 

~~感谢正美带来的好东东

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　@by Aaron