js实现obs

JavaScript 实现 OBS（观察者模式）

观察者模式（Observer Pattern）是一种设计模式，允许对象（观察者）订阅另一个对象（被观察者）的状态变化。当被观察者的状态发生变化时，会自动通知所有观察者。

基本实现

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!');

更实用的实现

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

  subscribe(callback) {
    this.subscribers.add(callback);
    return () => this.unsubscribe(callback);
  }

  unsubscribe(callback) {
    this.subscribers.delete(callback);
  }

  notify(data) {
    this.subscribers.forEach(callback => callback(data));
  }
}

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

const unsubscribe1 = observable.subscribe(data => {
  console.log('Subscriber 1:', data);
});

const unsubscribe2 = observable.subscribe(data => {
  console.log('Subscriber 2:', data);
});

observable.notify('First notification');

unsubscribe1();

observable.notify('Second notification');

支持多种事件类型

class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = new Set();
    }
    this.events[eventName].add(callback);
    return () => this.off(eventName, callback);
  }

  off(eventName, callback) {
    if (this.events[eventName]) {
      this.events[eventName].delete(callback);
    }
  }

  emit(eventName, data) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(callback => callback(data));
    }
  }
}

// 使用示例
const emitter = new EventEmitter();

const unsubscribeClick = emitter.on('click', data => {
  console.log('Click event:', data);
});

emitter.on('hover', data => {
  console.log('Hover event:', data);
});

emitter.emit('click', { x: 100, y: 200 });
emitter.emit('hover', { element: 'button' });

unsubscribeClick();

emitter.emit('click', 'This wont be logged');

响应式属性实现

function createReactiveObject(obj) {
  const subscribers = new Map();

  return new Proxy(obj, {
    set(target, property, value) {
      target[property] = value;
      if (subscribers.has(property)) {
        subscribers.get(property).forEach(callback => callback(value));
      }
      return true;
    },
    get(target, property) {
      if (typeof target[property] === 'object' && target[property] !== null) {
        return createReactiveObject(target[property]);
      }
      return target[property];
    }
  });
}

function watchProperty(obj, property, callback) {
  if (!obj._subscribers) {
    obj._subscribers = new Map();
  }
  if (!obj._subscribers.has(property)) {
    obj._subscribers.set(property, new Set());
  }
  obj._subscribers.get(property).add(callback);
  return () => obj._subscribers.get(property).delete(callback);
}

// 使用示例
const state = createReactiveObject({
  user: {
    name: 'John',
    age: 30
  },
  loggedIn: false
});

watchProperty(state.user, 'name', (newName) => {
  console.log('Name changed to:', newName);
});

watchProperty(state, 'loggedIn', (isLoggedIn) => {
  console.log('Login status changed:', isLoggedIn);
});

state.user.name = 'Jane';
state.loggedIn = true;

这些实现展示了JavaScript中观察者模式的不同应用场景，从基础实现到更复杂的响应式系统。根据具体需求可以选择合适的实现方式。