发布订阅者模式

灰太狼 2023-02-27 12:20 12阅读 0赞

### 使用售楼处与买楼的一个例子太好理解了： ###

> eg: 买房的人（订阅者）和售楼部（发布者）： 在房子开售的时候，售楼部发布可以买房的信息，买房的人收到可以买房的信息。

发布-订阅模式的实现思路：

> 1.首先确定好发布者  
> 2.然后给发布者一个缓存列表(订阅者集合)，用于存放回调函数以便通知订阅者。  
> 3.发布消息的时候，发布者遍历缓存列表，依次触发里面存放的订阅者回调函数。

代码：

let event = { 
        clientList: [],
        listen: function (key, fn) { 
            if (!this.clientList[key]) {  // 如果还没有订阅过此类消息，给该类消息创建一个缓存列表
                this.clientList[key] = [];
            }
            this.clientList[key].push(fn); // 订阅的消息添加进消息缓存列表
        },
        trigger: function () { 
            var key = Array.prototype.shift.call(arguments),//取出消息类型
                fns = this.clientList[key];// 取出该消息对应的回调函数集合
            if (!fns || fns.length === 0) return false
            for (var i = 0, fn; fn = fns[i++];) { 
                fn.apply(this, arguments); // (2) // arguments 是发布消息时附送的参数
            }
        },
        // 取消订阅事件
        remove: function (key, fn) { 
            var fns = this.clientList[key];
            if (!fns) return false // 如果key对应的消息队列没有被人订阅，则直接返回
            if (!fn) { //如果没有传入具体的回调函数，表示徐奥取消key对应消息的所有订阅
                fns && (fns.length = 0)
            } else { 
                for (let l = fns.length - 1; l > 0; l--) { 
                    let _fn = fns[l]
                    if (_fn === fn) { 
                        fns.splice(l, 1) // 删除订阅者的回调函数
                    }
                }
            }
        }
    }
    
    // 安装发布订阅模式
    var installEvent = function (obj) { 
        for (var i in event) { 
            obj[i] = event[i]
        }
    }
    
    var salesOffices = { };
    installEvent(salesOffices);
    salesOffices.listen('square-88', fn1 = function (price) {  // 小明订阅消息88平的房子
        console.log('价格= ' + price);
    });
    salesOffices.listen('square-100', fn2 = function (price) {  // 小红订阅消息100平的房子
        console.log('价格= ' + price);
    });
    salesOffices.trigger('square-88', 2000000); // 输出：2000000
    salesOffices.trigger('square-100', 3000000); // 输出：3000000
    salesOffices.remove('square-88', fn1); // 小明买到房了取消订阅

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关观察者模式 vs 发布订阅模式

目录场景观察者模式发布订阅模式总结 -------------------- 场景有一回面试，面试官问：

末蓝、/ 2023年10月06日 19:03/ 0 赞/ 87 阅读

相关发布订阅者模式

使用售楼处与买楼的一个例子太好理解了： > eg: 买房的人（订阅者）和售楼部（发布者）：在房子开售的时候，售楼部发布可以买房的信息，买房的人收到可以买房的信息。发

灰太狼/ 2023年02月27日 12:20/ 0 赞/ 13 阅读

相关 js 发布-订阅者模式

/ 发布-订阅模式 bw 2020/07/29 / const Event = { regsiter:{},

た入场券/ 2022年10月31日 10:57/ 0 赞/ 234 阅读

相关订阅发布和观察者模式

发布订阅模式 > 把多个方法暂存起来，最后一次触发执行作用: 解偶使用场景: 如，多个类或者函数内，可以分散订阅某个操作，最后统一发布。分散的好处就是不

╰+攻爆jí腚メ/ 2022年08月28日 14:47/ 0 赞/ 284 阅读

相关观察者模式（发布-订阅者模式）

观察者模式定义了一种依赖关系，解决了主体对象和观察者之间功能的耦合，主要应用于大型项目的模块化开发中，解决团队开发中模块之间的通信问题，利用观察者模式还可以实现自定义事件。

素颜马尾好姑娘i/ 2022年05月22日 06:00/ 0 赞/ 280 阅读

相关 javascript 观察者模式发布订阅模式

观察者模式观察者模式，每一个观察者对象有两个方法添加监听`subscribe` 发布事件`publish` 观察者有个`list`存放所有的已经添加监

本是古典何须时尚/ 2022年04月24日 10:14/ 0 赞/ 274 阅读

相关 JavaScript发布订阅者模式

假如你要建立一个网站，通常来说会有许多用户。你作为一名管理者，有时候需要将重要的消息发布给你的用户。在软件开发领域，开发此功能往往用到发布订阅者模式。下面我以简单的javasc

朴灿烈づ我的快乐病毒、/ 2022年01月20日 02:09/ 0 赞/ 331 阅读

相关发布订阅模式（观察者模式）

设计模式的目的就是使类成为可复用的组件。在观察者模式中观察者接口只注重被观察者，而被观察者接口只注重观察者，具体是观察者接口实现类中的哪一个并不在意，而被观察者也是如此。这

清疚/ 2021年12月15日 00:27/ 0 赞/ 364 阅读

相关 JavaScript设计模式（5）——发布者-订阅模式

发布者订阅模式是什么？发布者订阅模式又称观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。简(shuo

我就是我/ 2021年09月02日 10:41/ 0 赞/ 412 阅读