avalon - 执行流程

原帖地址：http://www.cnblogs.com/aaronjs/p/3141695.html

基本上确定了avalon的几个重要元素的关系：

• Ｍ，即model，一个普通的ＪＳ对象，可能是后台传过来的，也可能是直接从ＶＭ中拿到，即ＶＭ.$json。有关的这个$json的名字还在商讨


• V，即View，HTML页面，通过绑定属性或插值表达式，呈现数据，处理隐藏，绑定事件或动画等各种交互效果。Ｖ只与ＶＭ打交道。


• ＶＭ，即ViewModel，我们通过avalon.define("xxx", function(vm){vm.firstName = "正美"})，这里的vm是一个临时的对象，用于定义，真正的ＶＭ是avalon.define方法的返回值。它上面的$json属性就是Ｍ，可以见ＶＭ处于一切的核心。我们对ＶＭ的每一个操作，都会向上同步到Ｖ，向下同步到Ｍ。并且出于节能低碳起见（减少对象的创建），我们在生成Ｍ时，会重复利用ＶＭ中的一些属性，比如vm的某个属性是一个对象，那么这个对象会直接搬到$json中。若它是一个数组，它里面每个元素为对象，这些数组或对象都会直接$json中去，当然有时会修复一下（比如计算属性会转换一个简单的数据类型）

 

在MVVM模式中,ViewModel是贯穿整个框架的梁柱

我们现在分析下整个代码如何运作的一个流程：本文不讨论具体实现,只讨论流程

首先自然是HTML结构

<fieldset ms-controller="simple">
         <legend>例子</legend>
         <p>First name: <input ms-model="firstName" /></p>
         <p>Last name: <input ms-model="lastName"  /></p>
         <p>Hello,    <input ms-model="fullName"></p>
         <div>{{firstName +" | "+ lastName }}</div>
     </fieldset>

观察后得出结论：

@ 与常规结构不同

@ 定义了很多自定义标签  如何:ms-model ,ms-controller 

@ 插值表达式 {{}}

.........等等,具体请看api手册

 

那么接下来开发着定义JS

avalon.ready(function() {
    avalon.define("simple", function(vm) {
        vm.firstName = "司徒"
        vm.lastName = "正美"
        vm.fullName = {//一个包含set或get的对象会被当成PropertyDescriptor，
            set: function(val) {//set, get里面的this不能改成vm
var array = (val || "").split(" ");
this.firstName = array[0] || "";
this.lastName = array[1] || "";
            },
            get: function() {
return this.firstName + " " + this.lastName;
            }
        },
        vm.nick = {
            name: "暗黑之民"
        }
    })
})

大概理解下代码的意思：

1. avalon.ready(function() { //这是domReady，相当于jQuery的 $(function(){})


2. var model = avalon.define("aaa", [], function(vm) { //创建一个名字为aaa的ViewModel


3. vm.firstName = "司徒"  //创建一个监控属性


4. vm.lastName = "正美"    //创建一个监控属性


5. vm.fullName = {//一个包含set或get的对象 用于创建一个依赖监控属性


6. avalon.scan();//开始扫描DOM树，处理绑定

第二步就能看出来这个就是定义的一个模型了,vm->ViewModel 视图模型

整个运作都是围绕着vm展开的,mvvm模式中ＶＭ处于一切的核心,我们对ＶＭ的每一个操作，都会向上同步到Ｖ，向下同步到Ｍ。

VM的创建不仅仅只是我们看到的定义了几个属性,几个方法,其实框架内部帮我们做了很多事:

具体大概说下

VM模型的创建：

1.框架内部创建模型对象VM

2.VM吸收开发定义的处理方法

3.把开发定义的方法给经内部的转换，它的属性与方法会换胎换骨

4.返回这个被改造过的模型对象,挂到全局保存起来

所以这个里面涉及闭包与作用域链的问题了,以后再慢慢分析

那么这个VM创建好了,我们接下来干嘛呢? 

大家有没有发现在HTML结构中与VM代码中,有没有共同点？


1.HTML中定义的自定义标签与VM中的属性方法名是不是一样？

2.根据API的定义,HTML对应的每一个标签的都会对应着某一种JS的处理方式

3.现在HTML结构与JS代码都是独立的东东,所以我们想个办法让他们关联起来

如何关联?

答案：扫描绑定

avalon.scan();//开始扫描DOM树，处理绑定

简而言之呢就是扫描属性节点，文本节点,找到对应的事件处理器,执行事件绑定等一堆东东


属性节点

<input ms-model="firstName" />

发现有ms-开头的名字就会解析成对应的一个处理方法

比如ms-model

//将模型中的字段与input, textarea的value值关联在一起
var modelBinding = bindingHandlers.model = function(data, scopes) {
var element = data.element;
var tagName = element.tagName;
//是否有对应元素的标签名的处理方法
if (typeof modelBinding[tagName] === "function") {
var array = getValueFunction(data.value.trim(), scopes);
if (array) {
            modelBinding[tagName](element, array[0], array[1]);
        }
    }

当然还会传递一些需要运行的参数

特别指出来传递的实参scopes就是ViewModel对象

所以我们大胆猜测下

  * 在这一大堆扫描绑定方法中应该会哪些实现(这些方法才是最终的执行体)

  待续...

 

本文链接