发布订阅模式简单应用

最新推荐文章于 2022-10-14 11:25:19 发布

FE_BODY

最新推荐文章于 2022-10-14 11:25:19 发布

阅读量299

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_42289162/article/details/106479323

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>发布订阅模式</title>
	</head>
	<body>
		<button type="button">点击我啦！</button>
		<script type="text/javascript">
					class Sub{
						constructor() {
						    this.$pond=[] //创建一个事件池
						}
						// 向事件池添加一个方法
						add(fun){
							let flag=this.$pond.some(item=>{ //去重 不能向事件池中 添加同一个方法
								return item===fun
							})
							!flag ? this.$pond.push(fun) : null
						}
						// 删除事件池中的方法
						remove(fun){
							let $pond=this.$pond;
							for(let i=0;i<$pond.length;i++){
								let item=$pond[i]
								if(item === fun){
									$pond[i] = null
									break
								}
							}
						}
						// 通知 事件池中的方法一次执行
						fire(...args){
							let $pond=this.$pond;
							for(let i=0;i<$pond.length;i++){
								let item=$pond[i]
								if(typeof item !== "function"){ //事件池中的方法必须是函数
									$pond.splice(i,1)
									i--;
									continue
								}
								item(...args)
								// item.call(this,...args)
							}
						}
					}
				let pond=new Sub()
				document.querySelector("button").onclick=function(ev){
					pond.fire(ev)
				}
				function fn1(){
					console.log(1)
				}
				function fn2(){ 
					console.log(2)
				}
				function fn3(){
					console.log(3)
				}
				function fn4(ev){
					console.log(ev)
				}
				pond.add(fn1)
				pond.add(fn2)
				pond.add(fn3)
				pond.add(fn4)
		</script>
		
	</body>
</html>

FE_BODY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
发布订阅模式简单应用

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>发布订阅模式</title> </head> <body> <button type="button">点击我啦！</button> <script type="text/javascript"> class Sub{
复制链接

扫一扫