欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6入门系列 ----- 使用Proxy 实现观察者模式

程序员文章站 2022-07-11 17:11:52
观察者模式是指函数自动观察数据对象的变化, 一旦对象有变化,函数就会自动执行。 它定义了一种一对多的依赖关系,我们用Proxy来实现一个简单的观察者模式(PS: 初学我们认为 观察者模式 == 发布订阅模式, 其实它们有点不同)。 例子: 打印结果:当age发生变化时:打印出 这样我们就简单的实现了 ......

    观察者模式是指函数自动观察数据对象的变化, 一旦对象有变化,函数就会自动执行。

它定义了一种一对多的依赖关系,我们用proxy来实现一个简单的观察者模式(ps: 初学我们认为

观察者模式 == 发布订阅模式, 其实它们有点不同)。

    例子:

const callbacks = new set();
const observe = fn => callbacks.add(fn);
const observable = obj => new proxy(obj, {set});

function set (target, key, value, receiver) {
const result = reflect.set(target, key, value, receiver);
callbacks.foreach(observe => observe());
return result;
}
// 一个可观察的对象
const person = observable({name: 'liu', age: 18});

function change() {
console.log(`${person.name} is ${person.age}`);
}


observe(change);

person.age = 19;
  1. 首先定义了一个observe 用来存储 要触发的函数。
  2. 然后定义了一个observable 函数 对  对象的设值做了一层代理,拦截赋值操作, reflect.set用来完成默认的设值行为, 然后触发函数。
  3. 每当对象调用对象内部的的set方法时,就会遍历触发我们添加进callbacks里的回调函数。

打印结果:当age发生变化时:打印出

 ES6入门系列   -----    使用Proxy 实现观察者模式

 

 

    这样我们就简单的实现了一个观察者模式。