zoukankan      html  css  js  c++  java
  • 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;
    1. 首先定义了一个observe 用来存储 要触发的函数。
    2. 然后定义了一个observable 函数 对  对象的设值做了一层代理,拦截赋值操作, Reflect.set用来完成默认的设值行为, 然后触发函数。
    3. 每当对象调用对象内部的的set方法时,就会遍历触发我们添加进callbacks里的回调函数。

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

     

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

  • 相关阅读:
    准备工作
    小黄衫感言
    2021软件工程总结
    4 20210412-1 原型设计作业
    2021软工-软件案例分析
    202103226-1 编程作业
    《构建之法》——读后感
    2021软件工程-第一周作业01准备工作
    Arthas笔记
    自定义 Web 容器
  • 原文地址:https://www.cnblogs.com/LHLVS/p/11039245.html
Copyright © 2011-2022 走看看