1、数据劫持(vue)：通过Object.defineProperty()去劫持数据每个属性对应的getter和setter
2、脏值检测(angular)：通过特定事件比如input，change，xhr请求等进行脏值检测。
3、发布-订阅模式(backbone)：通过发布消息，订阅消息进行数据和视图的绑定监听。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// var a = ['1','2','3','4','5'];
//// var c = {'wyq':1,'ldx':2};
// var b = Object.keys(a).forEach(key => {
// console.log(key+"//"+a[key]);
// });
// console.log(b);
function observe(data) {
//Object.keys(如果传值是数组返回一个数组,如果是对象返回一个数组索引值是key值);
if (!data || typeof data !== 'object') {
return;
}
// Object.keys(data).forEach(key => {
// observeProperty(data, key, data[key])
// })
return new Observer(data);
}
function observeProperty(obj, key, val) {
observe(val);
//参数
// object
// 必需。 要在其上添加或修改属性的对象。 这可能是一个本机 JavaScript 对象（即用户定义的对象或内置对象）或 DOM 对象。
// propertyname
// 必需。 一个包含属性名称的字符串。
// descriptor
// 必需。 属性描述符。 它可以针对数据属性或访问器属性。
Object.defineProperty(obj, key, {
enumerable: true, // 可枚举
configurable: true, // 可重新定义
get: function () {
console.log(val);
return val;
},
set: function (newVal) {
if (val === newVal || (newVal !== newVal && val !== val)) {
return;
}
console.log('数据更新啦 ', val, '=>', newVal);
val = newVal;
}
});
}
var data = {
a: 'hello'
}
observe(data);
</script>
</body>
</html>
网友评论