Picker Ready Go

# 观察者模式 (done)

发布-订阅模式也叫做观察者模式。通过一对一或者一对多的依赖关系，当对象发生改变时，订阅方都会收到通知。在现实生活中，也有很多类似场景，比如我需要在购物网站上购买一个产品，但是发现该产品目前处于缺货状态，这时候我可以点击有货通知的按钮，让网站在产品有货的时候通过短信通知我。

在实际代码中其实发布-订阅模式也很常见，比如我们点击一个按钮触发了点击事件就是使用了该模式

<ul id="ul"></ul>
<script>
    let ul = document.querySelector('#ul')
    ul.addEventListener('click', (event) => {
        console.log(event.target);
    })
</script>
1
2
3
4
5
6
7

在 Vue 中，如何实现响应式也是使用了该模式。对于需要实现响应式的对象来说，在 get 的时候会进行依赖收集，当改变了对象的属性时，就会触发派发更新。

# 观察者模式实现

例子 (opens new window)

  • 1、有观察者（Observer）和被观察者（Subject）两个对象;
  • 2、观察者对被观察者的监听（观察）是需要被观察者来实现的；（Subject.attach）
  • 3、当被观察者发生变化，被观察者会主动通知观察者；
  • 4、观察者只需要实现一个方法，当被观察者变化时执行。

总结：观察者直接订阅（观察）主题（被观察者），当主题被激活时候，会触发观察者里边的事件。

多个对象之间存在一对多的依赖关系，当一个对象状态发生变化时，所有依赖他的对象都得到通知并被自动更新。

# 发布订阅模式实现

例子 (opens new window)

  • 1、以调度中心为主;
  • 2、订阅者只需要通过调用中心的方法，订阅相关的事件，并执行订阅方法；
  • 3、发布者只需要通过调度中心的方法，发布相关的事件；

总结：订阅者把自己想订阅的事件注册到调度中心（Event），当发布者发布该事件的到调度中心，也就是该事件触发时，由调度中心统一调度订阅者注册到调度中心的处理代码。

← 状态模式 →