我们主要通过ES5中的Object.defineProperty
实现,主要是利用里面的get
和set
来实现数据双向绑定
Object.defineProperty()
方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
注:应当直接在
Object
构造器对象上调用此方法,而不是在任意一个Object
类型的实例上调用。
以上没满足知识量的可查看详情 :双向绑定原理详情
//布局
<div id="dome"></div>
<input type="text" id="inp">
//js
var obj={}
var inp=document.getElementById('inp')
var dome=document.getElementById('dome')
Object.defineProperty(obj,'name',{
get:function(val){
return obj
},
set:function(val){ //该属性被赋值的时候触发
inp.value=val
dome.innerHTML=val//页面显示
}
})
inp.addEventListener('input',function(e){//输入框触发input事件给obj的name赋值
obj.name=e.target.value
},false)
obj.name='sss'//默认值
console.log(obj.name);
以上就是对ES5中Object.defineProperty实现双向数据绑定的理解