1.介绍
当对象间存在一对多关系时,则使用观察者模式(Observer Pattern)。比如,当一个对象被修改时,则会自动通知它的依赖对象。观察者模式属于行为型模式。
简而言之,就两个点:
一对多
发布&订阅
看到发布订阅,学过vue 子组件传值给父组件,或者websocket的小伙伴大概想到了,他们也是发布订阅,猜想他们的关系 也是 观察者模式吧
举个例子 ,我们平时接触的dom事件. 也是js和dom之间实现的一种观察者模式.
只要订阅了div的click事件. 当点击div的时候, function click就会被触发.
欣赏下UML图
举个生活的例子:
我们去吃自助餐,但是 在等待的人太多了, 通常,我们会先 挂号, 再继续等待 叫到我们 (订阅过程),服务员则会通知等待的人 在现在轮到几号了(发布过程)。这就是观察者模式。这个例子当中,在外面等待的人属于观察者(订阅者),服务员属于发布者。
接下来,简单粗暴的代码演示上场。
2.代码演示
服务员充当发布者的角色
顾客充当订阅者的角色
接下来,看服务员喊话啦
运行结果:
3.应用场景。
3.1.网页事件绑定,上文介绍中已经讲到,不再赘述
3.2.Promise:
对于什么是promise在这片文章将不再赘述,没学过的伙伴可以看我的另一篇文章 JS常见面试题之 详解Promise使用与原理
哪里体现 观察者模式了呢? 即哪里出现订阅?哪里出现发布?
对promise较熟悉的伙伴可能发现了
这个函数 即是 订阅? 它订阅(监听)了promise中的 resolve ,反过来讲,resovle即发布者,每次执行resovle,将触发 该被画圈圈的函数。
同样 下面的它 则订阅了promise中的reject。
3.node.js 自定义事件
话不多说,上简单粗暴的代码便 一目了然,
不得不说,这跟 vue 中子组件 传值 给 父组件, websocket 中的发布和订阅 ,是如此的如出一辙, on 代表了 订阅,监听 some 被触发, emit 发布 some。
4.其他应用场景
这就是