js简单粗暴的发布订阅示例代码

什么是发布/订阅?

我打个比方,你去某个门店买衣服,你和门店店长相互并不认识,门店店长只管卖他的衣服,并不关心是谁来买,而你也只管买你想要的衣服,并不关心是哪个门店在卖,这时,门店和你就组成了一个发布/订阅的关系。

当门店挂出衣服款式,你去找你想要的衣服,如果找到了,那就买下来,如果没找到,那就离开这家店。整个过程就是这么简单。

使用场景

异步通信、多页面间相互通信,pageA 的方法想在 pageB的方法调用的某个时机触发

直接上代码

class Publish {
 constructor() {
  this.listMap = {};
 }
	// 订阅
 on(key, fn) {
  this.listMap[key]
   ? this.listMap[key].push(fn)
   : this.listMap[key] = [fn];

		// 存储订阅fn的下标
  const index = this.listMap[key].length - 1;

		// 返回取消订阅的function
  return () => this.clear(key, index);
 }

	// 取消所有该key订阅
 off(key) {
  delete this.listMap[key];
 }

	// 取消key的指定的某个订阅
 clear(key, index) {
  index === this.listMap[key].length - 1
   ? this.listMap[key].pop()
   : this.listMap[key][index] = null;
 }

	//订阅一次触发后自动取消订阅
 once(key, fn) {
  this.on(key, (...rest) => {
   fn(...rest);
   this.off(key);
  });
 }

	// 发布key
 trigger(key, ...rest) {
 	if(key in this.listMap) {
	 	this.listMap[key].forEach(fn => {
	   fn(...rest);
	  });
 	}
 }
}

使用方法

const ob = new Publish();

// 订阅 sub1
const sub1 = ob.on('sub1', (a, b) => {
 console.log('sub1', a, b);
});

// 订阅 sub1
const sub11 = ob.on('sub1', (a, b) => {
 console.log('sub11', a, b);
});

ob.trigger('sub1', 2, 3);

// 取消订阅sub1
sub1();

// 取消订阅sub11
sub11();

// 订阅 sub3
ob.on('sub3', (a, b) => {
 console.log('sub3', a, b);
});

// 订阅 sub3
ob.on('sub3', (a, b) => {
 console.log('sub33', a, b);
});

ob.trigger('sub3', 6, 7);

// 取消订阅所有的sub3
ob.off('sub3');

// 订阅一次就自行取消订阅
ob.once('sub4', (a, b) => {
 console.log('sub4', a, b);
});

ob.trigger('sub4', 8, 9);

总结

到此这篇关于js简单粗暴的发布订阅的文章就介绍到这了,更多相关js简单发布订阅内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-01-22

js设计模式之代理模式及订阅发布模式实例详解

本文实例讲述了js设计模式之代理模式及订阅发布模式.分享给大家供大家参考,具体如下: 为啥将两种模式放在一起呢?因为这样文章比较长啊. 写博客的目的我觉得首要目的是整理自己的知识点,进而优化个人所得知识体系.知识成为个人的知识,就在于能够用自己的话表达同一种意义. 本文是设计模式系列文章的第二篇文章,第一篇:. 1,代理模式,只是学习了虚拟代理以及缓存代理,具体案例 1)虚拟代理 //业务代码 var myImage = (function() { var imgNode = document.

JavaScript设计模式之观察者模式(发布者-订阅者模式)

