在三大框架 抢占前端开发技术领域的时代,基本每个框架都是实现了数据绑定,
今天我们来解密一下数据绑定的原理,
原理关乎一个很关键的东西,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元素的属性,不过加以修改就可以实现了,实现的话代码量就会很长,在这里就只能抛砖引玉了。