avalonJS-源码阅读（三） VMODEL

avalon dom小结

看过前面三篇文章后，应该会对avalon关于dom的处理有个大致的理念。这里再理一遍：avalon经过手动触发scan函数来遍历dom。而后根据ms-import ms-container ms-include ms-skip肯定VMODELS的做用域，接下来即是处理用户代码并生成相应的函数，经过registerSubscriber函数，将dom生成的函数以及相应的关联数据进行注册。
剩下的，就是其余模块的事情了。

数据结构

如常

//VMODULE 严格意义上，这个不算数据结构，并且，这是object一层的结构，若是object是嵌套式的
// {
// 	a:{
// 		b:"嵌套"
// 	}
// }
// 那么这个比较复杂了
{
    $id:$string,//define函数的第一个参数，若是是嵌套层的，则随机
    $model:$obj,//define定义中的第二个参数中的vm。若是是嵌套层的，则$model为当前嵌套层及如下的值
    $watch:$fn,
    $unwatch:$fn,
    $fire:$fn,//以上三个是Observable对象下的三个方法，不过他们的上下文被修改了。
    $skipArray:true|$array,//要忽略的参数
    hasOwnProperty:$fn,//重写的方法，将其做用域定义到$model
    $accessors:$obj,下文将详细讲解。
    $event:$obj,//记录用户定义的$watch
    get ...:$fn,
    set ...:$fn,
    ...:...//通过defineProperty处理的model值
}
//$accessors，
{
    $modelName:$fn //$fn[subscribers] =["记录订阅者"]
    $vmodel:$obj// 嵌套层时，出现
}

观察者模式

在讲解 avalon vmodel以前，必定要对观察者模式有个清晰的了解，观察者模式又叫订阅发布模式(Subscribe/Publish)，具体讲解参见观察者模型。
在avalon中，做者用了两遍观察者模型，分别解决了model和view的交互和扩展用户监控model值的问题。具体实现模块为依赖收集与触发和Observable。和java代码中实现的观察者不一样的是，被观察者会建立一个数组，数组内存放着全部的观察者，而观察者则都是函数。
当被观察者产生改变时，观察者函数则会被附加上下文环境后，依次执行。

依赖收集与触发

这里先上下源码，用来作辅助讲解。

    function registerSubscriber(data) {
        Registry[expose] = data //暴光此函数,方便collectSubscribers收集
        avalon.openComputedCollect = true
        var fn = data.evaluator
        if (fn) { //若是是求值函数
            if (data.type === "duplex") {
                data.handler()
            } else {
                data.handler(fn.apply(0, data.args), data.element, data)
            }
        } else { //若是是计算属性的accessor
            data()
        }
        avalon.openComputedCollect = false
        delete Registry[expose]
    }

    function collectSubscribers(accessor) { //收集依赖于这个访问器的订阅者
        if (Registry[expose]) {
            var list = accessor[subscribers]
            list && avalon.Array.ensure(list, Registry[expose])//只有数组不存在此元素才push进去
        }
    }

上面代码中，accessor函数的[subscribes]属性，作了被观察者存储观察者的事情。
为何registerSubscriber函数就敢确定在 Registry[expose] = data和delete Registry[expose]之间，collectSubscribers会被执行?
秘密就在于descriptorFactory函数对Object.defineProperty函数的应用。咱们先写一点Object.defineProperty的简单例子，具体理解可参考数据属性和访问器属性。

var a={};
Object.defineProperty(a,"a",{
	
	get:function(){
		console.log("get a")
		return "默认值"
	},
	set:function(val){
		console.log("set a")
		value=val;
	}
});
console.log(a.a);
console.log(a.a="new value")
console.log(a.a);
// get a 
// 默认值 
// set a 
// new value 
// get a 
// 默认值 

