日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 
 
 

  
  
  

  
  
  
var person = {
  
  
  
    name: "Tom"
  
  
  
};
 
 
 

 
 
 

  
  
  
var person = {
  
  
  
    name: "Tom",
  
  
  
    setName: function(newName) {
  
  
  
        this.name = newName;
  
  
  
        //do something
  
  
  
    }
  
  
  
};
 
 
 

 
 
 

  
  
  
var person = {
  
  
  
    name: "Tom",
  
  
  
    gender: 5
  
  
  
    set: function(key, value) {
  
  
  
        this[key] = value;
  
  
  
        //do something
  
  
  
    }
  
  
  
};
 
 
 

 
 
 

  
  
  
Person.prototype.name = function(value) {
  
  
  
    if (arguments.length == 0) {
  
  
  
        return this._name;
  
  
  
    }
  
  
  
    else {
  
  
  
        this._name = value;
  
  
  
    }
  
  
  
}
 
 
 

 
 
 

  
  
  
class Person
  
  
  
{
  
  
  
    private string name;
  
  
  

  
  
  
    public string Name
  
  
  
    {
  
  
  
        get
  
  
  
        {
  
  
  
            return name;
  
  
  
        }
  
  
  
        set
  
  
  
        {
  
  
  
            name = value;
  
  
  
        }
  
  
  
    }
  
  
  
}
 
 
 

 
 
 

  
  
  
var person = {};
  
  
  

  
  
  
// Add an accessor property to the object.
  
  
  
Object.defineProperty(person, "name", {
  
  
  
    set: function (value) {
  
  
  
        this._name = value;
  
  
  
        //do something
  
  
  
    },
  
  
  
    get: function () {
  
  
  
        return this._name;
  
  
  
    },
  
  
  
    enumerable: true,
  
  
  
    configurable: true
  
  
  
});
 
 
 

 
 
 

  
  
  
function parseElement(element) {
  
  
  
    for (var i=0; i
  
  
  
        parseAttribute(element.attributes[i]);
  
  
  
    }
  
  
  

  
  
  
    for (var i=0; i
  
  
  
        parseElement(element.children[i]);
  
  
  
    }
  
  
  
}
 
 
 

 
 
 

  
  
  
thin.define("Person", [], function() {
  
  
  
    function Person() {
  
  
  
        this.name = "Tom";
  
  
  
        this.age = 5;
  
  
  
    }
  
  
  

  
  
  
    Person.prototype = {
  
  
  
        growUp: function() {
  
  
  
            this.age++;
  
  
  
        }
  
  
  
    };
  
  
  

  
  
  
    return Person;
  
  
  
});
 
 
 

為了使得結(jié)構(gòu)更加容易看，我們把界面的無關(guān)屬性比如樣式之類都去掉了，只留下不能再減少的這么一段?，F(xiàn)在我們可以看到，在界面的頂層定義一個(gè)vm- model屬性，值為實(shí)體的名稱。兩個(gè)輸入框通過vm-value來綁定到實(shí)例屬性，vm-init綁定界面的初始化方法，vm-click綁定按鈕的點(diǎn) 擊事件。

好了，現(xiàn)在我們可以來掃描這個(gè)簡(jiǎn)單的DOM結(jié)構(gòu)了。想要做這么一個(gè)綁定，首先要考慮數(shù)據(jù)從哪里來？在綁定name和code屬性之前，毫無疑問，應(yīng)當(dāng)先實(shí)例化一個(gè)Person，我們?cè)趺床拍苤佬枰裀erson模塊實(shí)例化呢？

當(dāng)掃描到一個(gè)DOM元素的時(shí)候，我們要先檢測(cè)它的vm-model屬性，如果有值，就取這個(gè)值來實(shí)例化，然后，把這個(gè)值一直傳遞下去，在掃描其他屬 性或者下屬DOM元素的時(shí)候都帶進(jìn)去。這么一來，parseElement就變成一個(gè)遞歸了，于是它只好有兩個(gè)參數(shù)，變成了這樣：

 
 
 

  
  
  
function parseElement(element, vm) {
  
  
  
    var model = vm;
  
  
  

  
  
  
    if (element.getAttribute("vm-model")) {
  
  
  
        model = bindModel(element.getAttribute("vm-model"));
  
  
  
    }
  
  
  

  
  
  
    for (var i=0; i
  
  
  
        parseAttribute(element, element.attributes[i], model);
  
  
  
    }
  
  
  

  
  
  
    for (var i=0; i
  
  
  
        parseElement(element.children[i], model);
  
  
  
    }
  
  
  
}
 
 
 

