美文网首页
观察者模式/发布订阅者模式#1

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

作者: IamaStupid | 来源:发表于2020-05-29 13:57 被阅读0次

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

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

    使用观察者模式的好处:

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

    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()
    

    相关文章

      网友评论

          本文标题:观察者模式/发布订阅者模式#1

          本文链接:https://www.haomeiwen.com/subject/oemxzhtx.html