用js实现一个数据双向绑定

版权声明：本文为博主（风轻云淡）原创文章，未经博主允许不得转载。CSDN https://blog.csdn.net/qq_20343517/article/details/82727046

该接触angular，就很好奇他是如何实现的，最近有些时间，就查阅了相关的东西，其实很简单，并没有想象中的那么高大上。

从原理触发

在JavaScript中给一个对象添加属性可以像下面这样

obj.age=20;
obj.say=function(){}

还可以通过Object.defineProperty来定义新属性或者修改原有的属性，其余发如下

Object.defineProperty(obj,prop,descriptor)

语法中，obj是需要操作的目标对象，prop是需要定义或修改的属性名字，descriptor所拥有的特性

然而关于descriptor目前有两种形式，数据描述和存取器描述，关于存取器描述，他允许我们定义get,set等其他属性，如下

var obj={};
var initValue='hello';
Object.defineProperty(obj,"newKey",{
    get:function(){
        return initValue;
    },
    set:function(value){
        initValue=value;
    }
});
console.log(obj.newKey);
obj.newKey='change value';
console.log(obj.newKey,initValue)

通过这个例子，我们知道了当获取值的时候触发get函数，当设置值得时候触发set函数，设置的新的值由参数value拿到

实现代码

<input type="text" id="txt">
<p id="show-txt"></p>

var obj={};
let writeDom=document.getElementById("txt");
let showDom=document.getElementById("show-txt");
Object.defineProperty(obj,"txt",{
    get:function(){
        return obj;
    },
    set:function(value){
        showDom.innerHTML=value;
    }
});
writeDom.addEventListener("keyup",function(e){
    obj.txt=e.target.value;
})

其他的应用场景还需要小伙伴不断的尝试与发现。