今天一起来了解一下js的发布-订阅者模式是怎么封装的

发布-订阅者模式详解(大神出门又拐, 慢走不送, 本篇摘自javaScript设计模式与开发实践 - 曾探 纯手抄很累的 _

什么是发布订阅模式呢, 简单说啊, 比如小明最近看上一套房子, 到了售楼处才被告知该楼盘已售罄, 然后性感的售楼MM告诉小明之后还会有一个新的楼盘开盘, 至于什么时候开售并不确定, 于是乎小明万分期待的记下了售楼MM的电话, 并且每天会打电话去询问, 同样的还有小a, 小b, 小c, 小d, 售楼MM要崩溃了, 她一天接到n个询问的电话
当然现实中没有这么傻的售楼MM, 正常应该是这样操作的: 小明离开后, 留下了自己的电话号,同样小a, 小b, 小c, 小d也是如此, 售楼妹子答应他们, 只要楼盘一开售, 就会立马给他们打电话依次通知

上边这个例子就是一个典型的发布-订阅模式 小名,小a等购买者都是订阅者, 他们订购了房子开售的消息。 而售楼处是发布者,在合适的事件他们会遍历花名册上的电话好嘛, 依次给购买者发布购房消息。

首先我们先写一个最简单的例子 - 自定义实现

   var salesBuilding = {};     // 定义售楼处

    salesBuilding.clientList = []; // 订阅者列表

    salesBuilding.listen = function(fn) { // 增加订阅者
        this.clientList.push(fn);
    };

    salesBuilding.target = function() { // 发布消息
        for(var i = 0, fn; fn = this.clientList[i++];) {
            fn.apply(this, arguments);
        }
    }
    // 简单测试一下
    salesBuilding.listen(function(price, squareMeter) { // 小明订阅
        console.log('价格=' + price);
        console.log('平方米=' + squareMeter);
    });

    salesBuilding.listen(function(price, squareMeter) { // 小红订阅
        console.log('价格=' + price);
        console.log('平方米=' + squareMeter);
    });
    // salesBuilding.target(1000000, 80); // 输出: 100W, 80平米
    // salesBuilding.target(1300000, 100); // 输出: 130W, 100平米

ok, 一个简单的订阅-发布者已经完成,但是这里有一个小小的问题, 比如说小明只想订阅80平米的房子, 但是发布者却把100平米的房子的消息也推送给了小明, 这对小明来说是不必要的困扰, 所以我们有必要增加一个表示key, 先不要猴急的往下看, 自己该如何实现呢~~
小伙伴们不要掉队, 跟着我的思路 走~ 走 走 走你~

代码如下

    var salesBuilding = {};     // 定义售楼处

    salesBuilding.clientList = {}; // 订阅者列表

    salesBuilding.listen = function(key, fn) { // 增加订阅者
        if (!this.clientList[key]) { //如果没有订阅过此类消息, 就给此类消息创建一个缓存列表
            this.clientList[key] = [];
        }
        this.clientList[key].push(fn);
    };

    salesBuilding.target = function() {
        var key = Array.prototype.shift.call(arguments); // 取出key
        var fns = this.clientList[key]; // 取出该key对应的回调函数集合
        
        if (!fns || fns.length === 0) { // 如果没有订阅 返回false
            return false;
        }

        for (var i = 0, fn; fn = fns[i++];) { // 有订阅就遍历执行回调函数
            fn.apply(this, arguments); 
        }
    }

    salesBuilding.listen('squareMeter80', function(price) { // 小红订阅
        console.log('价格=' + price);
    })

    salesBuilding.listen('squareMeter100', function(price) { // 小明订阅
        console.log('价格=' + price);
    })

    salesBuilding.target('squareMeter80', '100W'); // 输出 100W
    salesBuilding.target('squareMeter100', '130W'); // 输出 130W

大功告成 现在订阅者可以只订阅自己感兴趣的事件了

取消订阅事件

你以为这就完了吗? 怎么可能, 哼哼哼
有时候我们我们也需要取消订阅事件的功能, 比如小明突然不想买房子了, 为了避免继续接受售楼妹子的骚扰, 小明需要取消之前的订阅的事件
ok, 思考, 思考一下~

代码贴上

    salesBuilding.remove = function(key, fn) { // 删除功能
        var fns = this.clientList[key];
        if (!fns) { // 如果key对应的消息没有被订阅, 则直接false
            return false;
        }
        if (!fn) {
            fns && (fns.length = 0); // 如果没有传入具体要删除的回调函数, 则直接清空key对应的所有订阅
        }
        for(var i = fns.length - 1; i >= 0; i--) { // 这里需要反向遍历, 不懂自己百度
            var _fn = fns[i]
            if (_fn === fn) {
                fns.splice(i, 1); // 删除订阅者的回调函数
            }
        }
    }
    // 测试一下下

    salesBuilding.remove('squareMeter80'); // 删除88平米的订阅
    salesBuilding.target('squareMeter80', '100W'); // 不会输出
    salesBuilding.target('squareMeter100', '130W'); // 输出 130W

全局的发布订阅对象

回想一下刚才实现的发布-订阅模式, 我们给售楼处添加了发布-订阅模式的功能, 可这里还存在两个小问题

1 我们给每个对象都添加listen和target方法, 以及一个缓存列表, 其实是浪费资源的。
2 小明跟售楼处对象还是存在一定耦合性的, 小明至少要知道售楼处对象的名字是salesBuilding, 才能顺利订阅

代码如下

    salesBuilding.listen('squareMeter80', f = function(price) { // 小明订阅
         console.log('价格=' + price);
    })

如果小明还关心300平米的房子, 而这套房子的卖家是salesBuilding2222的房子, 这意味着小明还需要订购salesBuilding2222

代码如下

    salesBuilding2222.listen('squareMeter80', f = function(price) { // 小明订阅
        console.log('价格=' + price);
    })

其实在现实中, 买房子未必要亲自去售楼处, 只要把我们订阅的请求交给中介公司, 而各大房产中心也只需要通过中介公司来发布房子信息, 这样以来, 我们就不需要关注消息是来自哪个房产公司的。
同样在程序中, 发布-订阅模式可以用一个全局event对象来实现, 订阅者不需要了解消息来自哪个发布者, 发布者也不知道消息会推送到哪个订阅者, event作为一个类似中介的角色,把订阅者和发布者联系了起来。 (其实就是把之前的代码稍微组装一下)

    var event = (function() {
        var clientList = {};
        var listen = [];
        var target = [];
        var remove = [];


        listen = function(key, fn) { // 增加订阅者
            if (!clientList[key]) { //如果没有订阅过此类消息, 就给此类消息创建一个缓存列表
                clientList[key] = [];
            }
            clientList[key].push(fn);
        };


        remove = function(key, fn) { // 删除功能
            var fns = clientList[key];
            if (!fns) { // 如果key对应的消息没有被订阅, 则直接false
                return false;
            }
            if (!fn) {
                fns && (fns.length = 0); // 如果没有传入具体要删除的回调函数, 则直接清空key对应的所有订阅
            }
            for(var i = fns.length - 1; i >= 0; i--) { // 这里需要反向遍历, 不懂自己百度
                var _fn = fns[i]
                if (_fn === fn) {
                    fns.splice(i, 1); // 删除订阅者的回调函数
                }
            }
        };


        target = function() {
            var key = Array.prototype.shift.call(arguments); // 取出key
            var fns = clientList[key]; // 取出该key对应的回调函数集合
            
            if (!fns || fns.length === 0) { // 如果没有订阅 返回false
                return false;
            }

            for (var i = 0, fn; fn = fns[i++];) { // 有订阅就遍历执行回调函数
                fn.apply(this, arguments); 
            }
        }

        return {
            target,
            remove,
            listen
        };
    })();

    event.remove('squareMeter80'); // 删除88平米的订阅
    event.target('squareMeter80', '100W'); // 不会输出
    event.target('squareMeter100', '130W'); // 输出 130W
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345