不是有了Object.defineProperty, Proxy或Reflect，放进一个对象就new出一个ViewModel出来。只能说，它们是必要条件。我们需要将要监听的属性变成访问器属性，所有访问器属性都是共用同一套setter, getter方法。getter里面做依赖收集(不是必须的)，setter里做视图刷新或触发该属性的$watch回调。在此之前，我们需要完成一套观察者模式，就是github中常见的EventEmitter库：

https://github.com/Olical/Eve...

https://github.com/asyncly/Ev...

https://github.com/primus/eve...

但这些库的订阅数组都是放函数。我们需要放绑定对象，需要改造一下，并且改成$watch, $fire接口。

var EventBus = {$watch: function (type, callback) {var binding = callbackif (typeof callback === "function") {binding = {expr: type,update: callback}}var bus = this.$eventsvar list = bus[type]if (!list) {list = bus[type] = []}function unwatch() {avalon.Array.remove(list, binding)if(!list.length){delete bus[type]}}list.push(binding)return unwatch},$fire: function (type, value) {var list = this.$events[type]if (list && lsit.length) {for (var i = 0, obj; obj = list[i++];) {obj.update()}}}
}

然后我们再为它添加一个$id,用于标记这个VM是作用于页面某个元素上的。

var vm = avalon.define({$id: "test",aaa: 1,bbb: 2
})<div ms-controller="test">{{@aaa}}</div>

我们看avalon.define的一个简单实现：

avalon.define = function(obj) {var vm = {}var other = {}for (var name in obj) {if (typeof obj[name] !== 'function' && name.charAt(0) !== '$') {(function (key, value) {function get(){
//在avalon1.4,1.5中这里会进行动态依赖收集，详见这里
//https://github.com/RubyLouvre/avalon/blob/1.5/src/10%20dependency.js                return get._value}get._value = valueObject.defineProperty(obj, key, {set: function (newValue) {if(newValue !== get._value){get._value = newValueif(vm.$hashcode)vm.$fire(key, newValue)}return newValue},get: get})})(name, obj[name])}else{other[name] = obj[name]}}for(var name in other){vm[name] = other}vm.$events = {}vm.$hashcode = new Date  - Math.random()vm.$fire = EventBus.$firevm.$watch = EventBus.$watchreturn avalon.vmodels[vm.$id] = vm
}

此外，你可以添加更多以$开头的属性方法，来增强它的功能。在avalon, angular等库中，$开头的属性方法都是框架自用的。avalon2的一个简单的vm是藏了许多不可遍历的$xxx属性方法:

那么如何将绑定属性放进vm.$events.aaa数组中呢。这就要靠扫描机制。从上到下扫描。

avalon.scan = function (el, vm) {scanNodes([el], vm)
}
function scanNodes(array, vm) {for (var i = 0, el; el = array[i++]; ) {switch (el.nodeType) {case 1:scanTag(el, vm)breakcase 3:scanText(el, vm)break}}
}function scanTag(el, vm){var id = el.getAttribute('ms-controller')if(id && avalon.vmodels[id]){var vm2 = avalon.vmodels[id]if(vm && vm2 && vm == vm2){vm = mergeVM(vm,vm2)}else{vm = vm2}el.removeAttribute('ms-controller')}var bindings = scanAttrs(el,vm)for(var i = 0, b; b = bindings[i++];){vm.$watch(b.expr, b) //重点}if(el.children && el.children.length){scanNodes(el.children, vm)}
}
function scanText(){// 用正则检测是否有花括号// 有则转换为绑定对象// 并进行vm.$watch
}
function scanAttrs(){//遍历el.attributes中所有对象,看name是否以ms-开头
}

那么如何将绑定属性放进vm.$events.aaa数组中呢。这就要靠扫描机制。从上到下扫描。

avalon.scan = function (el, vm) {scanNodes([el], vm)
}
function scanNodes(array, vm) {for (var i = 0, el; el = array[i++]; ) {switch (el.nodeType) {case 1:scanTag(el, vm)breakcase 3:scanText(el, vm)break}}
}function scanTag(el, vm){var id = el.getAttribute('ms-controller')if(id && avalon.vmodels[id]){var vm2 = avalon.vmodels[id]if(vm && vm2 && vm == vm2){vm = mergeVM(vm,vm2)}else{vm = vm2}el.removeAttribute('ms-controller')}var bindings = scanAttrs(el,vm)for(var i = 0, b; b = bindings[i++];){vm.$watch(b.expr, b) //重点}if(el.children && el.children.length){scanNodes(el.children, vm)}
}
function scanText(){// 用正则检测是否有花括号// 有则转换为绑定对象// 并进行vm.$watch
}
function scanAttrs(){//遍历el.attributes中所有对象,看name是否以ms-开头
}

里面用到一个mergeVM方法，其实也简单，就是将两个VM合并成一个新的VM。使用Object.getOwnPropertyDescriptor或者更新的Object.getOwnPropertyDescriptors，就能得到所有访问器属性的定义对象，然后合成。如果是古老浏览器，我们可以将访问器属性放到一个叫$accessors对象上。

现在我们这个VM是很简单的，它只支持一重属性，如果属性的属性也是对象呢。这个我们需要将这define方法递 归一下不就行了吗？！对于数组的监控，业界流行的方法是重写数组的大部分方法，然后再加上一些移除数组的方法。

至此，avalon内部各种概念的关系图如下：

---

from 《javascript框架设计》第三版，敬请期待