从上一篇中,我们理解了数据监听的原理,接下来我们来实现一个最简单的demo
本demo中,通过定义数据对象的get set,实现M绑定到V,通过绑定dom的input,实现V绑定到M
M—>V
"use strict"
var obj = {}
var txtTest = document.querySelector('input')
var divTest = document.querySelector('div')
Object.defineProperty(obj, 'key1', {
set: (newValue) => {
divTest.innerHTML = newValue
txtTest.value = newValue
return newValue
},
get: () => {
}
})
上面的代码中,定义了一个obj,使用defineProperty对键值key1进行了数据劫持,当set值时,对dom进行赋值
V——>M
通过注册input的input事件,我们来监听input的值变化时,把当前的input值赋给obj.key1,从而触发obj.key1的set
txtTest.addEventListener('input',()=>{
obj.key1 = txtTest.value
})
这就是最简单的双向绑定的demo了