观察者模式/发布订阅者模式#1

2020-05-29  本文已影响0人  IamaStupid

观察者模式/发布订阅者模式:

一个或多个观察者对目标的状态感兴趣,通过将自己依附在目标对象上以便注册所感兴趣的内容。目标状态发生改变,会发送一个通知消息,调用每个观察者的更新方法。当观察者不再对目标状态感兴趣时,他们可以简单将自己从中分离。

使用观察者模式的好处:

支持简单的广播通信,自动通知所有已经订阅过的对象。
页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性。
目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。

JS里对观察者模式的实现是通过回调来实现的

观察者模式/发布订阅者模式 很多时候都是相等的,但是它们还是不一样的。

观察者模式

      class Subject {
        constructor () {
          this.subs = []
        }
        // 用来把 主题 和 观察者对象 关联的 方法,(订阅操作)
        addObserve (observer) {
          this.subs.push(observer)
        }
        // 把 主题 和 观察者对象 剥离关联的 方法,(退订操作)
        removeObserve (observer) {
          // 这里加点代码,比如判断参数是不是Observer的示例
          // 比如判断数组中存不存在参数
          this.subs.forEach( (ob, i) => {
            console.log('removeObserve:', i)
            if (ob === observer) {
              this.subs.splice(i, 1)
              return;
            }
          })
        }
        // 主题发生改变, 用来通知观察者对象的方法
        notify () {
          this.subs.forEach( observe => {
            observe.update()
          })
        }
      }
      class Observe {
        constructor (callback) {
          this.callback = callback;
        }
        // 主题改变,观察者做出变化的方法
        update () {
          this.callback()
        }
      }

      let subject = new Subject()

      let w1 = new Observe(() => {
        console.log('1231123')
      })
      subject.addObserve(w1)

      let w2 = new Observe(() => {
        console.log('abcabc')
      })
      subject.addObserve(w2)

      let w3 = new Observe(() => {
        console.log('uuuuuuuu123esd')
      })
      subject.addObserve(w3)

      subject.removeObserve(w2)

      // 假如subject发生了改变
      subject.notify()
上一篇下一篇

猜你喜欢

热点阅读