JS 设计模式之发布订阅模式

发布订阅模式和观察者模式很像,他们的主要区别就是发布订阅模式在中间加了一层,完成对订阅者的通知

Broker.js(中间层)

js 复制代码
class Broker {
	constructor() {
		// 存储订阅的频道和订阅者
		this.infoMap = new Map();
	}
	// topic为订阅的主题
	getSubscriber(topic) {
		return this.infoMap.get(topic) || [];
	}
	subscribe(topic, sub) {
		const subscribers = this.getSubscriber(topic);
		subscribers.push(sub);
		this.infoMap.set(topic, subscribers);
	}
	unsubscribe(topic, sub) {
		const subscribers = this.getSubscriber(topic);
		const index = subscribers.indexOf(sub);
		if (index > -1) {
			subscribers.splice(index, 1);
		}
		this.infoMap.set(topic, subscriber);
	}
	notifySubscribers(topic, msg) {
		const subscribers = this.getSubscriber(topic);
		subscribers.forEach((sub) => {
			sub.getMsg(topic, msg);
		});
	}
}

Publisher.js (发布者)

js 复制代码
class Publisher {
	constructor(broker) {
		this.broker = broker;
	}
	publish(topic, msg) {
		console.log(`${topic}已经发布了新内容----${msg}`);
		this.broker.notifySubscribers(topic, msg);
	}
}

Subscriber.js

js 复制代码
class Subscriber {
	constructor(broker) {
		this.broker = broker;
	}
	subscribe(topic) {
		console.log("订阅成功");
		// 通过中间层对发布者进行订阅
		this.broker.subscribe(topic, this);
	}
	unsubscribe(topic) {
		console.log("取消订阅成功");
		// 通过中间层取消对发布者的订阅
		this.broker.unsubscribe(topic, this);
	}
	getMsg(topic, msg) {
		console.log(`${topic}主题更新了--${msg}`);
	}
}

使用`

html 复制代码
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<script src="./Broker.js"></script>
		<script src="./Publisher.js"></script>
		<script src="./Subscriber.js"></script>
		<script>
			const broker = new Broker();
			const sub1 = new Subscriber(broker);
			const sub2 = new Subscriber(broker);
			const pub = new Publisher(broker);
			sub1.subscribe("恐怖片");
			sub2.subscribe("恐怖片");
			pub.publish("恐怖片", "恐怖片更新了");
		</script>
	</body>
</html>
相关推荐
剑亦未配妥9 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师6 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny076 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
Magnetic_h7 小时前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa
yddddddy7 小时前
css的基本知识
前端·css
昔人'7 小时前
css `lh`单位
前端·css
前端君8 小时前
实现最大异步并发执行队列
javascript
A阳俊yi8 小时前
设计模式——结构型模式
设计模式
Nan_Shu_6149 小时前
Web前端面试题(2)
前端
知识分享小能手9 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue