JavaScript观察者模式_javascript事件系统

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

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

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

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

class Observer {
  constructor(name) {
    this.name = name;
  }

  update(data) {
    console.log(`${this.name} received:`, data);
  }
}

// 使用示例
const subject = new Subject();
const obs1 = new Observer('Observer 1');
const obs2 = new Observer('Observer 2');

subject.addObserver(obs1);
subject.addObserver(obs2);
subject.notify('Hello from subject!');

const button = document.getElementById('myButton');

button.addEventListener('click', function() {
  console.log('Button was clicked!');
});

// 点击按钮后，回调函数被调用 —— 观察者收到通知

// 创建一个可绑定事件的对象
const eventBus = new EventTarget();

// 监听自定义事件
eventBus.addEventListener('dataReady', (e) => {
  console.log('Data received:', e.detail);
});

// 分发事件
const event = new CustomEvent('dataReady', { detail: 'Some data' });
eventBus.dispatch(event);

setTimeout(() => {
  console.log('Timeout callback executed');
}, 0);

console.log('Sync code runs first');