js 发布订阅模式应用场景自己手写一个简易的发布订阅模块

最新推荐文章于 2025-11-05 13:19:35 发布

原创

最新推荐文章于 2025-11-05 13:19:35 发布 · 768 阅读

0 ·

CC 4.0 BY-SA版权

本文通过示例介绍了发布订阅模式的基本实现，包括添加订阅、发布消息和取消订阅的功能。通过优化，解决了消息发送给所有订阅者的问题，实现了按标识符定向发送。此外，还展示了发布订阅模式在解决异步调用中强耦合问题的应用，以及在Vue组件间通信的实例。

在这里插入图片描述

我们先写一个简单的发布订阅：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>发布订阅模式</title>
</head>
<body>
	<script type="text/javascript">
		var shopObj = {
     
     } // 定义发布者 卖家对象
		shopObj.list = [] // 缓存列表 存放订阅函数

		// 添加订阅者
		shopObj.listen = function (fn) {
     
     
			shopObj.list.push(fn)
		}

		// 发布消息
		shopObj.trigger = function () {
     
     
			for (var i=0, fn; fn = this.list[i++];) {
     
     
				fn.apply(this, arguments)
			}
		}

		// 添加第一个订阅者
		shopObj.listen(function(color, size) {
     
     
			console.log(`订阅者1：颜色是${ 
       color}, 尺码是${ 
       size}`)
		})

		// 添加第二个订阅者
		shopObj.listen(function(color, size) {
     
     
			console.log(`订阅者2：颜色是${ 
       color}, again尺码是${ 
       size}`)
		})

		// 发布第一个消息 本意是要通知第1个订阅者 橘黄色 42尺码的货到了
		shopObj.trigger('orange', 42)
		// 发布第二个消息 本意是要通知第2个订阅者 黑色 39尺码的货到了
		shopObj.trigger('black', 39)

	</script>
</body>
</html>