1.介绍

当对象间存在一对多关系时,则使用观察者模式(Observer Pattern)。比如,当一个对象被修改时,则会自动通知它的依赖对象。观察者模式属于行为型模式。


简而言之,就两个点:



  •  一对多


发布&订阅


看到发布订阅,学过vue 子组件传值给父组件,或者websocket的小伙伴大概想到了,他们也是发布订阅,猜想他们的关系 也是 观察者模式吧

举个例子 ,我们平时接触的dom事件. 也是js和dom之间实现的一种观察者模式.

js设计模式之 观察者模式与应用场景_观察者模式

只要订阅了div的click事件. 当点击div的时候, function click就会被触发.

欣赏下UML图




js设计模式之 观察者模式与应用场景_发布订阅_02


举个生活的例子:

我们去吃自助餐,但是 在等待的人太多了, 通常,我们会先 挂号, 再继续等待 叫到我们 (订阅过程),服务员则会通知等待的人 在现在轮到几号了(发布过程)。这就是观察者模式。这个例子当中,在外面等待的人属于观察者(订阅者),服务员属于发布者。


接下来,简单粗暴的代码演示上场。


2.代码演示


服务员充当发布者的角色

js设计模式之 观察者模式与应用场景_一对多_03

顾客充当订阅者的角色


js设计模式之 观察者模式与应用场景_一对多_03


接下来,看服务员喊话啦


js设计模式之 观察者模式与应用场景_一对多_05


运行结果:

js设计模式之 观察者模式与应用场景_一对多_06



3.应用场景。


3.1.网页事件绑定​,上文介绍中已经讲到,不再赘述


3.2.Promise​:


对于什么是promise在这片文章将不再赘述,没学过的伙伴可以看我的另一篇文章 ​​JS常见面试题之 详解Promise使用与原理​


js设计模式之 观察者模式与应用场景_一对多_07



js设计模式之 观察者模式与应用场景_观察者模式_08


哪里体现 观察者模式了呢? 即哪里出现订阅?哪里出现发布?

对promise较熟悉的伙伴可能发现了

js设计模式之 观察者模式与应用场景_观察者模式_09

这个函数 即是 订阅? 它订阅(监听)了promise中的 resolve ,反过来讲,resovle即发布者,每次执行resovle,将触发 该被画圈圈的函数。


同样 下面的它 则订阅了promise中的reject。

js设计模式之 观察者模式与应用场景_观察者模式_10


3.node.js 自定义事件

话不多说,上简单粗暴的代码便 一目了然,


js设计模式之 观察者模式与应用场景_观察者模式_11 

不得不说,这跟 vue 中子组件 传值 给 父组件, websocket 中的发布和订阅 ,是如此的如出一辙, on 代表了 订阅,监听 some 被触发, emit 发布 some。


4.其他应用场景

js设计模式之 观察者模式与应用场景_发布订阅_12



这就是

js设计模式之 观察者模式与应用场景_一对多_13