java 发布订阅模式应用,前端异步解决方案-2(发布/订阅模式);_冰上行走的博客-程序员宅基地

技术标签: java 发布订阅模式应用  

什么是发布订阅模式

什么是发布订阅模式我这里不多就不多阐述了,给大家提供几个我觉得讲的比较好的博文,请各位自行阅读

发布-订阅模式解释 这一篇文章应该是一个java coder写的,但是设计模式这种东西并不分语言,各位可以借鉴一下

Javascript中理解发布--订阅模式这一篇是我们前端人写的,但是比较长,大家有耐心可以看看

发布中心实现

我对发布中心的实现,可以不看(看了能够更好的理解发布订阅模式)

//实现发布中心

/*

* log=[{

* index: Number, 日志编号(自增)

* type: String, 日志类型('subscribe','unsubscribe','publish')

* eventName: String, 事件名

* time: new Date(), 时间

* fun:Function 订阅/取订的方法(只有日志类型为'subscribe'或'unsubscribe'的才有)

* param:Object 触发事件时的参数(只有日志类型为'publish'的才有)

* }]

* eventCenter = {

* eventName:[Function,Function] //eventName即为事件名,其值为订阅方法列表

* }

* .subscribe(eventName, fun) 订阅 eventName:事件名 fun:订阅方法

* .unsubscribe(eventName, fun) 取订 eventName:事件名 fun:订阅方法

* .publish(eventName[,param]) 发布 eventName:事件名 param:事件参数

* .showLog([filter]) 日志展示 filter 过滤器,同数组的过滤器用法 返回过滤后的log

* .showEventCenter([eventName]) 事件中心 eventName 事件名 返回事件绑定的方法

* */

let subscribeCenter = function () {

//事件中心

let eventCenter = {};

//日志

let log = [];

//添加日志函数

function pushLog(type, eventName, fun, param) {

let info = {

index: log.length,

type: type,

eventName: eventName,

time: new Date()

};

if (fun) {

info.fun = fun;

}

if (param) {

info.param = param;

}

log.push(info)

}

return {

//订阅

subscribe(eventName, fun) {

pushLog("subscribe", eventName, fun);

eventCenter[eventName] = eventCenter[eventName] || [];

eventCenter[eventName].push(fun);

},

//取消订阅

unsubscribe(eventName, fun) {

pushLog("unsubscribe", eventName, fun);

let onList = eventCenter[eventName];

if (onList) {

for (let i = 0; i < onList.length; i++) {

if (onList[i] === fun) {

onList.splice(i, 1);

return

}

}

}

},

//发布

publish(eventName, param) {

pushLog("publish", eventName, null, param)

let onList = eventCenter[eventName];

if (onList) {

for (let i = 0; i < onList.length; i++) {

onList[i](param)

}

}

},

//显示日志

showLog(filter) {

filter = filter || (() => true);

let returnLog = log.filter(filter);

returnLog.forEach(x => {

let y = {};

for (let key in x) {

y[key] = x[key]

}

return y

});

return returnLog;

},

//显示事件中心

showEventCenter(eventName) {

let selectEM = eventName ? eventCenter[eventName] : eventCenter, returnEM = {};

for (let key in selectEM) {

returnEM[key] = [];

selectEM[key].forEach(x => {

returnEM[key].push(x)

});

}

return returnEM

}

}

}();

如果有看我上一篇文章中事件监听实现的朋友应该对这个不部分代码有一种熟悉的感觉,确实事件监听和发布订阅的实现非常的像。我主要多做的就是一个日志的拓展,保证了每次的动作都可以被监听和查看;

发布中心API

这个在上面是有的,但是因为上面的部分有一些同学是不看的,所以就在这里摘出来,方便这些同学了解发布中心的用法

