精华内容
下载资源
问答
  • js实现发布订阅模式

    2020-09-06 20:50:08
    定义 发布订阅是一种消息范式,消息的发送者(发布者)不会将消息直接发送给特定的接收者(订阅者),而是将发布的消息发给消息代理,由消息代理对消息进行过滤,消息代理通常执行存储转发的功能将消息从发布者发送...

    定义

    发布订阅是一种消息范式,消息的发送者(发布者)不会将消息直接发送给特定的接收者(订阅者),而是将发布的消息发给消息代理,由消息代理对消息进行过滤,消息代理通常执行存储转发的功能将消息从发布者发送到订阅者

    特点

    松耦合:订阅者可以订阅多个类型的消息,发布者不需要关心有多少订阅者

    示例

    实现一个类似微信公众号的发布文章(发布)、取消关注(取消订阅)、关注公众号(订阅)的功能。
    要实现的功能。

    • 用户a关注了公众号“人民日报”
    • 用户b关注了公众号“湖北日报”
    • 用户c关注了公众号“人民日报”
    • “人民日报公众号”发布“最高礼遇!以国之名,致敬!”
    • "湖北日报"公众号发布“教育部明确!2021年起免试认定!”
    • 用户a取消订阅“人民日报“公众号
    • 人民日报发布文章“严防不懈!新增确诊2例,均为境外输入”
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Document</title>
    </head>
    <body>
    	<script>
    class Sub{
    			constructor(){
    				// 收集订阅信息,调度中心
    				this.list = {}
    			}
    
    			// 订阅
    			on(name,userId,fn){
    				if(!(this.list[name] instanceof Array)){
    					this.list[name] = []
    				}
    				this.list[name].push({userId,fn})
    			}
    
    			// 发布
    			emit(name,content){
    				this.list[name].forEach(item=>{
    					item.fn(content)
    				})
    			}
    
    			// 取消订阅
    			off(name,userId){
    				this.list[name].forEach((item,index)=>{
    					if(item.userId === userId){
    						this.list[name].splice(index,1)
    					}
    				})
    			}
    		}
    
    		let sub = new Sub();
    		//A关注人民日报公众号
    		sub.on('人民日报','A',function(content){
    			console.log('A接收到人民日报推送的消息',content)
    		})
    		//B关注湖北日报公众号
    		sub.on('湖北日报','B',function(content){
    			console.log('B接收到湖北日报推送的消息',content)
    		})
    		//C关注人民日报公众号
    		sub.on('人民日报','C',function(content){
    			console.log('C接收到人民日报推送的消息',content)
    		})
    		//
    		sub.emit('人民日报','最高礼遇!以国之名,致敬!')
    		sub.emit('湖北日报','教育部明确!2021年起免试认定!')
    		sub.off('人民日报','A')
    		sub.emit('人民日报',"严防不懈!新增确诊2例,均为境外输入")
    	</script>
    </body>
    </html>
    
    

    在这里插入图片描述

    展开全文
  • js 实现发布订阅模式

    2018-10-20 21:59:00
    /* Pubsub */ function Pubsub(){ //存放事件和对应的处理方法 this.handles = {}; } Pubsub.prototype = { //传入事件类型type和事件处理handle on: function (t...
         /* Pubsub */
          function Pubsub(){
            //存放事件和对应的处理方法
            this.handles = {};
          }
          
          Pubsub.prototype = {
            //传入事件类型type和事件处理handle
            on: function (type, handle) {
              if(!this.handles[type]){
                this.handles[type] = [];
              }
              this.handles[type].push(handle);
            },
            emit: function () {
              //通过传入参数获取事件类型
              //将arguments转为真数组
              var type = Array.prototype.shift.call(arguments);
              if(!this.handles[type]){
                return false;
              }
              for (var i = 0; i < this.handles[type].length; i++) {
                var handle = this.handles[type][i];
                //执行事件
                handle.apply(this, arguments);
              }
            },
            off: function (type, handle) {
              handles = this.handles[type];
              if(handles){
                if(!handle){
                  handles.length = 0;//清空数组
                }else{
                for (var i = 0; i < handles.length; i++) {
                  var _handle = handles[i];
                  if(_handle === handle){
                    //从数组中删除
                    handles.splice(i,1);
                  }
                }
              }
            }  
          }
    
    
          let p1 = new Pubsub();
          p1.on('detail', (name)=> {console.log(name)});
          p1.emit('detail', 'observer')
          let p2 = new Pubsub();
          p2.on('detail', (name)=> {console.log(name)});
          p2.emit('detail', 'observer2')
          p2.off('detail');
          p2.emit('detail', 'observer3');

     

     

    转自 https://segmentfault.com/a/1190000012430769

    转载于:https://www.cnblogs.com/bear-blogs/p/9823184.html

    展开全文
  • 1、设计模式 设计模式有23种,分为三大类: 创建型模式,共5种:工厂方法模式、抽象工厂模式、单例模式、建造者...2、JS实现发布订阅模式 2.1 观察者模式 观察者模式定义了对象间的一种一对多的依赖关系,当一个...

    1、设计模式

    设计模式有23种,分为三大类: 

    1. 创建型模式,共5种:工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。 
    2. 结构型模式,共7种:适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。 
    3. 行为型模式,共11种:策略模式、模板方法模式、观察者模式(又叫订阅者模式)、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。

    2、 JS实现发布订阅模式

    2.1 观察者模式

    观察者模式定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知,并自动更新。观察者模式就是观察者和被观察者之间的通讯。

    观察者模式有一个别名叫“发布-订阅模式”,或者说是“订阅-发布模式”,订阅者和订阅目标是联系在一起的,当订阅目标发生改变时,逐个通知订阅者。

    2.2 发布订阅模式

    经过时间的沉淀,已经独立于观察者模式,成为另外一种不同的设计模式。

    在现在的发布订阅模式中,发布者不会将消息直接发送给订阅者,这意味着发布者和订阅者不知道彼此的存在。在发布者和订阅者之间存在第三个组件,称为消息代理或调度中心或中间件,它维持着发布者和订阅者之间的联系,过滤所有发布者传入的消息并相应地分发它们给订阅者

    例如:你在微博上关注了A,同时其他很多人也关注了A,那么当A发布动态的时候,微博就会为你们推送这条动态。A就是发布者,你是订阅者,微博就是调度中心,你和A是没有直接的消息往来的,全是通过微博来协调的(你的关注,A的发布动态)。
     

    由一个调度中心来做中间人,发布者更新主题,由调度中心来通知订阅者更新。

     

    å¨è¿éæå¥å¾çæè¿°

    2.3 JS实现发布订阅者模式

    • 有一家猎人工会,其中每个猎人都具有发布任务(publish),订阅任务(subscribe)的功能;
    • 猎人们发布(发布者)或订阅(观察者/订阅者)任务都是通过猎人工会(调度中心)关联起来的,他们没有直接的交流;
    • 猎人们(观察者)关联他们感兴趣的猎人(目标对象),如Peter,当Peter有困难时,会自动通知给他们(观察者);
    //定义一家猎人工会
    	//主要功能包括任务发布大厅(topics),以及订阅任务(subscribe),发布任务(publish)
    	let HunterUnion = {
    		type: 'hunt',
    		topics: Object.create(null),
    		subscribe: function (topic, fn){
    		    if(!this.topics[topic]){
    		      	this.topics[topic] = [];  
    		    }
    		    this.topics[topic].push(fn); //topics[topic]存储订阅者对订阅信息topic的回复
    		},
    		publish: function (topic, money){/*(4)遍历订阅tiger的订阅信息topics["tiger"]*/
    		    if(!this.topics[topic])
    		      	return;
    		    for(let fn of this.topics[topic]){
    		    	fn(money)
    		    }
    		}
    	}
    	
    	//定义一个猎人类
    	//包括姓名,级别
    	function Hunter(name, level){
    		this.name = name
    		this.level = level
    	}
    	//猎人可在猎人工会发布订阅任务
    	Hunter.prototype.subscribe = function (topic, fn){
    		console.log(this.level + '猎人' + this.name + '订阅了狩猎' + topic + '的任务')
    	    HunterUnion.subscribe(topic, fn)
    	}
    	Hunter.prototype.publish = function (topic, money){ /*(2)青铜猎人Peter发布了狩猎tiger的任务*/
    		console.log(this.level + '猎人' + this.name + '发布了狩猎' + topic + '的任务')
    	    HunterUnion.publish(topic, money) /*(3)通过中间件猎人工会HunterUnion,发布该消息给狩猎tiger的订阅者*/
    	}
    	
    	//猎人工会走来了几个猎人
    	let hunterMing = new Hunter('小明', '黄金')
    	let hunterJin = new Hunter('小金', '白银')
    	let hunterZhang = new Hunter('小张', '黄金')
    	let hunterPeter = new Hunter('Peter', '青铜')
    	
    	//小明,小金,小张分别订阅了狩猎tiger的任务
    	hunterMing.subscribe('tiger', function(money){
    		console.log('小明表示:' + (money > 200 ? '' : '不') + '接取任务')
    	})
    	hunterJin.subscribe('tiger', function(money){
    		console.log('小金表示:接取任务')
    	})
    	hunterZhang.subscribe('tiger', function(money){
    		console.log('小张表示:接取任务')
    	})
    	//Peter订阅了狩猎sheep的任务
    	hunterPeter.subscribe('sheep', function(money){
    		console.log('Peter表示:接取任务')
    	})
    	
    	//Peter发布了狩猎tiger的任务
    	hunterPeter.publish('tiger', 198) /*(1)猎人Peter发布了198元狩猎tiger的任务*/
    	
    	//猎人们发布(发布者)或订阅(观察者/订阅者)任务都是通过猎人工会(调度中心)关联起来的,他们没有直接的交流。


    参考:https://blog.csdn.net/hf872914334/article/details/88899326

     

    展开全文
  • 发布订阅模式概念 发布订阅模式:订阅者(Subscriber)把自己想订阅的事件注册(Subscribe)到调度中心(Topic),当发布者(Publisher)发布该事件(Publish topic)到调度中心,也就是该事件触发时,由调度中心...

    发布订阅模式概念

    发布订阅模式:订阅者(Subscriber)把自己想订阅的事件注册(Subscribe)到调度中心(Topic),当发布者(Publisher)发布该事件(Publish topic)到调度中心,也就是该事件触发时,由调度中心统一调度(Fire Event)订阅者注册到调度中心的处理代码。

    三个主角: 订阅者、调度中心、发布者

    发布订阅模式实例

    /**
     * 发布 - 订阅模式
     */
    //定义一个新闻发布平台
    //主要功能包括任务发布大厅(informationWarehouse),以及订阅任务(subscribe),发布任务(release)
    let task = {
        informationWarehouse: {},
        subscribe(key, fn) {
            if (typeof this.informationWarehouse[key] === "undefined") {
                this.informationWarehouse[key] = []
            }
            this.informationWarehouse[key].push(fn) // 订阅的消息推送到调度中心
        },
        release(type, news) {
            let fns = this.informationWarehouse[type]
            // 如果调度中心没有这个资源,返回结束
            if (typeof fns === "undefined" || fns.length === 0) return;
            fns.forEach(fn => {
                fn(news);
            })
        }
    }
    console.log("----- 订阅 -----");
    // 订阅 娱乐头条
    task.subscribe('娱乐', val => {
        console.log('小王订阅的娱乐头条', JSON.stringify(val))
    })
    // 订阅 科技头条
    task.subscribe('科技', val => {
        console.log('小刘订阅的科技头条', JSON.stringify(val))
    })
    // 订阅 历史头条
    task.subscribe('历史', val => {
        console.log('小李订阅的历史头条', JSON.stringify(val))
    })
    /**
     * 系统推送头条
     */
    console.log("----- 发布 -----");
    task.release('娱乐', {
        title: "大衣哥给儿媳妇红包的言外之意",
        url: "https://www.toutiao.com/a6966769740203262478"
    })
    task.release('科技', {
        title: "192号段发放在即 中国广电5G渐近",
        url: "https://www.toutiao.com/a6966480940277334535"
    })
    task.release('历史', {
        title: "袁隆平的父母何许人也?",
        url: "https://www.toutiao.com/a6966099280075424267"
    })
    console.log("调度中心", task.informationWarehouse);
    

    发布订阅模式

    展开全文
  • 通俗的说,发布订阅模式就是执行一个操作(如点击按钮,执行click事件)调用多个事件。 比如报社和订阅者。报社一更新报纸,订阅者就能接收到快递员传递过来的新报纸。 一、jquery jquery.html <!doctype ...
  • JS简单实现发布订阅模式

    千次阅读 2021-01-30 17:36:52
    发布订阅模式发布订阅模式里,发布者,并不会直接通知订阅者,换句话说,发布者和订阅者,彼此互不相识。 那他们之间如何交流? 由一个调度中心来做中间人,发布者更新(publish)主题,由主题(调度中心)来进行通知...
  • 前端在之前使用jq的时候就有使用到发布订阅模式例如有trigger和on方法,现在vue中也经常使用到如:事件总线进行组件间的传值、子父组件间的传值、vue实现双向绑定等等。 手动实现 我们平时用的发布订阅模式需要有...
  • 主要介绍了js实现订阅发布模式,结合完整示例形式分析了js订阅发布模式相关实现与使用方法,需要的朋友可以参考下
  • 发布订阅模式主要涉及三个对象:发布者、订阅者、主题对象。 function Dep(){ //主题对象 this.subs = []; //订阅者列表 } Dep.prototype.notify = function(){ //主题对象通知订阅者 this.subs.forEach...
  • javascript开发中,一般用事件模型来替代传统的发布订阅模式。 代码实现如下 //定义发布订阅模式模型 function message () { this.messageList = {} //消息列表 } /** * 设置订阅者 * key 标识(string...
  • 主要介绍了JavaScript实现与使用发布/订阅模式,较为详细的分析了发布/订阅模式的概念、原理并结合实例形式分析了javascript实现与使用发布/订阅模式的相关操作技巧,需要的朋友可以参考下
  • js代码-发布订阅模式 JavaScript 发布-订阅模式 - 掘金 https://juejin.im/post/6844903850105634824
  • 发布订阅模式中,发布者和订阅者并不会直接交流,由一个中间调度者做中间人,实现消息的传递。相对于观察者模式,发布订阅模式的规模更适用于较大规模的消息通知 优点:发布订阅模式将对象之间解耦,发布者不必...
  • JavaScript 实现发布/订阅模式

    千次阅读 2017-10-03 10:35:29
    重要申明:感谢原文作者——杠子,想看原文请戳这里!...一、发布/订阅模式简介发布/订阅模式(即观察者模式): 设计该模式背后的主要动力是促进形成松散耦合。在这种模式中,并不是一个对象调用另一个对
  • js代码-实现发布/订阅模式
  • 观察者与发布订阅模式的不同 观察者模式只有两个角色,发布订阅模式多了中间管理者 观察者和被观察者之间是松耦合关系,发布者和订阅者之间完全不存在耦合关系 发布订阅模式的系统更加庞大适用于较大的系统,观察者...
  • 例如,多个老师给多个同学布置作业,这样的场景就需要发布订阅模式实现了。 模式实现 1 原型方法 var Teacher = function (type) { this.type = type; this.pubObjects = []; } Teacher.prototype = { ...
  • 主要介绍了JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法,结合实例形式分析了JavaScript观察者模式概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
  • 观察者与发布订阅的异同: 1. 观察者简言之,就是多个...总结:观察者模式可以算作是发布订阅模式的超集(即观察包括发布订阅),发布订阅可以算是观察者的一个分支,但因其应用广泛,渐渐的被承认为一个单独的设..
  • 发布订阅模式 发布订阅模式定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。通过它,不必定时的去查询监听对象的状态是否发生改变。 在发布订阅模式中,我们经常...
  • JavaScript 发布订阅模式实现

    千次阅读 2018-09-15 00:13:46
    实现一个EventEmitter类,实现以下方法: 1.emitter.on(name,fn) //订阅name事件,监听函数为fn,可多次订阅 2.emitter.once(name,fn) //功能与on类似,但监听函数为一次性的,触发后自动移除 3.emitter.emit...
  • javascript 设计模式 发布订阅模式
  • javascript 发布订阅模式什么是发布订阅模式javascript 中的发布订阅模式 什么是发布订阅模式 发布订阅模式是一种【一】对【多】的依赖关系。通过【多】订阅某个主题对象,而当主题对象变更时,则会发布消息通知到...
  • JS发布订阅模式

    2020-07-21 19:37:34
    目录JS发布订阅模式一、直白的发布订阅例子二、用户只订阅自己感兴趣的消息三、发布订阅模式的通用实现四、封装成中介 - 解决代码耦合五、离线储存+命名空间 - 解决离线事件 JS发布订阅模式 一、直白的发布订阅例子 ...
  • 发布订阅模式事件发布/订阅模式 ...优点: 在异步编程中实现更深的解耦缺点: 如果过多的使用发布订阅模式, 会增加维护的难度实现一个发布订阅模式var Event = function() {this.obj = {}}Event.prototype.on = func...
  • javascript发布订阅模式

    2018-09-27 16:03:36
    实现发布订阅模式主要是处理每一个事件的事件处理器清单 var PubSub = {handlers: {}} // 实现监听方法 PubSub.on = function(eventType, handler){ if (!(eventType in this.handlers)) { this.handlers[eventType...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,905
精华内容 9,162
关键字:

js实现发布订阅模式