自定义事件总线

文章目录

    • 什么是自定义事件总线
    • 具体实现
      • 思路分析
      • 定义结构
      • 实现 on
      • 实现 emit
      • 实现 off
    • 源码

什么是自定义事件总线

  1. 自定义事件总线属于一种观察着模式,其中包括三个角色
  2. 发布者(Publisher):发出事件(Event)
  3. 订阅者(Subscriber):订阅事件(Event),并且会进行响应(Handler)
  4. 事件总线(EvnetBus):无论是发布者还是订阅者都是通过事件总线作为中台的

具体实现

思路分析

  1. 事件总线相信大家都用过或者听过,特别是在 vue2 中,这就是一种组件传值的方式,轻量又简单

  2. 从使用上来说,通过 on 监听事件,同时可以使用 emit 来发送事件,当然也可也通过 off 来取消事件

  3. 使用还是非常简单的,但是怎么才能实现 emit 触发 on 监听的呢,竟然要触发的话,首先我是不是需要有一个地方可以存储这个通过 on 监听的方法呢?存储了之后,就是使用,emit 实际就是通过参数找到对应的存储方法,然后我们帮他手动调用一下

  4. 所以基于这一点,我们就可以得到三个点,on、store、emit,如图:

    在这里插入图片描述

定义结构

  1. 根据上面的分析,我们可以选用 class 的形式来实现,

  2. 其次我们还需要 on emit off 三个方法,如下:

    class JcEventBus{constructor() {}on(){}emit(){}off(){}
    }
    
  3. 在这之中,我们就按照分析,确定一下 store,在 class 结构中,可以 this 访问数据和方法,所以在 JcEventBus 初始化时,就可以定义一个变量来存储后续的方法,而可以通过一个字符串准确存储和取出的话,对象和map都可以,但是这里对象会更加好操作,所以改造后 constructor 代码如下:

    constructor() {this.eventBus = {}
    }
    

实现 on

  1. on 方法一般是有两个参数的,我们可以写出基础的函数结构,如下:

    on(eventName, callback){}
    
  2. 我们不妨在思考一下,有时候这个回调函数的this,可能需要我们来指定,方便在函数内部使用 this,所以为了实现这一点,一般会给 callback 传递一个普通函数而非匿名函数,同时应该有第三个参数来接受这个 this,如下:

    on(eventName, callback, ctx){}
    
  3. 确定好参数之后,我们来进行一下具体的实现,首先假设监听的名称为 foo,而且监听的函数有时候可能不止一个,而存储多个函数我们可以想到什么,数组,利用数组来实现存储这些函数,需要用的时候在找到对应的函数进行执行即可,确定好这一点之后,我们要做的就是以 eventName 为 key,callback 存储在数组中为 value,{ foo: [fn1,fn2…] },代码如下:

    on(eventName, callback, ctx){// 如果不存在则初始化为空数组const handles = this.eventBus[eventName] || []// 传递一个对象,同时保存 执行的函数 和 thishandles.push({ callback, ctx })// 存储在 store 中this.eventBus[eventName] = handles
    }
    
  4. 我们来通过实例化 JcEventBus 来进行测试一下,看看是否真的存入了,测试代码如下:

    eventBus.on('foo',function (...payload) {console.log('foo 函数,参数为:', payload)},obj
    )eventBus.on('bar',function (...payload) {console.log('bar 函数,参数为:', payload)},obj
    )console.log(eventBus.eventBus)
    
  5. 输出如图:

    在这里插入图片描述

