javascript，如何实现数据绑定

Posted 2020-10-17 名分开就是姓名

在三大框架 抢占前端开发技术领域的时代，基本每个框架都是实现了数据绑定，

今天我们来解密一下数据绑定的原理，

原理关乎一个很关键的东西，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元素的属性，不过加以修改就可以实现了，实现的话代码量就会很长，在这里就只能抛砖引玉了。