什么是發(fā)布訂閱模式歇父？
當(dāng)訂閱的事件被觸發(fā)時(shí)乔夯，訂閱事件的對(duì)象都會(huì)收到通知
-
舉例
- 比如你去買奶茶郎哭，下單的時(shí)候會(huì)根據(jù)點(diǎn)餐系統(tǒng)就行排號(hào)，然后你可以去座位那等著片择。
- 奶茶好了之后，工作人員會(huì)點(diǎn)擊奶茶制作完成通知顧客骚揍，點(diǎn)餐系統(tǒng)就會(huì)通知你發(fā)送到手機(jī)提醒你來(lái)取
-
比如
- js中的 addEventListener
- vue中的 eventBus
- image.png
例子
interface Face { on: (name: string, fn: Function) => void emit: (name: string, ...args: Array<any>) => void off: (name: string, fn: Function) => void once: (name: string, fn: Function) => void } interface Arr { [key: string]: Array<Function> } class Dispath implements Face { arr: Arr constructor() { this.arr = {} } on(name: string, fn: Function) { const callback = this.arr[name] || [] callback.push(fn) this.arr[name] = callback // console.log(this.arr) // { post: [ [Function (anonymous)] ] } } emit(name: string, ...args: Array<any>) { let eventName = this.arr[name] if (eventName) { eventName.forEach(fn => { fn.apply(this, args) }) } else { console.error(`名字錯(cuò)了${name}`) } } off(name: string, fn: Function) { let eventName = this.arr[name] if (eventName && fn) { let index = eventName.findIndex(i => i === fn) eventName.splice(index) } else { console.error(`名字錯(cuò)了${name}`) } } once(name: string, fn: Function) { let fake = (...args: Array<any>) => { fn.apply(this, args) this.off(name, fake) } this.on(name, fake) } } const d = new Dispath() d.on('ys', (...args: Array<any>) => { console.log('on', args) }) // d.once('ys', (...args: Array<any>) => { // console.log('once', args) // }) const fn4 = (...args: Array<any>) => { console.log('ys', args) } // d.off('ys', fn4) // d.on('ys', fn4) d.emit('ys', '亞索', { name: '亞索', age: 12 }) // d.emit('ys', '瑞雯', { name: '瑞雯', age: 20 })
