来源
avalon的重头戏。终于要到我最期待的vmodel了。
ps:这篇博文想做的全一点，错误少一点，所以会有后续的更新在这篇文章中。
状态：一稿
目录[-]
avalon dom小结
数据结构
观察者模式
依赖收集与触发
avalon Observable
avalon modelFactory
loopModel
函数介绍
isEqual
小记
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种属性。
model属性，存放着未被avalon处理用户定义的属性集合。你可以把它当成java的entity，和后台进行数据交互时，直接和它进行交互，avalon会自动触发订阅。
normalProperties 普通属性，不需要双向绑定的，例如放在$skipArray里的属性，用户自定义以$开头的，函数以及avalon自定义的一些函数（$event, $watch 等）。
accessingProperties 监控属性，要进行双向绑定的属性。
watchProperties 强制要监听的属性，以$开头的，但又想强制监听它，例如avalon内部定义的$event等。这个属性是normalProperties的补充，属于内部属性，用户不会使用到它。
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反复阅读
（至于高级适不适合，我就不知道了）。