js & Event Bus
js & Event Bus
global event handler (broadcast / trigger / emit / listen )
// 实现一个 EventBus类,这个类包含以下方法:
// on(监听事件,该事件可以被触发多次)
// once(也是监听事件,但只能被触发一次)
// fire(触发指定的事件)
// off(移除指定事件的某个回调方法或者所有回调方法)
// 解题思路: class 存储 evnets, 按类型分别处理 once
class EventBus {
constructor() {
this.eventBus = {};
}
on(name, callback) {
this.eventBus[name] = {
callback,
once: false,
};
}
once(name, callback) {
this.eventBus[name] = {
callback,
once: true,
};
}
off(name) {
let keys = Object.keys(this.eventBus);
if (keys.includes(name)) {
delete this.eventBus[name];
}
}
fire(name, person) {
// dispatchEvent
let keys = Object.keys(this.eventBus);
if (keys.includes(name)) {
let fun = this.eventBus[name].callback;
let once = this.eventBus[name].once;
// pass data
fun(person);
if (once) {
delete this.eventBus[name];
}
}
}
}
demo
const event = new EventBus();
const log = console.log;
event.on("drink", (person) => {
log(person + "喝水");
});
event.on("eat", (person) => {
log(person + "吃东西");
});
event.once("buy", (person) => {
log(person + "买东西");
});
event.fire("drink", "我");
// 我喝水
event.fire("drink", "我");
// 我喝水
event.fire("eat", "其它人");
// 其它人吃东西
event.fire("eat", "其它人");
// 其它人吃东西
event.fire("buy", "其它人");
//其它人买东西
event.fire("buy", "其它人");
//这里不会再次触发buy事件,因为once只能触发一次
event.off("eat") //移除eat事件
event.fire("eat", "其它人");
//这里不会触发eat事件,因为已经移除了
https://repl.it/@xgqfrms/Event-Bus
js & Event Bus的更多相关文章
- Orchard模块开发全接触7:订单与支付之Event Bus
在这部分,我们要完成的工作有: 1:将购物车内的商品变成真正的订单: 2:理解 父子及一对多关系: 3:写一个针对 Event Bus 的扩展点: 4:实现一个针对该扩展点的模拟的 支付服务: 一:创 ...
- 并发编程概述 委托(delegate) 事件(event) .net core 2.0 event bus 一个简单的基于内存事件总线实现 .net core 基于NPOI 的excel导出类,支持自定义导出哪些字段 基于Ace Admin 的菜单栏实现 第五节:SignalR大杂烩(与MVC融合、全局的几个配置、跨域的应用、C/S程序充当Client和Server)
并发编程概述 前言 说实话,在我软件开发的头两年几乎不考虑并发编程,请求与响应把业务逻辑尽快完成一个星期的任务能两天完成绝不拖三天(剩下时间各种浪),根本不会考虑性能问题(能接受范围内).但随着工 ...
- vue项目中event bus的简单使用
之前做的一个vue后台管理系统中,需要实现这样一个功能:从列表页点击新建或编辑进入新建.编辑页面,新建.编辑完成后需要关闭当前的新建和编辑tab,而tab的关闭则是由项目中的tag组件控制的, 新建和 ...
- Event Bus & Event Emitter
Event Bus & Event Emitter Event Bus https://code.luasoftware.com/tutorials/vuejs/parent-call-chi ...
- Orchard源码分析(4.3):Orchard.Events.EventsModule类(Event Bus)
概述 采用Event Bus模式(事件总线),可以使观察者模式中的观察者和被观察者实现解耦. 在.Net 中使用观察者模式,可以使用事件(委托)和接口(类).Orchard Event Bus使用的 ...
- js event 2
js event 2 浏览器兼容 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- js event 事件兼容浏览器 ie不需要 event参数 firefox 需要
js event 事件兼容浏览器 ie不需要 event参数 firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- spring集成guava的event bus
Guava的event bus guava, https://github.com/google/guava 是一个非常有名的Java类库,提供了很多在日常开发中常用的集合.函数接口等.此外,guav ...
- Azure Event Bus 技术研究系列1-Event Hub入门篇
前两个系列研究了Azure IoT Hub和Azure Messaging.最近准备继续研究Azure Event Bus,即Azure的事件中心.首先, Azure Event Hub的官方介绍: ...
随机推荐
- Microsoft Windows的消息循环
https://zh.wikipedia.org/wiki/Microsoft_Windows的訊息迴圈 微软视窗操作系统是以事件驱动做为程序设计的基础.程序的线程会从操作系统获取消息.应用程序会不断 ...
- 【转载】【网络安全】渗透中 PoC、Exp、Payload 与 Shellcode 的区别
原文地址 渗透中 PoC.Exp.Payload 与 Shellcode 的区别 概念 PoC,全称"Proof of Concept",中文"概念验证",常指 ...
- loj 10127最大数
JSOI 2008 最大数 给定一个正整数数列a1,a2,a3,⋯,an,每一个数都在0∼p–1 之间.可以对这列数进行两种操作: 添加操作:向序列后添加一个数,序列长度变成 n+1: 询问操 ...
- BootstrapValidator验证规则、BootStrap表格:列参数
BootstrapValidator验证规则 需引用组件 <script src="~/Scripts/jquery-1.10.2.js"></script> ...
- Tomcat优化,JNDI,连接池,数据源
什么是JNDI? JNDI的简单应用 什么是连接池技术? 连接池 性能 连接池技术与传统数据库连接的比较 连接池技术工作原理 为什么使用连接池? 传统数据库连接方式的不足 企业级开发需要稳健和高效的数 ...
- Lambda 表达式 学习
最近几天在学习Lambda,给我的理解就是一个匿名函数的升级版,代码极大可能的简洁了很多,不需要像以前一样必须使用众多的代码才能实现相关功能. 慢慢积累学习,将Java 8的相关知识进行一个学习. 用 ...
- linux下mysql基于mycat做主从复制和读写分离之基础篇
Linux下mysql基于mycat实现主从复制和读写分离1.基础设施 两台虚拟机:172.20.79.232(主) 172.20.79.233(从) 1.1软件设施 mysql5.6.39 , my ...
- 面向对象编程(封装、封装的意义、封装与扩展性、@property)
1.封装之如何实现属性的隐藏 封装: __x=1 # 把数据属性隐藏 (如何实现隐藏) 类定义阶段 __开头发生了变形 __x --> _A__x特点: 1.在类外部无法直接:obj.__Att ...
- Java复习整理 Day02
1 package demo01; 2 3 import java.util.Scanner; 4 5 public class ScannerDemo01 { 6 public static voi ...
- oss-server 小型对象存储系统
oss-server 项目介绍 oss-server是针对项目开发时提供的小型对象存储系统,开发者在针对文件上传时业务剥离,同时方便文件迁移,为满足单个项目,多个系统的情况下,提供统一的oss服务 o ...