轻量级前端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