mvvm框架里的数据监控对象,包括 基本数据类型和对象, 对象分为对象和数组.
首先是对普通数据类型和对象的监控.其次是对数组的监控.
对对象的监控需要用到递归;
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
q请输入:<input id="oInput" type="text">
<div>
<p>我是绑定的输出框</p>
<div id="show"></div>
</div> <script>
//创建一个data对象作为数据层model
//输入时,将input的值传给data,data接到值后,触发通知函数,并将值传给show
//当data的值被修改时候,触发data的set,将input的值修改,并传值给show
const data = {
value: '',
demo: ''
}
oInput.oninput = function () {
data.value = this.value;
} function observe(data) {//监控对象属性发生变化
if (!data || typeof data !== 'object') {
return;
}
Object.keys(data).forEach(function (ele) {//对象的所有属性
definePro(data, ele, data[ele]) //形成闭包;
}) }
function definePro(data, key, value) {
observe(value) //用递归监控value是object的情况.
Object.defineProperty(data, key, {
get() {
getProx();
return value;
},
set(newVal) {
if(value === newVal){//判断改没改
return ;
}
setProx();
value = newVal;//这一步最重要!!!!形成闭包,返回value就可以
update();
}
}) }
function update(){
var value = data.value
show.innerText = value;
oInput.value = value;
}
function getProx() {
console.log('get')
}
function setProx() {
console.log('set')
}
observe(data)
</script> </body> </html>
对应数组,利用defineProperty监控Array.prototype.
let arr = [];
let { push } = Array.prototype;//仅以push为例 function update() {
console.log('更新了')
}
function observe(data) {
Object.defineProperty(Array.prototype, 'push', {
value: function (...arg) {
update();
push.apply(this, arg);
} })
}
observe();