JavaScript中发布/订阅模式的简单实例

 更新时间:2014年11月05日 12:01:17   投稿:junjie  
这篇文章主要介绍了JavaScript中发布/订阅模式的简单实例,本文给出了一个简单易懂的实现代码,比较容易理解,需要的朋友可以参考下

上次研究观察者模式,很多文章说它也叫Subscribe/Publish(发布/订阅模式)。可在《Javascript设计模式》一书中,这两种模式还是有些区别的。书中原话如下:

1.Observer模式要求希望接收到主题通知者的观察者必须订阅内容改变的事件。

2.Subscribe/Publish模式使用了一个主题/事件通道,这个通道介于订阅者和发布者之间。该事件系统允许代码定义应用程序的特定事件,该事件可以传递自定义参数,自定义参数包含订阅者所需要的值。其目的是避免订阅者和发布者产生依赖关系。

与Observer模式不同之处在于它允许任何订阅者执行适当的事件处理程序来注册和接收发布者发出的通知。

好吧,不明觉厉。下面是我的理解:

1.观察者模式中,目标对象负责维护观察者。发布/订阅模式中发布者不关心订阅者,只负责把消息丢出去就不管了。

2.观察者模式中,观察者要提供一个接口,然后当目标对象发生改变时调用此接口使自身状态和目标状态保持一致。即所有的观察者都要有一个统一的接口(比如上文中写的update方法,大家的方法都要叫这个名字)。而发布/订阅模式中,订阅者事件的触发不是依靠这样一个接口,而是订阅者通过监听一个特定的消息(这个消息一般包含名称和订阅者所需要的参数)来触发的。可以理解为订阅者监听的不是发布者,而是消息池,只要消息池里有它关心的消息,即触发事件,不管这个消息是谁发布过去的。发布者和订阅者是解耦的。

下面是js中发布/订阅模式的实现,复制粘贴到console里面试一试就明白了:

复制代码 代码如下:

var pubsub = (function(){
    var q = {}
        topics = {},
        subUid = -1;
    //发布消息
    q.publish = function(topic, args) {
        if(!topics[topic]) {return;}
        var subs = topics[topic],
            len = subs.length;
        while(len--) {
            subs[len].func(topic, args);
        }
        return this;
    };
    //订阅事件
    q.subscribe = function(topic, func) {
        topics[topic] = topics[topic] ? topics[topic] : [];
        var token = (++subUid).toString();
        topics[topic].push({
            token : token,
            func : func
        });
        return token;
    };
    return q;
    //取消订阅就不写了,遍历topics,然后通过保存前面返回token,删除指定元素
})();
//触发的事件
var logmsg = function(topics, data) {
    console.log("logging:" + topics + ":" + data);
}
//监听指定的消息'msgName'
var sub = pubsub.subscribe('msgName', logmsg);
//发布消息'msgName'
pubsub.publish('msgName', 'hello world');
//发布无人监听的消息'msgName1'
pubsub.publish('anotherMsgName', 'me too!');

相关文章

  • 微信小程序实现的五星评价功能示例

    微信小程序实现的五星评价功能示例

    这篇文章主要介绍了微信小程序实现的五星评价功能,结合实例形式分析了微信小程序五星评价相关的界面布局、事件响应等操作技巧,需要的朋友可以参考下
    2019-04-04
  • 一些常用的Javascript函数

    一些常用的Javascript函数

    一些常用的Javascript函数...
    2006-12-12
  • JS常用字符串方法(推荐)

    JS常用字符串方法(推荐)

    下面小编就为大家带来一篇JS常用字符串方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js实现放大镜效果的思路与代码

    js实现放大镜效果的思路与代码

    这篇文章主要为大家详细介绍了js实现放大镜效果的思路与代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 老生常谈JavaScript面向对象基础与this指向问题

    老生常谈JavaScript面向对象基础与this指向问题

    下面小编就为大家带来一篇老生常谈JavaScript面向对象基础与this指向问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • js实现贪吃蛇游戏(简易版)

    js实现贪吃蛇游戏(简易版)

    这篇文章主要为大家详细介绍了js实现贪吃蛇游戏简易版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 老生常谈javascript中逻辑运算符&&和||的返回值问题

    老生常谈javascript中逻辑运算符&&和||的返回值问题

    下面小编就为大家带来一篇老生常谈javascript中逻辑运算符&&和||的返回值问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • JS实现斐波那契数列的五种方式(小结)

    JS实现斐波那契数列的五种方式(小结)

    这篇文章主要介绍了JS实现斐波那契数列的五种方式(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • 在子窗口中关闭父窗口的一句代码

    在子窗口中关闭父窗口的一句代码

    在子窗口中关闭父窗口在某些特殊的情况下还是有存在的必要的,其实很简单,只需一句代码便可实现,感兴趣的朋友可以了解下
    2013-10-10
  • JavaScript 数组去重详解

    JavaScript 数组去重详解

    下面小编就为大家带来一篇JavaScript数组去重的几方法推荐。小编觉得听错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看
    2021-09-09

最新评论