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

匿名 (未验证) 提交于 2019-12-02 21:53:52

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

它定义了一种一对多的依赖关系,我们用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. 每当对象调用对象内部的的set方法时,就会遍历触发我们添加进callbacks里的回调函数。

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

 

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!