观察者模式：构建松耦合、可扩展的系统架构

观察者模式用于构建对象之间的一对多依赖关系。在该模式中，一个对象（被观察者）维护了一组依赖它的对象（观察者），并在自身状态变化时通知观察者，使得观察者能够自动更新

这种模式有助于实现松耦合、可扩展的系统架构，同时为处理对象之间的通信提供了一种简洁而灵活的方式

模式定义

观察者模式（Observer Pattern）是一种行为型设计模式，它定义了一种一对多的依赖关系，当主体对象的状态发生变化时，所有依赖它的观察者对象都会得到通知并自动更新

在该模式中，被观察者和观察者之间呈现松耦合的关系，它们可以独立地进行扩展和变化，互不影响

模式构成

由 被观察者（Subject） 和 观察者（Observer） 两个角色构成，被观察者负责维护观察者列表并通知观察者，而观察者则定义了在被观察者状态变化时需要执行的操作

模式作用

解耦

被观察者与观察者之间呈现松耦合的关系，它们可以独立地进行变化和扩展，互不影响

可扩展性

可以方便地增加新的观察者，无需修改被观察者的代码，从而使系统更具可维护性和可扩展性

一致性

被观察者和观察者之间遵循统一的接口或抽象类，保证了一致性和灵活性，使得系统更易于维护和理解

通知机制

被观察者只需通知观察者，无需知道具体观察者的实现细节，降低了对象之间的耦合度

应用场景

GUI事件处理

在图形用户界面中，当用户与界面进行交互时，可以使用观察者模式来处理各种事件，例如按钮点击、鼠标移动等

发布-订阅系统

在分布式系统或消息队列中，可以使用观察者模式实现发布-订阅模型。发布者发布消息，而订阅者订阅感兴趣的消息，并在消息到达时进行相应的处理

股票市场监控

在股票市场中，投资者可以订阅感兴趣的股票，当股票价格发生变化时，系统可以通过观察者模式通知投资者进行相应的操作

消息通知系统

当系统中某些事件发生时，需要通知用户或其他系统进行相应的操作，可以使用观察者模式实现消息通知功能

游戏开发

在游戏开发中，可以使用观察者模式来处理游戏内的事件，例如角色状态变化、碰撞检测等

模式总结

观察者模式能够帮助我们构建松耦合、可扩展的系统，并实现对象之间的动态通信和协作。该模式将被观察者与观察者之间的依赖关系解耦，使得系统更易于维护和扩展

模式实现

• 单个目标对象发生改变，需要通知多个观察者

  被观察者 Subject

  import observerA from './observerA'
  import observerB from './observerB'
  el.addEventListener('click', async () => {
    console.log('目标对象发生变化')
    document.dispatchEvent(new Event('taskStart'))
  })

  观察者 observerA

  document.addEventListener('taskStart', () => {
    console.log('观察者A执行操作')
  })

  观察者 observerB

  document.addEventListener('taskStart', () => {
    console.log('观察者B执行操作')
  })

• 分模块协作需要解耦的

  被观察者 Subject

  import observerA from './observerA'
  el.addEventListener('click', async () => {
    console.log('目标对象发生变化')
    document.dispatchEvent(new Event('taskStart'))
  })

  观察者 observerA 以及创建新的被观察者

  import observerB from './observerB'
  document.addEventListener('taskStart', () => {
    console.log('观察者A执行操作')
    setTimeout(() => {
      console.log('观察者A执行操作完成')
      document.dispatchEvent(new Event('observerB'))
    }, 2000)
  })

  观察者 observerB

  document.addEventListener('observerB', () => {
    console.log('观察者B执行操作')
    setTimeout(() => {
      console.log('观察者B执行操作完成')
    }, 2000)
  })