第二十一章 TypeScript（实战TS编写发布订阅模式）

概述

什么是发布订阅模式，其实小伙伴已经用到了发布订阅模式例如addEventListener，Vue evnetBus

都属于发布订阅模式

简单来说就是 你要和 大傻 二傻 三傻打球，大傻带球，二傻带水，三傻带球衣。全都准备完成后开始打球。

思维导图

首先 需要定义三个角色 发布者 订阅者 调度者

具体代码

on订阅/监听

emit 发布/注册

once 只执行一次

off解除绑定

// 1.什么是 发布订阅模式 他是设计模式的其中一种
//2. 面试经常问的 其次手写这个他的思想被人们广泛所使用
//3.有谁在用呢 vue2 eventBus $on监听 $emit派发
//4.electron ipcRenderer ipcMain 通讯
//5.Dom2 addEventListener removeEventListener
// @ts-ignore

// document.addEventListener("create", () => {
// 	console.log('点击率')
// },{
// 	once:true // 只触发一次
// })
//
// const e = new Event("create") // 订阅中心
//
// document.dispatchEvent(e)

// 实现once on emit off 订阅中心Map<事件的名称，[Function]订阅者集合>
interface I {
	events: Map<string, Function[]>
	once: (event: string, callcak: Function) => void // 触发一次订阅器
	on: (event: string, callcak: Function) => void // 订阅
	emit: (event: string, ...args: any[]) => void // 派发
	off: (event: string, callcak: Function) => void // 删除监听器
}

class Emitter implements I {
	events: Map<string, Function[]>
	
	constructor() {
		this.events = new Map()
	}
	
	once(event: string, callcak: Function) {
		// 1.创建一个自定义函数 通过on 触发 触发完之后立马通过off回收掉
		const cb = (...args: any[]) => {
			callcak(...args)
			this.off(event, cb)
		}
		this.on(event, cb)
	}
	
	on(event: string, callcak: Function) {
		// 证明存过了
		if (this.events.has(event)) {
			let callbackList = this.events.get(event)
			callbackList && callbackList.push(callcak)
		} else {
			// 否则就是第一次存
			this.events.set(event, [callcak])
		}
	}
	
	emit(event: string, ...args: any[]) {
		const callbackList = this.events.get(event)
		if (callbackList) {
			callbackList.forEach((fn) => {
				fn(...args)
			})
		}
	}
	
	off(event: string, callcak: Function) {
		const callbackList = this.events.get(event)
		if (callbackList) {
			callbackList.splice(callbackList.indexOf(callcak), 1)
		}
	}
}

const bus = new Emitter()
bus.on('message', (b: boolean, n: number) => {

})

bus.emit('message', false, 1)