该接触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;
})
其他的应用场景还需要小伙伴不断的尝试与发现。