javascript发布订阅pubsub模式

首先使用数组缓存订阅者订阅的消息,当订阅者订阅消息的时候,把订阅的消息push到指定消息的队列中,当发布者发布消息的时候,我们遍历执行push到指定消息队列中的回调事件。

var Pubsub=(function(){
    var eventObj={};
    return {
        subscribe:function(event,fn){
            eventObj[event]=fn
        },
        publish:function(event){
            if(eventObj[event]) eventObj[event]();
        },
        off:function(event,fn){
            if(eventObj[event]) eventObj[event]=null;
        }
    }
})()
Pubsub.subscribe(‘event‘,function(){
    console.log("正在执行,但是一个事件只能绑定一个操作");
})
Pubsub.publish("event");
//支持一个事件绑定多个操作
var Pubsub1=(function(){
    var quence={};//{‘type1‘:[],‘type2‘:[]}
    return {
        subscribe:function(event,fn){
            if(!quence[event]) quence[event]=[];
            quence[event].push(fn);
        },
        publish:function(event){
            var eventQuence=quence[event],
                len=eventQuence.length;
            if(len>0){
                eventQuence.forEach((item,index)=>{
                    item()
                })
            }
        },
        off:function(event,fn){
            var eventQuence = quence[event];
            if (eventQuence) {
                quence[event] = eventQuence.filter(function(item) {
                    return item !== fn;
                });
            }
        }
    }
})()
function first(){
    console.log("emit first")
}
function second(){
    console.log("emit second")
}
Pubsub1.subscribe(‘a‘,first)
Pubsub1.subscribe(‘a‘,second)
Pubsub1.off(‘a‘,first)//退订一个first事件
Pubsub1.publish("a");
时间: 2024-10-11 11:47:45

javascript发布订阅pubsub模式的相关文章

设计模式 - 发布-订阅者模式

1.发布-订阅者 设计模式 定义 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知 观察者模式和发布订阅模式区别 观察者模式是由具体目标(发布者/被观察者)调度的,而发布/订阅模式是由独立的调度中心进行调度,所以观察者模式的订阅者与发布者之间是存在依赖的,而发布/订阅模式则不会:可以说发布订阅模式是观察者模式进一步解耦,在实际中被大量运用的一种模式 ** 观察者模式 ** 1.定义/解析 目标和观察者是基类,目标提供维护观察者的一系列方法,观察者提供更

JavaScript发布/订阅实例

原文链接: Pub/Sub JavaScript Object原文日期: 2014年6月11日翻译日期: 2014年6月13日 翻译人员: 铁锚 高效AJAX网站的三大杀器: 事件代理, 浏览历史管理, 以及高效应用级 发布/订阅通信机制. 本博客的原文站点 同时使用了这三种技术,本文中作者将分享其中最简单的一个: 该网站使用的 一个微型 发布/订阅模块. 如果你不了解 发布/订阅 模式,那么可以将其类比为 你发表了一篇博文,所有人都可以订阅你的博客, 也类似于广播电台的工作方式: 有一个站台进

ActiveMQ发布-订阅消息模式

一.订阅杂志我们很多人都订过杂志,其过程很简单.只要告诉邮局我们所要订的杂志名.投递的地址,付了钱就OK.出版社定期会将出版的杂志交给邮局,邮局会根据订阅的列表,将杂志送达消费者手中.这样我们就可以看到每一期精彩的杂志了. 仔细思考一下订杂志的过程,我们会发现这样几个特点:1.消费者订杂志不需要直接找出版社:2.出版社只需要把杂志交给邮局:3.邮局将杂志送达消费者.邮局在整个过程中扮演了非常重要的中转作用,在出版社和消费者相互不需要知道对方的情况下,邮局完成了杂志的投递. 二. 发布-订阅消息模

Vue发布-订阅者模式

1.vue响应原理: vue.js采用数据劫持结合发布-订阅者模式,通过Object.defineProperty()来劫持data中各个属性的setter.getter,在数据变动时,发布消息给订阅者,触发响应的监听回调. (setter和getter是对象的存储器属性,是一个函数,用来获取和设置值) 2.发布-订阅者模式的作用: 处理一对多的场景,应用于不同情况下的不同函数调用 优点:低耦合性,易于代码维护: 缺点:若订阅的消息未发生,需消耗一定的时间和内存. <!DOCTYPE html>

学习javascript设计模式之发布-订阅(观察者)模式

1.发布-订阅模式又叫观察者模式,它定义对象之间一种一对多的依赖关系. 2.如何实现发布-订阅模式 2-1.首先指定好发布者 2-2.给发布者添加一个缓冲列表,用户存放回调函数以便通知订阅者 2-3.最后发布消息时候,发布者会遍历这个缓存列表,依次触发里面存放的订阅者回调函数 例子: var salesOffice = {};salesOffice.clientList = [];salesOffice.listen = function(key,fn){    if(!this.clientL

JS 设计模式八 -- 发布订阅者模式

概念 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多(一个发布,多个观察)的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 优点 1.支持简单的广播通信,当对象状态发生改变时,会自动通知已经订阅过的对象. 2.发布者与订阅者耦合性降低 缺点 创建订阅者需要消耗一定的时间和内存. 如果过度使用的话,反而使代码不好理解及代码不好维护. 代码实现 var Event = (function(){ var list = {}, // 缓

ActiveMQ的(点对点&amp;发布/订阅通信模式)和(持久化方式)

ActiveMQ的持久化 消息持久性对于可靠消息传递来说应该是一种比较好的方法,有了消息持久化,即使发送者和接受者不是同时在线或者消息中心在发送者发送消息后宕机了,在消息中心重新启动后仍然可以将消息发送出去,如果把这种持久化和ReliableMessaging结合起来应该是很好的保证了消息的可靠传送. 消息持久性的原理很简单,就是在发送者将消息发送出去后,消息中心首先将消息存储到本地数据文件.内存数据库或者远程数据库等,然后试图将消息发送给接收者,发送成功则将消息从存储中删除,失败则继续尝试.消

CRM中间件里的发布-订阅者模式

从事务码SMW01里能观察到一个BDOC可能被发送往不止一个目的site去,比如下图所示的5个site都会收到该site,而高亮显示的SMOF_ERPSITE代表ERP系统QI3的client 504会接收到这个BDOC. 所以上图列表里的site是从哪里读取出来的? 以BDOCPRODUCT_MAT为例,在视图SMW3FDBDOC里维护回调函数: 第一个回调SMOH_REPLICATION_WRAPPER_MSG负责决定需要从CRM将该BDOC发送到哪些site去. 这个回调是自动生成的: 在

经典的发布订阅者模式

function Pubsub() { this.handlers = {};}Pubsub.prototype = { on: function (eventType, handler) { var self = this; if (!(eventType in self.handlers)) { self.handlers[eventType] = []; } self.handlers[eventType].push(handler) }, emit: function (eventTyp