JavaScript中发布/订阅模式的简单实例_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!');

时间: 2024-09-16 17:55:39

JavaScript中发布/订阅模式的简单实例_javascript技巧的相关文章

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

 1.Observer模式要求希望接收到主题通知者的观察者必须订阅内容改变的事件. 2.Subscribe/Publish模式使用了一个主题/事件通道,这个通道介于订阅者和发布者之间.该事件系统允许代码定义应用程序的特定事件,该事件可以传递自定义参数,自定义参数包含订阅者所需要的值.其目的是避免订阅者和发布者产生依赖关系. 与Observer模式不同之处在于它允许任何订阅者执行适当的事件处理程序来注册和接收发布者发出的通知. 好吧,不明觉厉.下面是我的理解: 1.观察者模式中,目标对象负责维护观

JavaScript实现九九乘法表的简单实例_javascript技巧

每个学过编程的人都写过"HelloWorld" 但99乘法表,我想也应该成为每个编程初学者的必编程序 这是JavaScript的实现方法,非常适合初学者!!! 以下是代码及注释 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript九

js 声明数组和向数组中添加对象变量的简单实例_javascript技巧

数组有四种定义的方式 使用构造函数: var a = new Array(); var b = new Array(10); var c = new Array("first", "second", "third"); 或者数组直接量: var d = ["first", "second", "third"]; 扩展: function ObjStory(id,biaoti,author

js中遍历Map对象的简单实例_javascript技巧

实例如下: console.log(jsonData);//火狐控制台打印输出: Object { fileNumber="文件编号", fileName="文件名称"} for(var key in jsonData) console.log("属性:" + key + ",值:"+ jsonData[key]); } 打印输出: 属性:fileNumber, 值:文件编号 属性:fileName, 值:文件名称 以上这篇j

Javascript实现跑马灯效果的简单实例_javascript技巧

页面html: <div> <div id="imgShows" runat="server" style="padding-bottom: 10px;"> <div id="demo" style="overflow: hidden; width: 100%; height: 190px"> <table cellspacing="0" cel

Javascript农历与公历相互转换的简单实例_javascript技巧

如下所示: /**用法 * Lunar.toSolar(2016, 6, 3); 农历转化公历 * Lunar.toLunar(2016, 7, 6); 公历转化农历 */ var Lunar = { MIN_YEAR : 1891, MAX_YEAR : 2100, lunarInfo : [ [0,2,9, 21936], [6,1,30, 9656], [0,2,17, 9584], [0,2,6, 21168], [5,1,26,43344], [0,2,13,59728], [0,2,

javascript中数组的定义及使用实例_javascript技巧

本文实例讲述了javascript中数组的定义及使用方法.分享给大家供大家参考.具体分析如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xht

JavaScript中字符串分割函数split用法实例_javascript技巧

本文实例讲述了JavaScript中字符串分割函数split用法.分享给大家供大家参考.具体如下: 先来看下面这段代码: <script type="text/javascript"> var str="How are you doing today?" document.write(str.split(" ") + "<br />") document.write(str.split("&q

JavaScript中isPrototypeOf函数作用和使用实例_javascript技巧

JavaScript中isPrototypeOf函数方法是返回一个布尔值,指出对象是否存在于另一个对象的原型链中.使用方法: 复制代码 代码如下: object1.isPrototypeOf(object2) 其中object1为必选项,一个对象的实例. object2为必选项,另一个对象,将要检查其原型链. 如果 object2 的 原型链中包含object1,那么JavaScript中isPrototypeOf函数方法返回 true. 原型链可以用来在同一个对象类型的不同实例之间共享功能.