发布订阅与观察者模式

投的e签宝，做过的一个笔试题，又是被吊打的一天，将就补习一下前端基本的设计模式

发布订阅模式在框架中使用的很多，如许多的状态管理库，dva，zustand，pinia，也如事件监听这些

观察者模式

主要是角色观察者与被观察者

观察者:一个身份证明，一个触发的方法

被观察者：状态，观察者队列（记录下观察者），改变状态，添加观察者，删除观察者

interface ObserveInter {

name: string

fn: (state: any) => any

}

class Observe {

constructor(name:string,fn=()=>{}){

this.name=name;

this.fn=fn;

}

}//观察者

class Subject {

constructor(state: any) {

this.state = state;

this.observeList = new Set()

}

setState(newState: any) {

this.state = newState

this.obertveList.forEach((item: ObserveInter) => item.fn(newState))

}

addObserve(observe: ObserveInter) {

this.observeList.add(observe)

}

deleteObserve(observe:ObserveInter) {

this.observeList.delete(observe)

}

}//被观察者

主要是被观察者的实现使用set去存储的观察者队列，操作比较方便，避免在添加观察者时重复

发布订阅模式：消息队列，向消息队列里添加内容，删除消息队列里的内容，触发消息队列里的内容

class Observe {

constructor() {

(this as any).message = {}

}

on(type: string | number, fn: Function) {

if (!this.message[type])

this.message = []

this.message[type].push(fn)

}

off(type: string | number, fn: Function) {

if (this.message[type])

delete this.message[type]

return

}

trigger(type: string | number) {

if (!this.message[type])

return

this.message[type].forEach(item => item())

}

}