炫意html5
最早CSS3和HTML5移动技术网站之一

Proxy和defineProperty实现数据观察(观察者模式)

前言

说到vue的原理,大家都知道是通过defineProperty实现对数据的的观察,也知道vue3.0改成了Proxy。关于代理模式(其实也是一种设计模式),最新es6 有实现代理的方法,即我们可以用Proxy。

关于Proxy,文档还是阮一峰老师的es6,可以结合reflect一起学习。这里就不多用语言来描述了。

defineProperty

我们知道,vue中,有$set方法来强制视图更新,当然也有数组的一些操作。其实这是defineProperty 来观察对象或者数组的一些缺陷。简单实现一个defineProperty观察数据的方法。

const person = {
name: '炫H5',
age: 20
};
Object.keys(person).forEach(function(key) {
Object.defineProperty(person, key, {
enumerable: true,
configurable: true,
get: function() {
console.log('get');
},
set: function(newVal) {
// 当属性值发生变化时我们可以进行额外操作
console.log(`欢迎大家来到${newVal}`);
},
});
});
person.name = '炫H5前端博客';
//欢迎大家来到炫H5前端博客
//"炫H5前端博客"

这样就实现了对people的观察

Proxy

用代理模式Proxy实现观察者

const queuedObservers = new Set();
const observe = fn => queuedObservers.add(fn);
const observable = obj => new Proxy(obj, {set});
function set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
queuedObservers.forEach(observer => observer());
return result;
}
const person = observable({
name: '炫H5',
age: 5
});
function print() {
console.log(`${person.name}, ${person.age}年了`)
}
observe(print);
person.name = '炫H5前端博客已经有';

打印出

炫H5前端博客已经有, 5年了
"炫H5前端博客已经有"

两种方式实现对数据的观察,具体细节大家还要细细琢磨!

炫意HTML5 » Proxy和defineProperty实现数据观察(观察者模式)

Java基础教程Android基础教程