纯JS实现发布订阅模式,推送消息,取消订阅,最新教程,细到极致

  大家好呀。我是你们的老朋友Jessica老哥,距离上一次更新已经是2个月了,中间经历了太多,各种酸甜苦辣,导致没有时间去更新。新年过后,老哥准备写点干货与大家分享

  这次带来的js的一个小知识点,可以说是前端和后端都需要了解的,发布订阅。
前端,我们通常讲组件通信,需要用到发布订阅。
后端,我们通常讲消息中间件,它的底层实现也是发布订阅

  带着这个好奇心,我们一起来简单讲讲,发布订阅到底是个什么,它其实本质上,是一个函数或者说是一个方法,放到一个数组或者栈里面,然后暂时不执行,在合适的机会拿出来执行。

  简单来说,函数先被subscribe订阅,将这个函数推到数组里面,
 然后 一旦有人调用publish发布,这个函数会从数组中遍历出来执行。
  取消订阅,就更简单了,把这个函数从数组中移出去就可以了

下面是具体的js代码演示:

//手写一个简单的发布订阅模式
		var Bus={
			list:[],
			subscribe(callback){
				//上面是一个对象,这里的this 指向Bus
				this.list.push(callback)
			},
			publish(text){
				this.list.map(k=>{
					k && k(text)
				})
			},
			unsubscribe(){
				//这里表示从数组的倒数第二个开始分离,分离后面一个元素
				this.list.splice(this.list.length-1,1)
			}
		}
		
		
		var fun1=(value)=>{
			console.log(111,value)
		}
		
		var fun2=(value)=>{
			console.log(222,value)
		}
		
		Bus.subscribe(fun1)
		Bus.subscribe(fun2)
		
		Bus.publish("你好呀")
		
		//取消订阅,我们把fun2取消
		console.log('---')
		Bus.unsubscribe()
		Bus.publish("你好呀")

最后,各位小伙伴,麻烦给老哥一个点赞、关注、收藏三连好吗,你的支持是老哥更新最大的动力,谢谢!

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jesscia ^_^

您的打赏将是我努力的动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值