手写观察者模式和发布订阅模式

最新推荐文章于 2024-12-09 22:28:56 发布

原创最新推荐文章于 2024-12-09 22:28:56 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#观察者模式

本文介绍了面向对象设计中的观察者模式，涉及目标对象(Subject)和观察者(Observer)的角色，以及如何维护和通知Observer。同时，详细讲解了发布订阅模式，包括发布者(Publisher)、事件调度中心(EventChannel)和订阅者(Subscriber)的角色及其交互过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- 观察者模式
- 发布订阅模式

观察者模式

在观察者模式中，只有两种主体：目标对象 (Subject) 和观察者 (Observer)。在观察者模式中，Subject对象拥有添加、删除和通知一系列 Observer 的方法等，而 Observer 对象拥有 update 更新方法等。在 Subject对象添加了一系列 Observer 对象之后，Subject 对象则维持着这一系列 Observer 对象，当有关状态发生变更时Subject 对象则会通知这一系列 Observer 对象进行更新。

        class Subject {
            constructor() {
                this.observers = []
            }

            add(observer) {
                this.observers.push(observer)
            }

            notify() {
                this.observers.forEach(observer => {
                   
                        observer.update()
                    
                })
            }

            remove(observer) {
                const idx = this.observers.findIndex(itm => itm === observer)
                if (idx !== -1) {
                    this.observers.splice(idx, 1)
                }
            }
        }

        // 观察者
        class Observer {
            constructor(name) {
                this.name = name
            }

            update() {
                console.log(`${this.name} updated`)
            }
        }

        const subject = new Subject()
        const o1 = new Observer('Nina')
        const o2 = new Observer('Jack')

        subject.add(o1)
        subject.add(o2)

        console.log('第一次通知：')
        subject.notify()

        subject.remove(o1)

        console.log('删除 Nina 后，再次通知：')
        subject.notify()

发布订阅模式

基于一个事件（主题）通道，希望接收通知的对象 Subscriber 通过自定义事件订阅主题，被激活事件的对象 Publisher
通过发布主题事件的方式通知各个订阅该主题的 Subscriber 对象，这就是发布订阅模式。
发布订阅模式中有三个角色：发布者Publisher ，事件调度中心 Event Channel ，订阅者 Subscriber 。

class EventBus {
            constructor() {
                this.events = {}
            }
            on(type, fn) {
                if (!this.events[type]) {
                    this.events[type] = []

                } else {
                    this.events[type].push(fn)

                }

            }
            emit(type, ...args) {
                if (this.events[type]) {
                    this.events[type].forEach(cb => cb(...args))
                }


            }
            off(type){
                this.events[type] = []

            }
        }