观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 在很多语言里都得到大量应用. 包括我们平时接触的dom事件. 也是js和dom之间实现的一种观察者模式. 复制代码 代码如下: div.onclick  =  function click (){ alert ( "click' ) } 只要订阅了div的click事件. 当点击div的时候, function click就会被触发. 那么到底什么是观察者模式呢. 先看看生活中的观察者模式. 好莱坞有句名言. "不要给我

[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例

发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房源信息,根据手头上掌握的客户联系信息(买房的人的手机号),通知买房的人,他充当了发布者的角色 卖主想卖掉自己的房子,就需要告诉中介,把信息交给中介发布 二,网站订阅信息的用户 订阅者角色:需要订阅某类信息的网民,如某个网站的javascript类型文章 发布者角色:邮箱服务器,根据网站收集到的用户订

JS模式之简单的订阅者和发布者模式完整实例

本文实例讲述了JS模式之简单的订阅者和发布者模式.分享给大家供大家参考.具体如下: <!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/xhtml"> <h

js实现的订阅发布者模式简单示例

本文实例讲述了js实现的订阅发布者模式.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-

js 发布订阅模式的实例讲解

废话不多说,直接上代码 //发布订阅模式 class EventEmiter{ constructor(){ //维护一个对象 this._events={ } } on(eventName,callback){ if( this._events[eventName]){ //如果有就放一个新的 this._events[eventName].push(callback); }else{ //如果没有就创建一个数组 this._events[eventName]=[callback] } } e

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

上次研究观察者模式,很多文章说它也叫Subscribe/Publish(发布/订阅模式).可在<Javascript设计模式>一书中,这两种模式还是有些区别的.书中原话如下: 1.Observer模式要求希望接收到主题通知者的观察者必须订阅内容改变的事件. 2.Subscribe/Publish模式使用了一个主题/事件通道,这个通道介于订阅者和发布者之间.该事件系统允许代码定义应用程序的特定事件,该事件可以传递自定义参数,自定义参数包含订阅者所需要的值.其目的是避免订阅者和发布者产生依赖关系.

JavaScript事件发布/订阅模式原理与用法分析

本文实例讲述了JavaScript事件发布/订阅模式原理与用法.分享给大家供大家参考,具体如下: 1.发布/订阅模式也是诸多设计模式当中的一种: 2.这种方式可以在es5下相当优雅地处理异步操作: 3.什么是发布/订阅呢?我们举个栗子: 假设fn1,fn2,fn3都可以视作一个事件的发布者,执行它,就会发布一个事件.这个时候,我们可以通过一个事件的订阅者去批量订阅并处理这些事件,包括它们的先后顺序.增加一个消息订阅者的方法: class AsyncFunArr { constructor (..

JavaScript实现与使用发布/订阅模式详解

本文实例讲述了JavaScript实现与使用发布/订阅模式.分享给大家供大家参考,具体如下: 一.发布/订阅模式简介 发布/订阅模式(即观察者模式): 设计该模式背后的主要动力是促进形成松散耦合.在这种模式中,并不是一个对象调用另一个对象的方法,而是一个订阅者对象订阅发布者对象的特定活动,并在发布者对象的状态发生改变后,订阅者对象获得通知.订阅者也称为观察者,而被观察的对象称为发布者或主题.当发生了一个重要的事件时,发布者将会通知(调用)所有订阅者,并且可能经常以事件对象的形式传递消息. 基本思

JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例

本文实例讲述了JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法.分享给大家供大家参考,具体如下: 观察者模式,又称为发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己的状态. 在观察者模式中,并不是一个对象调用另一个对象的方法,而是一个对象订阅另一个对象的特定活动并在状态改变后获得通知.订阅者也称为观察者,而被观察的对象称为发布者或主题.当发生了一个重要的事件时,发布

JavaScript设计模式之观察者模式与发布订阅模式详解

本文实例讲述了JavaScript设计模式之观察者模式与发布订阅模式.分享给大家供大家参考,具体如下: 学习了一段时间设计模式,当学到观察者模式和发布订阅模式的时候遇到了很大的问题,这两个模式有点类似,有点傻傻分不清楚,博客起因如此,开始对观察者和发布订阅开始了Google之旅.对整个学习过程做一个简单的记录. 观察者模式 当对象间存在一对多关系时,则使用观察者模式(Observer Pattern).比如,当一个对象被修改时,则会自动通知它的依赖对象.观察者模式属于行为型模式.在观察模式中共存

浅谈发布订阅模式与观察者模式

背景 设计模式并非是软件开发的专业术语,实际上,"模式"最早诞生于建筑学. 设计模式的定义是:在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案.通俗一点说,设计模式是在某种场合下对某个问题的一种解决方案.如果再通俗一点说,设计模式就是给面向对象软件开发中的一些好的设计取个名字. 这些"好的设计"并不是谁发明的,而是早已存在于软件开发中.一个稍有经验的程序员也许在不知不觉中数次使用过这些设计模式.GoF(Gang of Four--四人组,<设计模式&

JavaScript设计模式之门面模式原理与实现方法分析

本文实例讲述了JavaScript设计模式之门面模式原理与实现方法.分享给大家供大家参考,具体如下: 外部与一个子系统的通信必须通过一个系统的一个门面对象进行,这就是门面模式. 门面模式具备如下两个角色: 1. 门面角色 客户端可以调用这个角色方法,此角色中有子系统的应用(知晓相关的(一个或多个)子系统的功能和责任).本角色会将所有从客户端发来的请求委派到相应的子系统去. 2. 子系统角色 可以同时有一个或多个子系统.每一个子系统都不是一个单独的类,而是一些类的集合.每一个子系统都可以被客户端直

Javascript设计模式之观察者模式(推荐)

推荐阅读: JavaScript观察者模式(经典) 1.什么是观察者模式 观察者模式有时也称为发布--订阅模式,在观察者模式中,有一个观察者可以管理所有的目标,等到有状态发生改变的时候发出通知.(其实sql server中的发布订阅也是这个道理) 2.通俗解释 假如以前村里的广播是一个观察者,那么每个村民就是被观察对象,如果村子里有通知,政策发生改变的时候,就需要通过广播把这个消息发布出去,而不用直接一家家的跑去发通知. 3.代码 <!DOCTYPE html> <html lang=&

JavaScript设计模式之观察者模式实例详解

本文实例讲述了JavaScript设计模式之观察者模式.分享给大家供大家参考,具体如下: 观察者模式 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己. * 它分为2个角色:(1)观察者  (2)被观察者 * 观察者模式的目的:对程序的内在变化进行观察,当其有变化的时候,你可以得知,并且可以做出相应的反应. 现在我们通过一个需求来学习该

学习JavaScript设计模式之观察者模式

一.定义 观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 在JavaScript中,一般使用事件模型来替代传统的观察者模式. 好处: (1)可广泛应用于异步编程中,是一种替代传递回调函数的方案. (2)可取代对象之间硬编码的通知机制,一个对象不用再显示地调用另外一个对象的某个接口.两对象轻松解耦. 二.DOM事件–观察者模式典例 需要监控用户点击document.body的动作,但是我们没有办法预知用户将在什么时间点击