/*

* log=[{

* index: Number, 日志编号(自增)

* type: String, 日志类型('subscribe','unsubscribe','publish')

* eventName: String, 事件名

* time: new Date(), 时间

* fun:Function 订阅/取订的方法(只有日志类型为'subscribe'或'unsubscribe'的才有)

* param:Object 触发事件时的参数(只有日志类型为'publish'的才有)

* }]

* eventCenter = {

* eventName:[Function,Function] //eventName即为事件名,其值为订阅方法列表

* }

* .subscribe(eventName, fun) 订阅 eventName:事件名 fun:订阅方法

* .unsubscribe(eventName, fun) 取订 eventName:事件名 fun:订阅方法

* .publish(eventName[,param]) 发布 eventName:事件名 param:事件参数

* .showLog([filter]) 日志展示 filter 过滤器,同数组的过滤器用法 返回过滤后的log

* .showEventCenter([eventName]) 事件中心 eventName 事件名 返回事件绑定的方法

* */

发布/订阅模式在异步中的应用

这里是重点,需要大家仔细看,理解了这段代码不光可以解决异步问题,还可以理解发布订阅者模式是如何应用的;

//发布者

let f1 = function () {

setTimeout(function () {

console.log("'done' 事件发布 参数:", 123);

subscribeCenter.publish("done", 123);

console.log("事件中心", subscribeCenter.showEventCenter());

console.log("f3 取订 'done'");

subscribeCenter.unsubscribe("done", f3);

setTimeout(function () {

console.log("'done' 事件发布 参数:", 233);

subscribeCenter.publish("done", 233);

console.log("事件中心", subscribeCenter.showEventCenter());

console.log("日志", subscribeCenter.showLog());

}, 100)

}, 100)

};

//订阅者

let f2 = function (param) {

console.log("f2 is running, param is", param);

};

//订阅者

let f3 = function (param) {

console.log("f3 is running, param is", param)

};

//订阅

console.log("f2 订阅 'done'");

subscribeCenter.subscribe("done", f2);

console.log("f3 订阅 'done'");

subscribeCenter.subscribe("done", f3);

//发布

f1();

先贴运行结果

bVbqV1K?w=645&h=449

在这里可以看到,该模式与事件监听模式非常相似,但是所有的发布都通过了同一个发布中心来控制,这样的话可以方便我们追踪整个事件的状态;

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_35253177/article/details/116012191

智能推荐

Node.js环境搭建(Centos7)_   笑起来像蒙娜丽莎的博客-程序员宅基地

1.安装nvm版本管理器(1)安装nvm(以下推荐第一种)wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash或者curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash注意:安装中出现的错误,如连接不上到github 、443 错误、或安装过成中更新nvm失败等。尝试如下:①

IntelliJ IDEA 的 2020 ,很牛皮!(破音)_程序员的成长之路的博客-程序员宅基地

程序员的成长之路互联网/程序员/成长/职场关注阅读本文大概需要 4.5 分钟。来源:www.oschina.net/news/112204/intellij-platform-road...

变量、作用域和内存问题_奋飛的博客-程序员宅基地

下述内存主要讲述了《JavaScript高级程序设计(第3版)》第4章关于“变量、作用域和内存问题”。JavaScript变量松散类型的本质,决定了它只是在特定时间用于保存特定值的一个名字而已。 (1)基本类型的值在内存中占据固定大小的空间,因此会保存在栈内存中; (2)引用类型的值是对象,保存在堆内存中。 PS: 堆内存:随意存储,一般由程序员分配释放,或者程序结束时有OS回收。 栈内存

用友软件显示系统加密服务器,用友云主机指向加密服务器_王希亚的博客-程序员宅基地

用友云主机指向加密服务器 内容精选换一换主机迁移服务是一种P2V/V2V迁移服务,可以帮您把X86物理服务器或者私有云、公有云平台上的虚拟机迁移到华为云弹性云服务器上,从而帮助您轻松地把服务器上的应用和数据迁移到华为云。主机迁移服务的工作原理如下,其中第1步、第3步和第7步需要用户操作,其余步骤由主机迁移服务自动完成。用户在源端服务器上安装迁移Agent。源端服务器上的迁移Ag专属主机搭载了华为云...

php+clean+code,Clean Code PHP 代码简洁之道_金刚汤圆的博客-程序员宅基地

