原生js实现发布订阅PubSub

最新推荐文章于 2022-11-07 15:05:09 发布

攻魔师南宫那月

最新推荐文章于 2022-11-07 15:05:09 发布

阅读量159

点赞数

文章标签： javascript 原型模式

本文链接：https://blog.csdn.net/minamiyanastuki/article/details/124984571

版权

本文探讨了如何使用原生JavaScript实现发布订阅模式（PubSub），详细解释了其实现原理和应用场景，帮助开发者更好地理解和应用这一设计模式。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="button" type="button">按钮</button>
		<button id="button2" type="button">取消监听</button>
	</body>
</html>
<script type="text/javascript">
	class PubSub {
		constructor() {
			this.eventList = []
		}
		static createId() {
			return Symbol(Math.random())
		}
		static off(names, by) {
			names.forEach(tragets => {
				const combineTargets = Array.isArray(tragets) ? [...tragets] : [tragets]
				combineTargets.forEach(target => {
					this.eventList = this.eventList.filter(e => e[by] !== target)
				})
			})
		}
		on(name, fn) {
			const id = this.constructor.createId()
			const e = {
				name,
				fn,
				id
			}
			this.eventList.push(e)
			return id