摘要：在等庫(kù)中，開(kāi)頭的屬性方法都是框架自用的。使用或者更新的，就能得到所有訪問(wèn)器屬性的定義對(duì)象，然后合成。至此，內(nèi)部各種概念的關(guān)系圖如下框架設(shè)計(jì)第三版，敬請(qǐng)期待

不是有了Object.defineProperty, Proxy或Reflect，放進(jìn)一個(gè)對(duì)象就new出一個(gè)ViewModel出來(lái)。只能說(shuō)，它們是必要條件。我們需要將要監(jiān)聽(tīng)的屬性變成訪問(wèn)器屬性，所有訪問(wèn)器屬性都是共用同一套setter, getter方法。getter里面做依賴收集(不是必須的)，setter里做視圖刷新或觸發(fā)該屬性的$watch回調(diào)。在此之前，我們需要完成一套觀察者模式，就是github中常見(jiàn)的EventEmitter庫(kù)：

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

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

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

但這些庫(kù)的訂閱數(shù)組都是放函數(shù)。我們需要放綁定對(duì)象，需要改造一下，并且改成$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()
            }
        }
    }
}

然后我們?cè)贋樗砑右粋€(gè)$id,用于標(biāo)記這個(gè)VM是作用于頁(yè)面某個(gè)元素上的。

var vm = avalon.define({
    $id: "test",
    aaa: 1,
    bbb: 2
})

{{@aaa}}

我們看avalon.define的一個(gè)簡(jiǎn)單實(shí)現(xiàn)：

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中這里會(huì)進(jìn)行動(dòng)態(tài)依賴收集，詳見(jiàn)這里
//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
}

此外，你可以添加更多以$開(kāi)頭的屬性方法，來(lái)增強(qiáng)它的功能。在avalon, angular等庫(kù)中，$開(kāi)頭的屬性方法都是框架自用的。avalon2的一個(gè)簡(jiǎn)單的vm是藏了許多不可遍歷的$xxx屬性方法:

那么如何將綁定屬性放進(jìn)vm.$events.aaa數(shù)組中呢。這就要靠掃描機(jī)制。從上到下掃描。

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) //重點(diǎn)
    }
    if(el.children && el.children.length){
        scanNodes(el.children, vm)
    }
}
function scanText(){
    // 用正則檢測(cè)是否有花括號(hào)
    // 有則轉(zhuǎn)換為綁定對(duì)象
    // 并進(jìn)行vm.$watch
}
function scanAttrs(){
    //遍歷el.attributes中所有對(duì)象,看name是否以ms-開(kāi)頭
}

那么如何將綁定屬性放進(jìn)vm.$events.aaa數(shù)組中呢。這就要靠掃描機(jī)制。從上到下掃描。

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) //重點(diǎn)
    }
    if(el.children && el.children.length){
        scanNodes(el.children, vm)
    }
}
function scanText(){
    // 用正則檢測(cè)是否有花括號(hào)
    // 有則轉(zhuǎn)換為綁定對(duì)象
    // 并進(jìn)行vm.$watch
}
function scanAttrs(){
    //遍歷el.attributes中所有對(duì)象,看name是否以ms-開(kāi)頭
}

里面用到一個(gè)mergeVM方法，其實(shí)也簡(jiǎn)單，就是將兩個(gè)VM合并成一個(gè)新的VM。使用Object.getOwnPropertyDescriptor或者更新的Object.getOwnPropertyDescriptors，就能得到所有訪問(wèn)器屬性的定義對(duì)象，然后合成。如果是古老瀏覽器，我們可以將訪問(wèn)器屬性放到一個(gè)叫$accessors對(duì)象上。

現(xiàn)在我們這個(gè)VM是很簡(jiǎn)單的，它只支持一重屬性，如果屬性的屬性也是對(duì)象呢。這個(gè)我們需要將這define方法遞 歸一下不就行了嗎？！對(duì)于數(shù)組的監(jiān)控，業(yè)界流行的方法是重寫(xiě)數(shù)組的大部分方法，然后再加上一些移除數(shù)組的方法。

至此，avalon內(nèi)部各種概念的關(guān)系圖如下：

from 《javascript框架設(shè)計(jì)》第三版，敬請(qǐng)期待