观察者模式 ~

DGogoing

已于 2023-08-08 04:31:10 修改

阅读量648

点赞数

文章标签：设计模式观察者模式 javascript 前端

于 2023-07-17 21:29:46 首次发布

本文链接：https://blog.csdn.net/DGogoing/article/details/131775139

版权

观察者模式是一种让多个对象（观察者）订阅某单一对象（被观察者）的状态变化，当被观察者状态改变时，会通知所有观察者进行更新。这种模式常用于DOM事件处理、前端框架的生命周期、异步操作如Promise回调、Node.js的流处理等场景。

摘要由CSDN通过智能技术生成

概念

观察者模式是一种设计模式，也被称为发布 / 订阅者模式或事件模式；
用于在对象之间建立一种一对多的依赖关系，当发生改变时，所有依赖于它的对象都会得到通知并自动更新
如：DOM事件、vue / React 生命周期、各种异步回调 ~ 定时器、Promise.then、nodeJs 流式读取、端口监听

演示

被观察者（Subject）可以理解为饮品店的吧台
观察者（Observer）：可以理解为饮品店的顾客

// 被观察者
class Subject {
    private state = 0 // 状态
    private observers: Observer[] = [] // // 观察者
    // 获取状态
    getState() {
        return this.state
    }
    // 修改状态
    setState(newState: any) {
        this.state = newState
        this.notify()
    }
    // 添加观察者
    attach(ob: Observer) {
        this.observers.push(ob)
    }
    // 删除观察者
    deleteOb(ob: Observer) {
        this.observers = this.observers.filter(item => item.id != ob.id)
    }
    // 通知观察者
    private notify() {
        for (let item of this.observers) {
            item.update(this.state)
        }
    }
}
// 观察者
class Observer {
    name: string
    subject: Subject
    id: string
    constructor(subject: Subject, id: string, name: string) {
        this.subject = subject
        this.subject.attach(this)
        this.id = id // 唯一标识
        this.name = name // 自身属性
    }
    // 更新
    update(state: number) {
        console.log(`${this.name} 收到发布通知... ${state}`)
    }
}

const sub = new Subject()
const o1 = new Observer(sub, '001', 'zhangsan')
const o2 = new Observer(sub, '002', 'lisi')
const o3 = new Observer(sub, '003', 'wangwu')
sub.deleteOb(o1)
sub.setState('hello')