采用数据劫持跟发布者-订阅者模式实现的
通过Object.defineProperty(obj,“name”,{})给对象的各个属性绑定getter和setter函数,当数据变化时,发布消息给订阅者,触发相应的监听回调
watcher订阅者是Oberver和Complier之间通信的桥梁,主要做的事情:
在初始化时将自身添加至dep中
自身必须有一个update()方法
待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
简单实现双向绑定:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
var obj = {}
var tarVal = 'hello'
Object.defineProperty(obj,'age',{
get(){
console.log("调用了get方法")
// return tarVal
},
set(newVal){
console.log("调用了set方法,设置的值为:",newVal)
tarVal = newVal
document.getElementById('inputA').value = tarVal
document.getElementById('b').innerHTML = tarVal
}
})
// obj.age;
// obj.age = 12
document.addEventListener('keyup',function(e){
console.log(e,e.target.value)
obj.age = e.target.value
})
}
</script>
</head>
<body>
<input type="text" id="inputA">
<span id="b"></span>
</body>
</html>
运行结果: