第一个栗子:实现js双向数据绑定(借用网上的例子)1.首先,将结构先搭建好
<inputtype="text"id="txt1"><inputtype="text"id="txt2">
2.方式一:使用最基础的写法
document.addEventListener("keyup",function(e){varstr=e.target.value||"";document.getElementById("txt1").value=str;document.getElementById("txt2").value=str;})
该方法使用主动赋值的方式同步数据
3.方式二:Object.defineProperty()
将所有的监听和响应操作交给Object的自定义存取器属性,先看实现的代码,稍后具体解读2333333
/*只要给obj.>只要访问ob.dataBind,就会触发get方法*/varobj={};Object.defineProperty(obj,"dataBind",{get:function(){returnthis.newValue;},set:function(newValue){this.newValue=newValue||"";document.getElementById("txt1").value=this.newValue;document.getElementById("txt2").value=this.newValue;}})document.addEventListener("keyup",function(e){obj.dataBind=e.target.value;/*这步操作是调用obj.dataBind.set(e.target.value)*/})
这里的dataBind属性是会替换obj的默认的dataBind,如果有设置的话。
4.运行
第二个栗子:实现阶乘1.代码:
<inputtype="number"id="factorial"placeholder="请数输入阶乘数字"><p></p>
/**使用get/set特性实现阶乘功能*/varobj={};Object.defineProperty(obj,"factorial",{get:function(){returnthis.result;},set:function(num){this.result=1;for(vari=1;i<=num;i++){this.result*=i;}}})document.addEventListener("keydown",function(e){vareven=e||event;if(even.keyCode==13){obj.factorial=document.getElementById("factorial").value;document.getElementsByTagName("p")[0].innerText="阶乘的结果是:"+obj.factorial;}})
2.运行
要改变属性的get/set特性,有两种方式:1.设置单个属性:Object.defineProperty()
该方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。默认情况下,使用Object.defineProperty添加的属性是不可变的。语法:Object.defineProperty(obj,prop,descriptor)
obj:需要定义属性的对象
prop:需要定义或修改的属性名
descriptor:被定义或修改的属性描述
2.设置多个属性Object.defineProperties()
语法:Object.defineProperties(obj, props)
get/set
get和set属性称为“存取器属性”,当属性被定义为存取器属性时,js会忽略赋值的属性,直接使用定义的get或set的值。
get是读取属性时调用,一般要返回,set是写入属性时调用,不用返回。
get和set访问器不是对象的属性,而是属性的特性,特性只有在内部才会使用,也就是接口不会暴露。
get和set访问器可以不用定义,不定义也可以读写属性值。只定义get,则属性是只读。只定义set,则属性是只写。
最后
我是参考网上很多例子,按照自己的思路整理出来的,可能也会有很多疏漏,先这样吧竟然学会了用gif图演示,哈哈哈