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发生变化时：打印出

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

版权声明：本文来源博客园，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.cnblogs.com/LHLVS/p/11039245.html
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2019-11-17 16:27:40
阅读 ( 974 )
分类：

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

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看