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

矫情吗；* 2022-10-04 15:46 205阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5dzMzOTAxOTk_size_16_color_FFFFFF_t_70]

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

<!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>

![在这里插入图片描述][20210711103134316.png]

## 可以看到，已经可以订阅消息，并且发布消息，但是有个问题，就是发布消息的时候，把消息发送给所有订阅者了,怎么才能解决这个问题呢？ ##

> 我们回忆一下，我们在使用发布订阅的时候，是不是这样使用的，要传入一个标识：  
> ![在这里插入图片描述][2021071110275490.png]  
> 然后在触发时候，和订阅时候传入的标识对应上，是不是就能解决这个问题了

我们这样改造： 添加订阅时候，传入一个标识符key， 如果缓存列表里不存在对应的`list[key]`，那么就创建一个对应的`list[key]`初始值是一个空数组\[\]

如果有的话，直接把回调函数push进入对应的`list[key]`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5dzMzOTAxOTk_size_16_color_FFFFFF_t_70 1]  
完整代码：

<!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>发布订阅模式2-优化</title>
 </head>
 <body>
 	<script type="text/javascript">
 		var shopObj = {} // 定义发布者 卖家对象
 		shopObj.list = [] // 缓存列表 存放订阅函数
 	// 添加订阅者
 	shopObj.listen = function (key, fn) {
 		// 没有对应key的话就创建一个数组
 		if (!this.list[key]) {
 			this.list[key] = []
 		}
 		// 然后再把回调函数push进list[key]
 		shopObj.list[key].push(fn)
 	}
 
 	// 发布消息
 	shopObj.trigger = function () {
 		// 获取对应的key
 		var key = Array.prototype.shift.call(arguments) // 这里因为arguments是一个类数组 没有shift方法 需要借用
 		var fns = this.list[key]
 		if (!fns || fns.length === 0) {
 			return
 		}
 
 		for (var i=0, fn; fn = fns[i++];) {
 			fn.apply(this, arguments)
 		}
 	}
 
 	// 添加第一个订阅者dean
 	shopObj.listen('dean', function(color, size) {
 		console.log(`订阅者dean：颜色是${color}, 尺码是${size}的鞋子到货了！`)
 	})
 
 	// 添加第二个订阅者jing
 	shopObj.listen('jing', function(color, size) {
 		console.log(`订阅者jing：颜色是${color}, again尺码是${size}的鞋子到货了！`)
 	})
 
 	// 发布第一个消息 通知第dean 橘黄色 42尺码的鞋子到货了
 	shopObj.trigger('dean', 'orange', 42)
 
 
 	// 发布第二个消息 通知第jing 黑色 39尺码的货到了
 	shopObj.trigger('jing', 'black', 39)
 
 </script>

</body> 
</html>

/pre>

![在这里插入图片描述][20210711113325189.png]

## 我们优化一下代码，再添加一个取消订阅： ##

var event = { 
 list: [],
 listen: function(key, fn) { 
 // 没有对应key的话就创建一个数组
 if (!this.list[key]) { 
 this.list[key] = []
 }
 // 然后再把回调函数push进list[key]
 shopObj.list[key].push(fn)
 },
 trigger: function() { 
 // 获取对应的key
 var key = Array.prototype.shift.call(arguments)
 var fns = this.list[key]
 if (!fns || fns.length === 0) { 
 return
 }
 for (var i = 0, fn; fn = fns[i++];) {
 fn(...arguments)
 }

\},  
// 取消订阅  
remove: function(key, fn) \{   
var fns = this.list\[key\]  
if (!fns) \{   
return false  
\} else \{   
for (var i = fns.length \- 1; i >= 0; i–) \{   
var \_fn = fns\[i\]  
if (\_fn == fn) \{   
fns.splice(i, 1)  
\}  
\}  
\}  
\}  
\}

## 代码还可以用立即执行函数封装一下： ##

