使用proxy实现观察者模式

观察者与发布订阅的区别

两者的区别是是否有一个中介。 观察者是目标者和被观察者直接通信，发布订阅模式是观察者和被观察者通过中介通信

// 使用普通的方式实现观察者模式
// 被观察者
class Subject {
    constructor() {
        this.observers = [];
    }

    add(observer) {
        this.observers.push(observer);
    }

    remove(observer) {
        let idx = this.observers.findIndex(item => item === observer);
        idx > -1 && this.observers.splice(idx, 1);
    }
    notify() {
        for (let observer of this.observers) {
            observer.update();
        }
    }
}

// 观察者
class Observer {
    constructor(name) {
        this.name = name;
    }
    update() {
        console.log(`目标者通知我更新了，我是：${this.name}`);
    }
}

// 实例化目标者
let subject = new Subject();

// 实例化两个观察者
let obj1 = new Observer('美女Chen');
let obj2 = new Observer('美女Chen2');

// 向目标者添加观察者
subject.add(obj1);
subject.add(obj2);

// 目标者通知更新
subject.notify();

使用Proxy实现观察者模式

// 实现
const queuedObservers = new Set();

const observe = fn => queuedObservers.add(fn);

// Proxy 可以理解成，在目标对象之前架设一层“拦截”，
// 外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
const observable = obj => new Proxy(obj, {
    // 拦截对象属性的设置 依次为目标对象、属性名、属性值和 Proxy 实例本身
    set: function(target, key, value, receiver) {
        console.log('cll', target, key, value)
            // Reflect.set(target, key, value, receiver) 设置target对象的key属性等于value。
        const result = Reflect.set(target, key, value, receiver);
        queuedObservers.forEach(observer => observer());
        return result;
    }
});



const person = observable({
    name: '张三',
    age: 20
});

function print() {
    console.log(`${person.name}, ${person.age}`)
}

observe(print);
person.name = '李四';

const queuedObservers = new Set()

const observe = (fn = queuedObservers.add(fn))
const observable = (obj = new Proxy(obj, { set }))

function set(target, key, value, receiver) {
  const result = Reflect.set(target, key, value, receiver)
  queuedObservers.forEach((observer) => observer())

  return result
}