看看我們打算怎么來實(shí)例化這個(gè)模型，這個(gè)bindModel方法的參數(shù)是模塊名，于是我們先去use一下，從工廠里生成出來，然后new一下，先這么return出去吧。

 
 
 

  
  
  
function bindModel(modelName) {
  
  
  
    thin.log("model" + modelName);
  
  
  

  
  
  
    var model = thin.use(modelName, true);
  
  
  
    var instance = new model();
  
  
  

  
  
  
    return instance;
  
  
  
}
 
 
 

現(xiàn)在我們開始關(guān)注parseAttribute函數(shù)，可能的attribute有哪些種類呢？我列舉了一些很常用的：

init，用于綁定初始化方法

click，用于綁定點(diǎn)擊

value，綁定變量

enable和disable，綁定可用狀態(tài)

visible和invisible，綁定可見狀態(tài)

然后就可以實(shí)現(xiàn)我們parseAttribute函數(shù)了：

 
 
 

  
  
  
function parseAttribute(element, attr, model) {
  
  
  
    if (attr.name.indexOf("vm-") == 0) {
  
  
  
        var type = attr.name.slice(3);
  
  
  

  
  
  
        switch (type) {
  
  
  
            case "init":
  
  
  
                bindInit(element, attr.value, model);
  
  
  
                break;
  
  
  
            case "value":
  
  
  
                bindValue(element, attr.value, model);
  
  
  
                break;
  
  
  
            case "click":
  
  
  
                bindClick(element, attr.value, model);
  
  
  
                break;
  
  
  
            case "enable":
  
  
  
                bindEnable(element, attr.value, model, true);
  
  
  
                break;
  
  
  
            case "disable":
  
  
  
                bindEnable(element, attr.value, model, false);
  
  
  
                break;
  
  
  
            case "visible":
  
  
  
                bindVisible(element, attr.value, model, true);
  
  
  
                break;
  
  
  
            case "invisible":
  
  
  
                bindVisible(element, attr.value, model, false);
  
  
  
                break;
  
  
  
            case "element":
  
  
  
                model[attr.value] = element;
  
  
  
                break;
  
  
  
        }
  
  
  
    }
 
 
 

注意到最后還有個(gè)element類型，本來可以不要這個(gè)，但我們考慮到將來，一切都是組件化的時(shí)候，界面上打算不寫id，也不依靠選擇器，而是用某個(gè)標(biāo)志來定位元素，所以加上了這個(gè)，文章最后的示例中使用了它。

#p#

這么多綁定，不打算都講，用bindValue函數(shù)來說明一下吧：

 
 
 

  
  
  
function bindValue(element, key, vm) {
  
  
  
    thin.log("binding value: " + key);
  
  
  

  
  
  
    vm.$watch(key, function (value, oldValue) {
  
  
  
        element.value = value || "";
  
  
  
    });
  
  
  

  
  
  
    element.onkeyup = function () {
  
  
  
        vm[key] = element.value;
  
  
  
    };
  
  
  

  
  
  
    element.onpaste = function () {
  
  
  
        vm[key] = element.value;
  
  
  
    };
  
  
  
}
 
 
 

我們假定每個(gè)模型實(shí)例上帶有一個(gè)$watch方法，用于監(jiān)控某變量的變化，可以傳入一個(gè)監(jiān)聽函數(shù)，當(dāng)變量變化的時(shí)候，自動(dòng)調(diào)用這個(gè)函數(shù)，并且把新舊兩個(gè)值傳回來。

在這個(gè)代碼里，我們使用$watch方法給傳入的key添加一個(gè)監(jiān)聽，監(jiān)聽器里面給監(jiān)聽元素賦值。我們這里偷懶了一下，假定所有的綁定元素都是輸入 框，所以直接給element.value設(shè)置值，為了防止值為空導(dǎo)致顯示undefined，把值跟空字符串用短路表達(dá)式做了個(gè)轉(zhuǎn)換。

接下來，也對(duì)element的幾個(gè)可能導(dǎo)致值變化的事件進(jìn)行了監(jiān)聽，在里面把模型上對(duì)應(yīng)的值更新掉。這樣雙向綁定就做好了。

然后回頭來看$watch的實(shí)現(xiàn)。很顯然這里也要一個(gè)map，我們給它取名為$watchers，存放屬性的綁定關(guān)系，對(duì)于每個(gè)屬性，它的值需要保存一份，供getter獲取，同時(shí)還有一個(gè)數(shù)組，存放了該屬性綁定的處理函數(shù)。當(dāng)屬性發(fā)生變更的時(shí)候，去挨個(gè)把它們調(diào)用一下。

 
 
 

  
  
  
var Binder = {
  
  
  
    $watch: function (key, watcher) {
  
  
  
        if (!this.$watchers[key]) {
  
  
  
            this.$watchers[key] = {
  
  
  
                value: this[key],
  
  
  
                list: []
  
  
  
            };
  
  
  

  
  
  
            Object.defineProperty(this, key, {
  
  
  
                set: function (val) {
  
  
  
                    var oldValue = this.$watchers[key].value;
  
  
  
                    this.$watchers[key].value = val;
  
  
  

  
  
  
                    for (var i = 0; i < this.$watchers[key].list.length; i++) {
  
  
  
                        this.$watchers[key].list[i](val, oldValue);
  
  
  
                    }
  
  
  
                },
  
  
  

  
  
  
                get: function () {
  
  
  
                    return this.$watchers[key].value;
  
  
  
                }
  
  
  
            });
  
  
  
        }
  
  
  

  
  
  
        this.$watchers[key].list.push(watcher);
  
  
  
    }
  
  
  
};
 
 
 

但是vm怎么就有$watcher呢，每個(gè)地方都去判斷一下非空然后再去創(chuàng)建其實(shí)挺麻煩的，所以，這個(gè)屬性我們可以直接在實(shí)例化模型的時(shí)候創(chuàng)建出來。

 
 
 

  
  
  
function bindModel(name) {
  
  
  
    thin.log("binding model: " + name);
  
  
  

  
  
  
    var model = thin.use(name, true);
  
  
  
    var instance = new model().extend(Binder);
  
  
  
    instance.$watchers = {};
  
  
  

  
  
  
    return instance;
  
  
  
}
 
 
 

看看這里的寫法，為什么$watchers要額外設(shè)置，而$watch就可以放在Binder里面來extend呢？

先解釋extend干了什么，它做的是一個(gè)對(duì)象的淺拷貝，也就是說，把Binder的屬性和方法都復(fù)制給了創(chuàng)建出來的model實(shí)例，注意，這個(gè)所 謂的復(fù)制，如果是簡(jiǎn)單類型，那確實(shí)復(fù)制了，如果是引用類型，那復(fù)制的其實(shí)只是一個(gè)引用，所以如果$watchers也放在Binder里，不同的 instance就共享一個(gè)$watchers，邏輯就是錯(cuò)誤的。那為什么$watcher又可以放在這里復(fù)制呢？因?yàn)樗呛瘮?shù)，它的this始終指向當(dāng) 前的執(zhí)行主體，也就是說，如果放在instance1上執(zhí)行，指向的就是instance1，放在instance2上執(zhí)行，指向的就是 instance2，我們利用這一點(diǎn)，就可以不用讓每個(gè)實(shí)例都創(chuàng)建一份$watcher方法，而是共用同一個(gè)。

同理，我們可以把enable，visible，init，click這些都做起來，init的執(zhí)行時(shí)間放在掃描完vm-model那個(gè)element之下的所有DOM節(jié)點(diǎn)之后。

嗯，我們是不是可以試一下了？來寫個(gè)代碼：