从东京奥运会看js设计模式之发布订阅模式

开篇废话：本篇文章介绍发布-订阅模式，想必很多人听说过有一种观察者模式，网上既有资料说这是两种不同的设计模式，也有说这是一种模式，我倾向于认同他们是同一种设计模式。不必过于纠结

开篇楔子：东京奥运会已经开幕有一段时间了，在本次奥运会上我国的奥运健儿们取得了非常不错的成绩，截止至目前(2021.08.05)，我国取得了34金24银16铜，在上班时间也时刻关注着比赛详情，但对于打工人来说摸鱼看完整比赛可能做不到，但是偶尔刷新查看一下奥运奖牌榜的事没少干。然后我就在想要是谁能及时通知我奖牌数的变化就好了，假设csdn提供了奖牌数据，我点击关注订阅后，然后csdn实时给我推送最新的奖牌榜，这不就是一个订阅-发布模式吗

用代码实现发布-订阅模式，获取奥运奖牌数，主要有三步

保存所有订阅信息， eventList
提供订阅方法，将订阅事件保存到eventList中
提供一个发布方法，将所有订阅的事件发布出去

class Emitter {constructor() {// 保存所有订阅的事件this.eventList = {};}// 订阅事件：事件名称，事件处理函数subscribe(eventName, fn) {if (!this.eventList[eventName]) {this.eventList[eventName] = [];}this.eventList[eventName].push(fn);}// 发布事件：事件名称，参数publish(eventName, ...args) {const fns = this.eventList[eventName];if (!fns || fns.length === 0) {return;}fns.forEach((fn) => {fn.apply(this, args);});}
}

以上就是一个简单的发布订阅模式的实现，写一段测试代码

const csdn = new Emitter();
csdn.subscribe("china-medal", function (medals) {console.log("中国奖牌数：", medals);
});csdn.publish("china-medal", "34金24银16铜");
csdn.publish("china-medal", "43金30银27铜");

输出结果：

中国奖牌数： 34金24银16铜
中国奖牌数： 43金30银27铜

如果奥运会结束，我就不需要再关注奖牌数，这时需要一个取消订阅事件remove

class Emitter {// 省略其他代码xxxremove(eventName, fn) {const fns = this.eventList[eventName];if (!fns || fns.length === 0) {return;}const idx = fns.findIndex((item) => item === fn);fns.splice(idx, 1);}
}

继续来一段测试代码，测试能否正确取消订阅

const csdn = new Emitter();
const fn = function (medals) {console.log("中国奖牌数：", medals);
};
csdn.subscribe("china-medal", fn);csdn.publish("china-medal", "34金24银16铜");
csdn.publish("china-medal", "43金30银27铜");setTimeout(() => {csdn.remove("china-medal", fn);csdn.publish("china-medal", "奥运会结束啦，不能发布了");
}, 1000);

还不错，这个发布订阅功能已经比较齐全了。

如果想看更多有关发布订阅模式的应用，请看我以前的文章：

vue2.x的数据更新视图过程也是利用到了发布-订阅模式，感兴趣的可以观看我的另一文章极简系列—vue 响应式实现(2.x)
vue表单组件也使用了发布-订阅模式，感兴趣的戳这里：极简系列—vue3.x表单组件form

从东京奥运会看js设计模式之发布订阅模式相关推荐

JavaScript设计模式之发布-订阅模式（观察者模式）-Part1
<JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...
设计模式-观察者模式发布/订阅模式
设计模式-观察者模式发布/订阅模式代码观察者接口 public interface IHanFeiZi{// 当吃早饭时public void havBreakFast();// 进行娱乐活动时 ...
【设计模式】692- TypeScript 设计模式之发布-订阅模式
前言在之前两篇自测清单中,和大家分享了很多 JavaScript 基础知识,大家可以一起再回顾下~ 本文是我在我们团队内部"「现代 JavaScript 突击队」"分享的一篇内容 ...
Javascript设计模式之发布-订阅模式
简介发布-订阅模式又叫做观察者模式,他定义了一种一对多的依赖关系,即当一个对象的状态发生改变的时候,所有依赖他的对象都会得到通知. 回忆曾经作为一名前端开发人员,给DOM节点绑定事件可是再频繁不过 ...
浅谈js下的发布订阅模式(观察者模式)
场景我们在做地图引擎的时候,会经常扩展一些插件,有些插件会动态根据地图渲染时机等做一些计算处理重新渲染等,这时候地图渲染时机如何通知到插件,就可以用到这个发布订阅模式来进行. 定义发布订阅模式,也 ...
JavaScript 设计模式之发布-订阅模式（下）
发布-订阅模式的通用实现现在我们在上一篇文章中已经看到了如何让售楼处拥有接受订阅和发布事件的功能.假设现在小明又去另一个售楼处买房子,那么这段代码是否必须在另一个售楼处对象上重写一次呢,有没有办法可 ...
JavaScript 设计模式之发布-订阅模式（上）
什么是发布订阅模式? 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在JavaScript开发中,我们一般用事件模型来替 ...
JS 基础篇(发布订阅模式)
发布订阅模式的js文件 //发布者 var eventObj = {//缓存列表,存放订阅者的信息list:{},//添加订阅listen:function(key,fn){if(!this.list ...
设计模式之发布订阅模式
发布--订阅模式简介发布--订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,多个观察者对象都依赖于一个目标对象,当目标对象的状态发生变化时,所有依赖于这个对象的观察者对象都会收到通知. ...

从东京奥运会看js设计模式之发布订阅模式

从东京奥运会看js设计模式之发布订阅模式相关推荐

最新文章

热门文章