观察者模式

罗天旭大约 3 分钟约 783 字

定义

观察者模式（Observer Pattern）定义了一种一对多的关系，当⼀个对象的状态发⽣改变时，所有依赖于它的对象都将得到通知，使得它们能够自动更新自己。

在前端开发中，观察者模式是一种常用的设计模式，用于建立对象之间的一对多依赖关系。在观察者模式中，有两种主要角色：观察者（Observer）和被观察者（Subject）。

观察者（Observer）：观察者是订阅了被观察者的状态变化，并在状态变化时进行相应操作的对象。在前端开发中，观察者通常是一些 UI 组件或模块，它们会监听某个数据或状态的变化。

被观察者（Subject）：被观察者是维护一组观察者对象列表，并提供注册、移除和通知观察者的方法。当被观察者的状态发生改变时，会通知所有订阅者进行相应的更新操作。

观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯。

优缺点

优点

解耦：观察者模式实现了发布者与订阅者之间的解耦，发布者和订阅者之间可以互相独立地变化，不会影响到对方。
扩展性：可以方便地添加新的观察者，使得系统可以灵活地适应需求变化。
可重用性：观察者模式将发布者与订阅者解耦，可以使得不同的订阅者对象可以复用。
实时通知：当发布者状态发生改变时，所有订阅者都会实时接收到通知，保持数据的同步性。

缺点

内存泄漏：如果订阅者未正确取消订阅或销毁，可能会导致内存泄漏问题，因为订阅者对象仍然存在。
关注过多：由于所有订阅者都会收到发布者的通知，有时候可能会收到一些不感兴趣的信息，导致订阅者关注的事件过多。
性能开销：当订阅者数量庞大时，发布者每次发布通知时需要遍历所有订阅者，可能会引起性能问题。

实现

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

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

    remove(observer) {
        this.observers = this.observers.filter((item) => item !== observer)
    }

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

class Observer {
    constructor(name) {
        this.name = name
    }
    update() {
        console.log('update', this.name)
    }
}

const subject = new Subject()
const observer1 = new Observer('kerwin')
const observer2 = new Observer('tiechui')

subject.add(observer1)
subject.add(observer2)

setTimeout(() => {
    subject.remove(observer1)
}, 1000)
setTimeout(() => {
    subject.notify()
}, 2000)

优势目标者与观察者，功能耦合度降低，专注自身功能逻辑；观察者被动接收更新，时间上解耦，实时接收目标者更新状态。
缺点观察则会模式虽然实现了对象间依赖关系的低耦合，但却不能对事件通知进行细分管控，如“筛选通知”，“指定主题事件通知”