// 代码封装成立即执行函数
 var Event = (function() { 
 var list = [],
 listen,
 trigger,
 remove;
 listen = function(key, fn) { 
 // 没有对应key的话就创建一个数组
 if (!this.list[key]) { 
 this.list[key] = []
 }
 // 然后再把回调函数push进list[key]
 shopObj.list[key].push(fn)
 },
 trigger = function() { 
 // 获取对应的key
 var key = Array.prototype.shift.call(arguments)
 var fns = this.list[key]
 if (!fns || fns.length === 0) { 
 return
 }
 for (var i = 0, fn; fn = fns[i++];) {
 fn(...arguments)
 }
 },
 remove = function(key, fn) {
 var fns = this.list[key]
 if (!fns) {
 return false
 } else {
 for (var i = fns.length - 1; i >= 0; i--) {
 var _fn = fns[i]
 if (_fn == fn) {
 fns.splice(i, 1)
 }
 }
 }
 }

return \{   
listen,  
trigger,  
remove  
\}  
\})()

## 我们再看一下，发布订阅模式的使用场景： 解决异步调用中的强耦合问题： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5dzMzOTAxOTk_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5dzMzOTAxOTk_size_16_color_FFFFFF_t_70 3]

> 这种强耦合代码，缺点是，修改一个地方，其他地方都要跟着一起修改

使用发布订阅模式修改：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5dzMzOTAxOTk_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5dzMzOTAxOTk_size_16_color_FFFFFF_t_70 5]

## 我们接着在vue里面自己手写一个简易的发布订阅模块： ##

Main.vue

<style>

</style>

Son.vue

<template>
 <div>
 <h1>{ { content}}</h1>
 </div>
 </template>

<style>

</style>

pubsub2.js

\},  
remove = function (key, fn) \{   
var fns = list\[key\]  
if (!fns) \{   
return false  
\} else \{   
for (var i = fns.length \- 1; i >= 0; i–) \{   
var \_fn = fns\[i\]  
if (\_fn == fn) \{   
fns.splice(i, 1)  
\}  
\}  
\}  
\}  
return \{   
listen,  
trigger,  
remove  
\}  
\})()

export default Event

![在这里插入图片描述][20210711222728439.png]  
效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5dzMzOTAxOTk_size_16_color_FFFFFF_t_70 6]

转载：https://blog.csdn.net/dyw3390199/article/details/118651237?utm\_medium=distribute.pc\_feed\_v2.none-task-blog-personrec\_tag-6.pc\_personrecdepth\_1-utm\_source=distribute.pc\_feed\_v2.none-task-blog-personrec\_tag-6.pc\_personrec

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5dzMzOTAxOTk_size_16_color_FFFFFF_t_70]: /images/20221004/86149c7532aa4a509ee29e9880e1006b.png
[20210711103134316.png]: /images/20221004/f026c1a88f714d98bf5429c48c920a55.png
[2021071110275490.png]: /images/20221004/085a0810605843f98feccecc43e4de0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5dzMzOTAxOTk_size_16_color_FFFFFF_t_70 1]: /images/20221004/529f3a829c0841499a06564b38d00a7e.png
[20210711113325189.png]: /images/20221004/fd7ce389dd724002beace9f51a0fb5d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5dzMzOTAxOTk_size_16_color_FFFFFF_t_70 2]: /images/20221004/35057736225d46f598f8db682258a6bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5dzMzOTAxOTk_size_16_color_FFFFFF_t_70 3]: /images/20221004/548a75cc78db4fc29d40c046848c547a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5dzMzOTAxOTk_size_16_color_FFFFFF_t_70 4]: /images/20221004/e1c60737e3a44ae6a8c483ad2740d4b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5dzMzOTAxOTk_size_16_color_FFFFFF_t_70 5]: /images/20221004/7ca9a0a6d91444e48f0317fdc9730c02.png
[20210711222728439.png]: /images/20221004/ea40aec6aff445ac9c5b68f28f6b396d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5dzMzOTAxOTk_size_16_color_FFFFFF_t_70 6]: /images/20221004/59644cf6040e4771b6c5f6242c60bb0c.png