观察者模式(发布-订阅模式)

// 定义发布者类
class Publisher {
  constructor() {
    this.observers = []
  }
  // 增加订阅者
  add(observer) {
    this.observers.push(observer)
  }
  // 移除订阅者
  remove(observer) {
    this.observers.forEach((item, i) => {
      if (observer === item) {
        this.observers.splice(i, 1)
      }
    })
  }
  // 通知所有订阅者
  notify() {
    this.observers.forEach(observer => {
        observer.update(this)
      })
  }
}

// 定义订阅者类
class Observer {
  constructor() {}
  update() {
    console.log('Observer.update invoked')
  }
}

// 定义一个具体的需求文档(prd)发布类
class PrdPublisher extends Publisher {
  constructor() {
    super()
    // 初始化需求文档
    this.prdState = null
    // 没有拉群,开发群目前为空
    this.observers = []
  }
  // 该方法用于获取当前的prdState
  getState() {
    return this.prdState
  }
  // 该方法用于改变prdState的值
  setState(state) {
    this.prdState = state
    // 需求文档变更,立刻通知所有开发者
    this.notify()
  }
}

// 开发者类
class DeveloperObserver extends Observer {
  constructor() {
    super()
    // 需求文档一开始还不存在,prd初始为空对象
    this.prdState = {}
  }
  // 重写一个具体的update方法
  update(publisher) {
    // 更新需求文档
    this.prdState = publisher.getState()
    // 调用工作函数
    this.work()
  }
  work() {
    // 获取需求文档
    const prd = this.prdState
    // 开始基于需求文档提供的信息搬砖。。。
    console.log('996 begins...')
  }
}
// 创建订阅者:前端开发李雷
let lilei = new DeveloperObserver()
// 创建订阅者:服务端开发小A
const A = new DeveloperObserver()
// 创建订阅者:测试同学小B
const B = new DeveloperObserver()
// 韩梅梅出现了
const hanMeiMei = new PrdPublisher()
// 需求文档出现了
const prd = {
    // 具体的需求内容
}
// 韩梅梅开始拉群
hanMeiMei.add(liLei)
hanMeiMei.add(A)
hanMeiMei.add(B)
// 韩梅梅发送了需求文档,并@了所有人
hanMeiMei.setState(prd)





作者:whh666

出处:https://www.cnblogs.com/whh666/p/16695593.html

版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   资深if-else侠  阅读(32)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
历史上的今天:
2021-09-15 echarts总结
more_horiz
keyboard_arrow_up light_mode palette
选择主题
点击右上角即可分享
微信分享提示