EventBus的实现
EventBus概要
EventBus是消息传递的一种方式,基于一个消息中心,订阅和发布消息的模式。这种方式的实现不仅仅局限于前端,在iOS中的消息消息中心也是如此实现。
- 设计模式:订阅者发布者模式,这种设计模式在前端很常见。
- API的设计:
2.1 只能构造一个消息对象
2.2 on('msgName', func)订阅消息,msgName:订阅的消息名称 func: 订阅的消息
2.3 one('msgName', func)仅订阅一次消息,后订阅的会替换前面订阅的消息
2.4 emit('msgName', msg)发布消息 msgName:消息名称 msg:发布的消息
2.5 off('msgName')移除消息
实现EventBus
// 构造EventBus
function EventBusClass() {this.msgQueues = {}
}EventBusClass.prototype = {// 将消息保存到当前的消息队列中on: function(msgName, func) {if (this.msgQueues.hasOwnProperty(msgName)) {if (typeof this.msgQueues[msgName] === 'function') {this.msgQueues[msgName] = [this.msgQueues[msgName], func] } else {this.msgQueues[msgName] = [...this.msgQueues[msgName], func] }} else {this.msgQueues[msgName] = func;}},// 消息队列中仅保存一个消息one: function(msgName, func) {// 无需检查msgName是否存在this.msgQueues[msgName] = func;},// 发送消息emit: function(msgName, msg) {if (!this.msgQueues.hasOwnProperty(msgName)) {return}if (typeof this.msgQueues[msgName] === 'function') {this.msgQueues[msgName](msg)} else {this.msgQueues[msgName].map((fn) => {fn(msg)})}},// 移除消息off: function(msgName) {if (!this.msgQueues.hasOwnProperty(msgName)) {return}delete this.msgQueues[msgName]}
}// 将EventBus放到window对象中
const EventBus = new EventBusClass()
window.EventBus = EventBus
使用EventBus
// 订阅消息
function subscribe() {EventBus.on('first-event', function(msg) {alert(`订阅的消息是:${msg}`);});
}// 发送消息
function emit() {const msgInput = document.getElementById("msgInputId")EventBus.emit('first-event', msgInput.value)
}// 移除消息
function off(msgName) {EventBus.off(msgName)
}
CodePen预览
CodePen预览
-----可能需要翻墙-----
<p data-height="265" data-theme-id="0" data-slug-hash="maQpgR" data-default-tab="js,result" data-user="beyondverage0908" data-pen-title="EventBus的实现" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" class="codepen"><span>See the Pen EventBus的实现 by avg (@beyondverage0908) on CodePen.</span></p>
<script async src="https://static.codepen.io/ass...;></script>
总结
整个EventBus主要部分是分为三个部分。消息中心,订阅事件方法,发布消息方法。虽然不能和Vue中实现的那么全面,但麻雀虽小,五脏俱全。缺少的部分在于对数据安全性的校验。希望给你一个实现的思路
EventBus的实现相关推荐
- EventBus的粘性事件原理
EventBus也称事件总线,根据发送事件的类型分为普通事件和粘性事件. 粘性事件的用法: 1.订阅的时候加上sticky = true @Subscribe(threadMode = ThreadM ...
- Caused by: org.greenrobot.eventbus.EventBusException: Subscriber class com.baidu.iov.dueros.film.ui
这个错误是EventBus 包的错误 指向了EventBus.getDefault().register(this); 处理这个错误到EventBus 接受的地方 1 看看接受值是否写了 2 @Su ...
- EventBus的使用(一看就懂)
今天使用EventBus 遇到一个小bug ,这里记录下其使用 先啰嗦一下,这边博客是说怎样使用的,没有涉及到什么原理,在看之前,你或许百度了很多博客 都是MainActivity 接受消息,Seco ...
- Android中的eventBus传值
第一步:在build.gradle中添加依赖dependencies { compile 'org.greenrobot:eventbus:3.0.0'} 第二步:创建一个 Event类: 注意:en ...
- EventBus设计之禅
前言 笔者看过一些知名开源项目的源码,认为 EventBus 算是其中最简单的,甚至复杂程度不在一个级别上.解析源码前先提一下以下几个变量和类,掌握了这些变量和类基本上 EventBus 已经就掌握一 ...
- 【转】EventBus 3.0使用详解
原文:https://www.jianshu.com/p/f9ae5691e1bb 01 前言 当我们进行项目开发的时候,往往是需要应用程序的各组件.组件与后台线程间进行通信,比如在子线程中进行请求数 ...
- Android框架之路——EventBus的使用
一.简介 EventBus是由greenrobot 组织贡献的一个Android事件发布/订阅轻量级框架.EventBus是一个Android端优化的publish/subscribe消息总线,简化了 ...
- EventBus源码解析
前面一篇文章讲解了EventBus的使用,但是作为开发人员,不能只停留在仅仅会用的层面上,我们还需要弄清楚它的内部实现原理.所以本篇博文将分析EventBus的源码,看看究竟它是如何实现"发 ...
- Android 源码分析之 EventBus 的源码解析
1.EventBus 的使用 1.1 EventBus 简介 EventBus 是一款用于 Android 的事件发布-订阅总线,由 GreenRobot 开发,Gihub 地址是:EventBus. ...
- EventBus简单分析
2019独角兽企业重金招聘Python工程师标准>>> 当Android项目越来越庞大的时候,应用的各个部件之间的通信变得越来越复杂,例如:当某一条件发生时,应用中有几个部件对这个消 ...
最新文章
- randn--创建正态分布随机矩阵
- Grafana Labs 携手阿里云,将提供国内首款 Grafana 托管服务
- java bean 监听_事件监听器?将JavaBeans接通起来的方法
- 猛然回首 在这里4年了
- 华为给力!算力最强AI处理器在中国!
- JVM内存分析及导致内存溢出的不健壮代码及解决办法
- rsyslogd以及日志轮替logrotate的梳理
- 回调函数的概念及使用
- VsCode开发Java插件集合
- 掷骰子游戏设计(C++)
- c语言课程设计作业,c语言课程设计心得体会
- 55400-73-2,Ms-PEG5-Ms含有两个甲磺酸基部分的PEG连接物
- MacBook上不显示外接硬盘未装载解决方法
- 战地2服务器怎么虚拟人数,战地2如何修改人数
- jpg怎么转换成pdf文档
- 线路负载及故障检测装置(2019全国大学生电子设计大赛C题:国家级一等奖)
- 知识精华—修改文件夹的只读属性
- IDE/ATA与AHCI
- SSLHandshakeException: No appropriate protocol
- MT7601 无线wifi网卡驱动移植