JS每日一题:设计模式-如何理解观察者(发布订阅)模式?

本是古典何须时尚 2023-02-13 08:16 14阅读 0赞

#### 20190411期 ####

设计模式-如何理解观察者(发布订阅)模式?

> 定义: 观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己

生活实例理解：你今天去看一个楼盘，去了之后发布楼盘还没有对外销售，你不知道楼盘时候会对外销售，于是你找了楼盘的负责人，告诉他什么时候楼盘开始销售了电话通知你，然后想要买的人不是你一个，其它人也是通过留电话的方式给销售负责人来及时获取消息

不难发现,上面的例子正好对应上我们的观察者模式的定义, 多个想要买房的人同时订阅了一个主题(楼盘对外销售)，这个主题更新时，这些观察者(买房)都会作出相应的动作

最熟悉的代码理解:

实际上，我们经常用到的事件绑定就是发布订阅模式

在这里我们想在用户点击的时候做出相应的处理，但是我们不知道用户在什么时候去点击，所以我们去订阅body上的click事件，在这里我们还可以去随意增加订阅者，这样并不影响我们的发布者

document.body.addEventListener('click',function(){
      console.log('JS 每日一题')
    },false)
    document.body.addEventListener('click',function(){
      console.log('今天你打卡了吗?')
    },false)

##### 实现一个简版的观察者 #####

首先我们顺一下思路

*  谁是发布者
 *  谁是订阅者
 *  发生改变时怎么通知订阅者作出相应动作

我们已经实现在最简易版的发布订阅，但其实是存在问题的，每个人可能订阅户型是不同的, 上面我们实现的是，只要一开始销售就通知所有订阅的人，显然是不合理的，我们将代码再来改写一下

// 订阅时给其加一个key做为标识，就相当于key就是订阅者的身份
    Boss.listen = function(key, fn){
        if (!this.clientList[key]) {
          // 如果没有此类订阅，就给该类订阅增加一个缓存列表
          this.clientList[key] = []
        }
        this.clientList[key].push(fn); 
    }
    Boss.trigger = function(){ // 发布消息
        const key = Array.prototype.shift.call(arguments),
        // 取出消息类型
        fns = this.clientList[key] 
        if (!fns || !fns.length) return // 如果该类消息没有订阅直接返回
        for (var i = 0, fn; fn = fns[i++]) {
            fn.apply(this, arguments)
        }
    }
    Boss.listen('老王', function (msg) {
      console.log('老王订阅户型' + cdName)
    }) 
    Boss.listen('老李', function (cdName) {
      console.log('老李订阅户型' + cdName)
    }) 
    Boss.trigger('老王', '143平米');
    Boss.trigger('老李', '888平米');

好了，经过改写，消息只会推送给相关的订阅者了

#### 总结 ####

*  时间上的解藕
 *  对象之间的解藕

总的来说，观察者模式所做的工作就是在解耦，让耦合的双方都依赖于抽象，而不是依赖于具体。从而使得各自的变化都不会影响到另一边的变化

**最近答题**

[JS每日一题:设计模式-如何理解工厂模式?][JS_-]

[JS每日一题:设计模式-如何理解命令模式?][JS_- 1]

基友噢如果喜欢，可以分享给好基友噢如果喜欢，可以分享给好基友噢

**关注「JS每日一题」，参与答题！**

![format_png][]

▲长按图片识别二维码

[JS_-]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c398cb674a8e7907320284f63b1514c28bb0c22de41359bed4aaade01d5080e4a1b8ff1f&idx=1&mid=2247483854&scene=21&sn=f810de019cfbc269f7e08ad9ccf2454e#wechat_redirect
[JS_- 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c387cb674a912ab4d19a038533db912c4b9d041631a3f27c989ae1cd2cd3ef5f1634aa57&idx=1&mid=2247483857&scene=21&sn=260b775e88dd97a3508fa7ae232834f7#wechat_redirect
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9nSDMxdUY5VklpYlRQUFY1ZlVpYzhKb2ljVGxISDByTDdpY1p5alJaMThDSmpsN2hUaDFvcWpRRnNBbDI3YWljV1NmRDJ6WnVLT1d1b01pY0VpY3oxV3dBSjlhY2cvNjQw?x-oss-process=image/format,png