不是有了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 = callback
if (typeof callback === "function") {
binding = {
expr: type,
update: callback
}
}
var bus = this.$events
var 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
})
{{@aaa}}我们看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 = value
Object.defineProperty(obj, key, {
set: function (newValue) {
if(newValue !== get._value){
get._value = newValue
if(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.$fire
vm.$watch = EventBus.$watch
return 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)
break
case 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)
break
case 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框架设计》第三版，敬请期待