介绍来自Robert C. Martin的书Clean Code的软件工程原理, 适用于PHP。这不是样式指南。这是在PHP中生产可读,可重用和可重构软件的指南。并非必须严格遵循本文中的每个原则,而且将被普遍接受的原则甚至更少。这些只是准则,仅此而已,但它们是由Clean Code的作者在多年的集体经验中整理而成的。尽管许多开发人员仍然使用PHP 5,但本文中的大多数示例仅适用于PHP 7.1+。...

php 打开报错提示,php 启动时报错的解决方法_小宏i的博客-程序员宅基地

php 启动报错:复制代码 代码示例:[[email protected] lnmp]# service php-fpm startStarting php-fpm eAccelerator: Could not allocate 67108864 bytes, the maximum size the kernel allows is 33554432 bytes. Lower the amount of mem...

随便推点

macaca之全局路径_weixin_30883311的博客-程序员宅基地

废话连篇之前刚进行macaca环境配置的时候,直接安装在系统盘C盘内,虽然所占内存不多,但还是有点强迫症想着将其安装在其他磁盘内,所以就找了一些方法,记录下来。实际操作安装好nodejs后就可以进行全局路径的设置,主要使用两个指令,一个主文件,一个是缓存文件:npm config set prefix "***\node_global"npm config set cac...

基于jquery和svg超炫的网页动画_weixin_33908217的博客-程序员宅基地

今天给大家分享一款基于jquery和svg超炫的网页动画。这款动画效果非常炫。下面还有重播、慢速、和反向动画按钮。效果非常漂亮。一起看下效果图:在线预览   源码下载实现的代码。html代码: &amp;lt;div id=&quot;intro&quot;&amp;gt; &amp;lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;htt...

2020.6.21-2020.7.6学习笔记_时间~过客的博客-程序员宅基地

1.基于c语言的AT89S521小车学习笔记:调零代码while(1){P1_0=1;P1_1=1;Delay1500us();P1_0=0;P1_1=0;Delay20ms();}只要将上面的代码中的Delay1500us()修改成延时函数Delay1300us()即可;将Delay1500us()修改成Delay1700us();前进while(1){P1_0=1;Delay1700us();//后退则是这个Delay1300us();P1_0=0;P1_1

搭建Postfix+Dovecot邮件收发系统_weixin_33874713的博客-程序员宅基地

摘要: 搭建Postfix+Dovecot邮件收发系统服务器信息系统:CentOS 6.5 minimal版本主机:虚拟机虚拟机IP:192.168.128.128/24宿主IP:10.1.79.24/24安装postfix注意:CentOS 7实际上已经用postfix+Sasl2代替sendmail了,因此无需安装。1.移除sendmail安装完成还需要替换系统自带的se...

雨天-一万个理由-LRC歌词下载_zhengjianyang1的博客-程序员宅基地

一万个理由雨天-一万个理由-LRC歌词下载一万个理由-LRC歌词下载LRC歌词下载](https://www.nnbbs.cc/):[一万个理由LRC歌词下载歌词雨天-一万个理由-LRC歌词下载一万个理由-LRC歌词下载歌曲:一万个理由歌手:雨天.男专辑:遇情2时长:224sLRC歌词下载:一万个理由LRC歌词下载歌词[ti:一万个理由][ar:郑源][al:真的用心良苦][00:01.12] 一万个理由[00:03.40]词/曲:龙军[00:06.29][00:16.08]

css3 性能优化之 will-change 属性_Luckyzhoufangbing的博客-程序员宅基地

(一)含义will-change,顾名思意“我要变形了,它的作用是“提高浏览器的页面渲染性能”。当我们通过某些行为(点击、移动或滚动)触发页面进行大面积绘制的时候,浏览器往往是没有准备的,只能被动使用CPU去计算与重绘,由于没有事先准备,应付渲染够呛,于是掉帧,于是卡顿。而will-change则是真正的行为触发之前告诉浏览器:“浏览器同学,我待会儿就要变形了,你心理和生理上都准备准备”。于是乎,浏览器同学把GPU给拉上了,从容应对即将到来的变形。CPU:中央处理器GPU:图形处理器(专

推荐文章

热门文章

相关标签