/**
* ES6 系列之 defineProperty 与 proxy
*/
/**
* definePropety(obj,prop,descript)
* obj:定一个对象
* prop:定义对象属性
* descript:设置属性值值 // 数据绑定，数据监听
*/
var obj = {};
object.defineProperty(obj, num, {
value: 1,// 设置该属性的值
configurable: true,// 可以使用delete的属性
emumerable: true, // 可以使用枚举--for-in循环
writable: true, // 可以修改value的值
});
// 属性符描述符必须是数据描述符或者存储数据描述符二种形式，不能同时是二者
// 1
object.defineProperty({}, num, {
value: 1,
configurable: true,
emumerable: true,
writable: true,
});
// 2
var value = 1;
object.defineProperty({}, num, {
get: function (value) {
return value;
},
set: function (newvalue) {
return newvalue;
},
emumerable: true,
writable: true,
})
// 监听对象的问题
function Archiver() {
var value = null;
var Archiver = [];
Object.defineProperty(this, num, {
get: function () {
console.log('执行了 get 操作');
return value;
},
set: function (value) {
console.log('执行了set 操作');
value = value;
Archiver.push({ val: value });
}
});
this.getArchiver = function () {
return Archiver;
}
}
var src = new Archiver();
src.num //执行了 get 操作
src, num = 11;
src.num = 12;
console.log(src.getArchiver());
// watchAPI, 即当数据变化的时候，自动进行数据渲染
var obj = {
value: 1
}
// 储存 obj.value 的值
// var value = 1; // 更新变量使用set方法
Object.defineProperty(obj, "value", {
get: function () {
console.log('gun');
return value;
},
set: function (newValue) {
console.log('hundan');
value = newValue;
document.getElementById('container').innerHTML = newValue;
}
});
document.getElementById('button').addEventListener("click", function () {
obj.value += 1;
});
/**
* 重新封装的一个watch
*
*/
(function () {
var root = this;
var obj = {
value: 1
};
watch(obj, "value", function (newvalue) {
document.getElementById('container').innerHTML = newvalue;
});
document.getElementById('button').addEventListener('click', function () {
obj.value += 1;
});
function watch(obj, name, func) {
var value = obj[name];
Object.defineProperty(obj, name, {
get: function () {
return value
},
set: function (newvalue) {
value = newvalue;
func(value);
}
})
console.log('valuevaluevaluevalue===' + obj.value);
}
})();
/**
* proxy 就必须修改代理对象，即 Proxy 的实例才可以触发拦截。
*
*/
(function () {
var root = this;
function watch(target, func) {
var proxy = new Proxy(target, {
get: function (target, prop) {
return target[prop];
},
set: function (target, prop, value) {
target[prop] = value;
func(prop, value);
}
});
if (target[name]) proxy[name] = value;
return proxy;
}
this.watch = watch;
})()
var obj = {
value: 1
}
var newObj = watch(obj, function (key, newvalue) {
if (key == 'value') document.getElementById('container').innerHTML = newvalue;
})
document.getElementById('button').addEventListener("click", function () {
newObj.value += 1
});