使用原生js实现数据的双向绑定

一个基础方法的认识

Object.defineProperty(obj,prop,config)

用法

顾名思义：为一个对象添加一个属性

参数

obj	//要添加属性的对象
prop	//属性名
config	//属性配置

使用该方法的原因

之所以要使用该方法主要是为了对定义的属性进行配置
在config中，我们可以对属性定义getter和setter方法

实现

var data = {};
var tdata = {};

        function bindProp(id,name,prop='value'){
            try{
                //检查属性是否已经存在 不存在则定义配置属性
                if(tdata[name] == undefined){
                    tdata[name] = '';   //使得它默认等于空字符串；
                    tdata[`${name}_setEns`] = [];   //创建该属性的设置事件盒子

                    //定义data中的属性
                    Object.defineProperty(data,name,{
                        get:()=>tdata[name],
                        set:value=>{
                            //执行事件盒子中的事件
                            tdata[`${name}_setEns`].forEach(event => {
                                eval(event);
                            });
                            //复制
                            tdata[name] = value;
                        }
                    })
                }
                
                //为对应属性的事件盒子添加事件  修改DOM中的值
                tdata[`${name}_setEns`].push(`document.getElementById('${id}').${prop} = value;`);

                //为DOM添加事件，修改data中的值
                document.getElementById(id).addEventListener('keydown',function(e){data[name]=this[prop]});
                document.getElementById(id).addEventListener('keyup',function(e){data[name]=this[prop]});
            }catch(error){
                console.error("绑定失败",error);
            }
        }