javascript，如何?資料繫結

標籤：objects   https   init   doc   blog   var   div   prot   代碼量   

在三大架構 搶佔前端開發技術領域的時代，基本每個架構都是實現了資料繫結，

今天我們來解密一下資料繫結的原理，

原理關乎一個很關鍵的東西，Object.prototype.__defineSetter和Object.prototype.__defineGetter

MDN地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__

 

現在我就實現一個函數，把一個對象上的某個值，和dom元素的innerHTML綁定在一起。

function bind(ele,obj,key){    var index={        init:function(){            //檢查是否有初始值，有的話就複製            if (key in obj) {                ele.innerHTML=obj[key]            }            this.bind()        },        bind:function(){            obj.__defineSetter__(key,function(v){                ele.innerHTML=v            })            obj.__defineGetter__(key,function(){                return ele.innerHTML            })        },        _do:function(){}    }    index.init()}

　　不過這個函數有個缺點，只可以把一個值綁定到一個元素的innerHTML上，一個元素可以綁定多個值，但是沒辦法一個值綁定多個dom元素的屬性，不過加以修改就可以實現了，實現的話代碼量就會很長，在這裡就只能拋磚引玉了。

javascript，如何?資料繫結