设计模式系列之--观察者模式-画图讲解

观察者模式已经是比较常见的设计模式了,并且使用的频率也比较高,

那么我们什么时候用,简而言之就是,当我们一个主体改变,它所有下级要跟着改变的时候就需要用了,比如:换肤,全局数据修改,有点类似于全局状态机,只不过它可以监听改变的过程。

下面以一张图简单了解下:

下面代码讲解下:

首先创建一个被观察者

javascript 复制代码
  constructor(){
    this.observerList = []
  }
  addObserver(observer){
    this.observerList.push(observer)
  }
  removeObserver(observer){
    const index = this.observerList.findIndex((item)=>item.name === observer.name)
    this.observerList.splice(index,1)
  }
  notifyObservers(message){
    const observers = this.observerList
    observers.forEach(item => {
      item.notified(message)
    });
  }
}

创建观察者

javascript 复制代码
class Observer{
  constructor(name,Subject){
    this.name = name
    if(Subject){
      Subject.addObserver(this)
    }
  }
  notified(message){
    console.log(this.name,message )
  }
}

配合使用

javascript 复制代码
const subject = new Subject()
const observer = new Observer('观察者1号',subject) // 加入观察者
const observer2 = new Observer('观察者2号')
subject.addObserver(observer2)// 加入观察者
subject.notifyObservers('起飞了')`

实现结果

有帮助到你点个赞吧!

相关推荐
小飞悟11 小时前
一打开文章就弹登录框?我忍不了了!
前端·设计模式
Ares-Wang11 小时前
设计模式》》门面模式 适配器模式 区别
设计模式·适配器模式
不修×蝙蝠11 小时前
设计模式深度解析:单例、工厂、适配器与代理模式
单例模式·设计模式·代理模式·适配器模式·工厂
C雨后彩虹12 小时前
行为模式-策略模式
java·设计模式·策略模式
玩代码12 小时前
模板方法设计模式
java·开发语言·设计模式·模板方法设计模式
画船听雨眠aa17 小时前
23种设计模式--#2单例模式
单例模式·设计模式
饕餮争锋19 小时前
设计模式笔记_结构型_桥接模式
笔记·设计模式·桥接模式
我爱吃菠 菜19 小时前
手撕设计模式之消息推送系统——桥接模式
java·设计模式·桥接模式
vvilkim20 小时前
深入理解设计模式:命令模式详解
设计模式·命令模式
DKPT1 天前
Java行为型模式(状态模式)实现方式与测试方法
java·笔记·学习·设计模式·状态模式