js实现oberve

实现观察者模式（Observer Pattern）的 JavaScript 方法

观察者模式是一种设计模式，允许对象（观察者）订阅另一个对象（被观察者）的状态变化。以下是几种实现方式：

使用类实现基础观察者模式

class Subject {
  constructor() {
    this.observers = [];
  }

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

  unsubscribe(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class Observer {
  update(data) {
    console.log('Observer received:', data);
  }
}

// 使用示例
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.subscribe(observer1);
subject.subscribe(observer2);
subject.notify('Hello Observers!');

使用函数和对象实现轻量级观察者

function createSubject() {
  const observers = [];

  return {
    subscribe: (fn) => observers.push(fn),
    unsubscribe: (fn) => {
      const index = observers.indexOf(fn);
      if (index > -1) observers.splice(index, 1);
    },
    notify: (data) => observers.forEach(fn => fn(data))
  };
}

// 使用示例
const subject = createSubject();

const observer1 = data => console.log('Observer 1:', data);
const observer2 = data => console.log('Observer 2:', data);

subject.subscribe(observer1);
subject.subscribe(observer2);
subject.notify('Data update');

使用 Proxy 实现响应式观察

function createReactiveObserver(target) {
  const observers = new Map();

  return new Proxy(target, {
    set(obj, prop, value) {
      obj[prop] = value;
      if (observers.has(prop)) {
        observers.get(prop).forEach(fn => fn(value));
      }
      return true;
    },
    subscribe(prop, fn) {
      if (!observers.has(prop)) {
        observers.set(prop, []);
      }
      observers.get(prop).push(fn);
    },
    unsubscribe(prop, fn) {
      if (observers.has(prop)) {
        const fns = observers.get(prop);
        const index = fns.indexOf(fn);
        if (index > -1) fns.splice(index, 1);
      }
    }
  });
}

// 使用示例
const state = createReactiveObserver({ count: 0 });

state.subscribe('count', (value) => {
  console.log('Count changed:', value);
});

state.count = 1; // 自动触发观察者

使用 ES6 的 Set 优化观察者存储

class Observable {
  constructor() {
    this.observers = new Set();
  }

  subscribe(fn) {
    this.observers.add(fn);
  }

  unsubscribe(fn) {
    this.observers.delete(fn);
  }

  notify(data) {
    this.observers.forEach(fn => fn(data));
  }
}

// 使用示例
const observable = new Observable();

const logData = data => console.log('Data:', data);
observable.subscribe(logData);
observable.notify('Test message');
observable.unsubscribe(logData);

这些方法展示了 JavaScript 中实现观察者模式的不同方式，从基础的类实现到更高级的 Proxy 方法。选择哪种实现取决于具体需求和项目复杂度。