var memeryValue="默认值";//we need to save the value in some where
Object.defineProperty(a,"b",{
	get:function(){
		console.log("get b")
		return memeryValue
	},
	set:function(val){
		console.log("set b")
		memeryValue=val;
	}
});
console.log(a.b);
console.log(a.b="new value")
console.log(a.b);
// get b
// 默认值
// set b
// new value
// get b
// new value

经过上面的例子，结合观察者模型咱们可知道，经过对get/set的设定，咱们能够观察用户何时对vmodel里绑定的值进行赋值或读取，并作相应的处理（对avalon来说，就是调用accessor函数）。
至于notifySubscribers函数，则是调出绑定在accessor函数上的观察者集合，并执行。

avalon Observable

Observable是一个对象。它下面定义了三个方法，分别为$watch、$unwacth、$fire。这三个方法会和$events会被注入到每个用户定义的vm中（若是用户定义的vm是嵌套的，方法会在每一个嵌套层都注入一下）。用户只须要了解$watch和$unwacth用法便可，fire交给avalon自行处理就行了。
$events用来记录观察者和被观察者关系。

注意："$events"下面的属性会多出相似这样的值{"modelValue":undefined},而这个值的来源计算属性
accessor的真么一段代码。

//name='abc'
var backup = vmodel.$events[name]//当vmodel.$events[name]不存在时，backup会被赋值为undefined
vmodel.$events[name] = []
setter.call(vmodel, newValue)
vmodel.$events[name] = backup//这时，{abc:undefined}

这个地方好生纠结，本身稍微改了一下:

var backup = vmodel.$events[name]
vmodel.$events[name] = []
setter.call(vmodel, newValue)
if(backup===undefined)
    delete vmodel.$events[name]
else    
    vmodel.$events[name] = backup

avalon modelFactory

modelFactory由两个重要的函数构成 loopModel和descriptorFactory。

loopModel

在说loopModel以前，咱们要先了解下avalon的5种属性。

1. model属性，存放着未被avalon处理用户定义的属性集合。你能够把它当成java的entity，和后台进行数据交互时，直接和它进行交互，avalon会自动触发订阅。

2. normalProperties 普通属性，不须要双向绑定的，例如放在$skipArray里的属性，用户自定义以$开头的，函数以及avalon自定义的一些函数（$event, $watch 等）。

3. accessingProperties 监控属性，要进行双向绑定的属性。

4. watchProperties 强制要监听的属性，以$开头的，但又想强制监听它，例如avalon内部定义的$event等。这个属性是normalProperties的补充，属于内部属性，用户不会使用到它。

5. computedProperties 计算属性，用户本身自定义的set和get方法。是accessingProperties的补充。

loopModel函数的主要做用是将用户定义的vm object进行属性归类，并生成被观察者函数accessor。
做为被观察者accessor，他须要绑定来自dom的观察者到自身上以及将值大的改变通知到来自dom的观察(notifySubscribers)和来自用户自定义的观察(safeFire)。依据accessingProperties、computedProperties的嵌套的的不一样特色构造了三种类型的accessor。
咱们捡一个对object嵌套的accessor实现来看看。他除了实现上面的功能外，还须要调用modelFactory对嵌套的每一层生成VMODULE结构，在这个实现上，为了尽量的复用现有代码，牺牲了数据结构，avalon.vmodels关于$model的记录有些重复。至于updateWithProxy、updateVModel函数以及关于的详细讲解,会在之后补充上。

函数介绍

isEqual

var isEqual = Object.is || function(v1, v2) {
        if (v1 === 0 && v2 === 0) {
            return 1 / v1 === 1 / v2
        } else if (v1 !== v1) {
            return v2 !== v2
        } else {
            return v1 === v2
        }
    }//虽然看不懂，但不妨碍使用

小记

avalon的双向绑定的基本内容就这么多了。代码读到如今终于有一种可解脱的感受了。感谢司徒正美给咱们带来如此优秀的代码，另推荐他的一本书《javascript框架设计》，虽然校验的不怎么样，小bug不断，但内容绝对丰满，适合低中级的Jser反复阅读（至于高级适不适合，我就不知道了）。