发布订阅模式

定义:发布/订阅与观察者模式原理差不多,都是定义一对多的依赖关系,当相关状态更新就会触发相应的更新
本文代码执行流程与流程图基本相同(本文仅为了加深理解,没有添加取消订阅等方法)
发布订阅模式_第1张图片

     // 发布者
      function Publish() {
        this.themes = []
        // 添加
        this.setCol = function (theme) {
          this.themes.push(theme)
        }
        // 主题更新
        this.public = function (theme) {
          const { themes } = this
          for (let i = 0; i < themes.length; i++) {
            if (themes[i] === theme) {
              console.log(`发布者触发${theme.name}主题更新`)
              theme.notify()
            }
          }
        }
      }
      // 主题
      function Theme(name, callback) {
        this.name = name
        this.callback = callback
        this.subscrib = []
        this.setSub = function (sub) {
          this.subscrib.push(sub)
        }
        this.notify = function () {
          console.log(`${this.name}主题触发更新`)
          this.subscrib.forEach((item) => {
            item.updated(callback)
          })
        }
      }
      //订阅者
      function Subscrib(name) {
        this.name = name
        this.updated = function (callback) {
          console.log(`${this.name}接收到新消息`, callback(this.name))
        }
      }
      const sub1 = new Subscrib('订阅者1')
      const sub2 = new Subscrib('订阅者2')
      const theme1 = new Theme('三国', (e) => e)
      const theme2 = new Theme('楚汉', (e) => e)
      const publish = new Publish('发布者')
      publish.setCol(theme1)
      publish.setCol(theme2)
      theme1.setSub(sub1)
      theme2.setSub(sub1)
      theme2.setSub(sub2)
      publish.public(theme1)
      /* 
        发布者触发三国主题更新
        三国主题触发更新
        订阅者1接收到新消息 订阅者1 
      */
      publish.public(theme2)
      /* 
        发布者触发楚汉主题更新
        楚汉主题触发更新
        订阅者1接收到新消息 订阅者1
        订阅者2接收到新消息 订阅者2
       */

你可能感兴趣的