实现 emit

  1. emit 要做的事件也非常简单,传递事件名称和参数即可,因此基础的函数结构如下:

    emit(eventName, ...payload){}
    
  2. 参数可能会有多个,使用剩余参数来接收,这个方法,第一步就是要查找有没有这个方法,如果有,就执行这个事件名称上绑定的所有函数,代码如下:

    emit(eventName, ...payload) {const handles = this.eventBus[eventName]if (!handles || !handles.length) returnhandles.forEach(handle => {// 使用 apply 绑定 thishandle.callback.apply(handle.ctx, payload)})
    }
    
  3. 这个应该非常简单吧,直接上测试代码。如下:

    const eventBus = new JcEventBus()const obj = { name: 'coderjc' }eventBus.on('foo',function (...payload) {console.log('foo1 函数,参数为:', payload, this)},obj
    )eventBus.on('foo',function (...payload) {console.log('foo2 函数,参数为:', payload)},obj
    )eventBus.emit('foo', 1, 2, 3)
    
  4. 结果如图:

    在这里插入图片描述

实现 off

  1. off 类似于 removeEventListener 这个方法,也是事件名 + 函数,即可取消,所以函数基础结构如下:

    off(eventName, callback){}
    
  2. 然后就是通过事件名称找到这个数组,在这个数组里面找到对应的函数进行删除即可,不过这里会会有一点细节需要注意,比如一个函数被存储了多次的情况下,当然这个你可以在存储的时候就拦截,避免重复,但是我们这里没有,所以如果删除就要删除多个,而这个删除可能有部分的朋友们就会想到遍历,全等判断,然后删除就行吗,这个也可以,但是可能需要多一点的操作,我们先看看这个思路删除会有什么结果,我写了一个demo,如下:

    // 这里用数字代替函数
    const arr = [1, 2, 2, 4, 5, 6]
    const val = 2for (let i = 0; i < arr.length; i++) {if (arr[i] === val) {// 删除arr.splice(i, 1)}
    }
    console.log(arr)
    
  3. 结果如图:

    在这里插入图片描述

  4. 不知道发现了没有,只删除了其中的一个2,还有一个没有删除,这是因为 splice 方法删除之后,原数组的长度就-1了,此时原来索引为2的数组就会变成索引为1,而 i 的值又没有同步的 -1,就会直接跳过,所以就是这个结果了所以解决方法很简单,同时 i-1 即可,当然还是有其他方法的,都是非常简单的

  5. 我这里就直接过滤数组重新赋值了,如下:

    off(eventName, callback){const handles = this.eventBus[eventName]if (!handles || !handles.length) returnthis.eventBus[eventName] = handles.filter(handle => handle.callback !== callback)
    }
    
  6. 来看看是不是真的有用,测试代码如下:

    const eventBus = new JcEventBus()function foo(...payload) {console.log('foo1 函数,参数为:', payload)
    }eventBus.on('foo', foo)eventBus.on('foo', function (...payload) {console.log('foo2 函数,参数为:', payload)
    })// 移除
    eventBus.off('foo', foo)eventBus.emit('foo', 1, 2, 3)
    
  7. 结果如图:

    在这里插入图片描述

源码

当然了,最后我是加了一些对于参数的类型判断,非常简单,就不单独介绍了

function _verifyType(eventName = null, callback = null) {if (eventName && typeof eventName !== 'string') {throw new Error('eventName must be a string')}if (callback && typeof callback !== 'function') {throw new Error('callback must be a function')}
}class JcEventBus {constructor() {this.eventBus = {}}on(eventName, callback, ctx) {_verifyType(eventName, callback)const handles = this.eventBus[eventName] || []handles.push({ callback, ctx })this.eventBus[eventName] = handles}off(eventName, callback) {_verifyType(eventName, callback)const handles = this.eventBus[eventName]if (!handles || !handles.length) returnthis.eventBus[eventName] = handles.filter(handle => handle.callback !== callback)}emit(eventName, ...payload) {_verifyType(eventName)const handles = this.eventBus[eventName]if (!handles || !handles.length) returnhandles.forEach(handle => {handle.callback.apply(handle.ctx, payload)})}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/325901.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STM32 ADC采样调试笔记

最近在搞STM32L051系列一个小MCU&#xff0c;要用这个去采集两路ADC作为输入。期间也碰到过一些问题&#xff0c;顺便记录下。 ADC采集原理不说了&#xff0c;主要采集电压&#xff0c;用数字进行细分&#xff0c;这样就可以知道输入电压多少了&#xff0c;网上也有很多相关文…

STM32G030C8T6:USART串口通信(中断)

本专栏记录STM32开发各个功能的详细过程&#xff0c;方便自己后续查看&#xff0c;当然也供正在入门STM32单片机的兄弟们参考&#xff1b; 本小节的目标是&#xff0c;系统主频64 MHZ,采用高速外部晶振&#xff0c;通过芯片PB6,PB7 的USART1 口&#xff0c;实现串口通信。 原理…

VMware17 下载安装教程

VMware17 下载安装ubuntu22.04虚拟机安装 一、VM安装 1.打开官方下载地址&#xff1a;https://www.vmware.com/products/workstation-pro/workstation-pro-evaluation.html 跳转页面后&#xff0c;点击左边的Download oad now&#xff0c;下载的就是最新版的 Workstation 17 …

GUI三维绘图

绘制三维图plot3 t0:pi/50:10*pi; xsin(t); ycos(t); zt; plot3(x,y,z); 产生栅格数据点meshgrid 这个接口在绘制三维图像里面相当重要&#xff0c;很多时候要将向量变成矩阵才能绘制三维图。 x0:0.5:5; y0:1:10; [X,Y]meshgrid(x,y); plot(X,Y,o); x和y是向量&#xff0c;…

EG网关网口连接触控一体机操作说明V1.0 20210809

前言&#xff1a;工业现场中&#xff0c;很多情况下都会使用触摸屏连接PLC这一套设备&#xff0c;此一体机是将触摸屏和PLC两款设备集成到一起&#xff0c;可以简化现场设备结构&#xff0c;方便维护。同时&#xff0c;使用蓝蜂 EG系列网关&#xff0c;可以实现远程在线监控数据…

Wnmp本地部署结合内网穿透实现任意浏览器远程访问本地服务

最近&#xff0c;我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念&#xff0c;而且内容风趣幽默。我觉得它对大家可能会有所帮助&#xff0c;所以我在此分享。点击这里跳转到网站。 文章目录 前言1.Wnmp下载安装2.Wnmp设置3.安装cpolar内网穿透3.1…

【AI视野·今日NLP 自然语言处理论文速览 第六十八期】Tue, 2 Jan 2024

AI视野今日CS.NLP 自然语言处理论文速览 Tue, 2 Jan 2024 Totally 48 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers A Computational Framework for Behavioral Assessment of LLM Therapists Authors Yu Ying Chiu, Ashish Shar…

三叠云流程制造ERP:构建智慧工厂,实现高效生产管理

在数字化经济的浪潮下&#xff0c;新一代信息技术快速发展&#xff0c;深度整合&#xff0c;引领了工业的创新和变革&#xff0c;推动了企业向智能化发展。解决生产管理、销售管理和技术管理等难题的关键&#xff0c;在于管理者能否及时准确地掌握企业运营信息。三叠云流程制造…

vue3+Ts+Hook的方式实现商城核心功能sku选择器

Hooks是React等函数式编程框架中非常受欢迎的工具&#xff0c;随着VUE3 Composition API 函数式编程风格的推出&#xff0c;现在也受到越来越多VUE3开发者的青睐&#xff0c;它让开发者的代码具有更高的复用度且更加清晰、易于维护。 本文将通过CRMEB商城商品详情sku选择功能了…

【IPC通信--信号】

信号处理函数 • 信号发送函数 – kill(), sigqueue(), raise(), alarm(), setitimer(), pause() &#xff0c; abort() • 信号安装函数 – signal(), sigaction() • 信号集操作函数 – sigemptyset(), sigfillset(), sigaddset(), sigdelset(), sigismember() 信号发送函数—…

由浅入深理解C#中的事件

目录 本文较长&#xff0c;给大家提供了目录&#xff0c;可以直接看自己感兴趣的部分。 前言有关事件的概念示例​ 简单示例​ 标准 .NET 事件模式​ 使用泛型版本的标准 .NET 事件模式​ 补充总结 参考前言 前面介绍了C#中的委托&#xff0c;事件的很多部分都与委托…

问题 E: 便利店

题目描述 天宝来到便利店想买些饮料。便利店有各种型号的瓶装饮料售卖&#xff0c;不同型号的饮料卖不同的价格。1瓶0.25升的卖A元&#xff0c;1瓶0.5升的饮料卖B元&#xff0c;1瓶1升的卖C元&#xff0c;1瓶2升的卖D元。便利店里每种饮料都是无限供应。 天宝要买N升的饮料&a…