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

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

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

模式定义

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

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

模式构成

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

模式作用

解耦

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

可扩展性

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

一致性

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

通知机制

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

应用场景

GUI事件处理

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

发布-订阅系统

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

股票市场监控

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

消息通知系统

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

游戏开发

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

模式总结

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

模式实现

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

    被观察者 Subject

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

    观察者 observerA

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

    观察者 observerB

    js 复制代码
    document.addEventListener('taskStart', () => {
      console.log('观察者B执行操作')
    })
  • 分模块协作需要解耦的

    被观察者 Subject

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

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

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

    观察者 observerB

    js 复制代码
    document.addEventListener('observerB', () => {
      console.log('观察者B执行操作')
      setTimeout(() => {
        console.log('观察者B执行操作完成')
      }, 2000)
    })
相关推荐
tuokuac19 分钟前
nginx配置前端请求转发到指定的后端ip
前端·tcp/ip·nginx
程序员爱钓鱼23 分钟前
Go语言实战案例-开发一个Markdown转HTML工具
前端·后端·go
万少1 小时前
鸿蒙创新赛 HarmonyOS 6.0.0(20) 关键特性汇总
前端
Aczone281 小时前
硬件(五) 存储、ARM 架构与指令系统
arm开发·嵌入式硬件·架构
闲看云起1 小时前
从 GPT 到 LLaMA:解密 LLM 的核心架构——Decoder-Only 模型
gpt·架构·llama
还有多远.1 小时前
jsBridge接入流程
前端·javascript·vue.js·react.js
蝶恋舞者1 小时前
web 网页数据传输处理过程
前端
非凡ghost1 小时前
FxSound:提升音频体验,让音乐更动听
前端·学习·音视频·生活·软件需求
烛阴2 小时前
【TS 设计模式完全指南】从零到一:掌握TypeScript建造者模式,让你的对象构建链式优雅
javascript·设计模式·typescript
吃饭最爱2 小时前
html的基础知识
前端·html