APP下载

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

消息来源:baojiabao.com 作者: 发布时间:2024-05-16

报价宝综合消息ES6入门系列 ----- 使用Proxy 实现观察者模式

观察者模式是指函式自动观察资料物件的变化, 一旦物件有变化,函式就会自动执行。它定义了一种一对多的依赖关系,我们用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;

首先定义了一个observe 用来储存 要触发的函式。

然后定义了一个observable 函式 对 物件的设值做了一层代理,拦截赋值操作, Reflect.set用来完成预设的设值行为, 然后触发函式。

每当物件呼叫物件内部的的set方法时,就会遍历触发我们新增进callbacks里的回拨函式。

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

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

欢迎大家多多留言讨论,如有错误请大神指教,如果你是小白也可以私信“资料”领取前端学习资料一起学习

2019-12-01 04:51:00

相关文章