前端常用的7大设计模式-观察者模式

概述

观察者模式（Observer Pattern）是一种行为型设计模式 ，定义了对象间的一种一对多的依赖关系 。当被观察对象（Subject）状态发生改变时，所有依赖它的观察者（Observers）都会自动收到通知并更新。这种模式也被称为发布-订阅模式的核心基础。

核心要素

Subject（目标）：维护观察者列表，提供订阅/取消订阅接口

Observer（观察者）：定义更新接口

ConcreteSubject/ConcreteObserver：具体实现类

观察者模式的使用场景

DOM事件监听机制
自定义事件处理
WebSocket消息推送
.....

那么观察者模式怎么实现的

js 复制代码

class Subject {
  constructor() {
    this.observers = new Set()
  }

  subscribe(observer) {
    this.observers.add(observer)
    return () => this.unsubscribe(observer)
  }

  unsubscribe(observer) {
    this.observers.delete(observer)
  }

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

class Observer {
  constructor(name) {
    this.name = name
  }

  update(data) {
    console.log(`[${this.name}] 收到的消息:`, data)
    // 执行具体业务逻辑
  }
}

// 使用示例
const newsPublisher = new Subject()
const user1 = new Observer('user1')
const user2 = new Observer('user2')

const unsubscribe = newsPublisher.subscribe(user1)
newsPublisher.subscribe(user2)

// 发布消息
newsPublisher.notify('开始发布消息')

// 取消user1的订阅
unsubscribe()

观察者模式的优缺点

优点

解耦观察者和被观察者互相不知道对方的存在

灵活一对多的形式，可以添加多个观察者

广播一次变化，通知所有相关方

缺点

内存泄漏：如果忘记取消订阅，观察者会一直存在

性能问题：观察者太多时，通知可能变慢

调试困难：通知链路过长时，问题难追踪

总结

观察者模式，说白了就是我变了，马上通知你的设计套路。想象一下，你关注了一个公众号（Subject），每次它发新文章（状态变化），所有粉丝（Observers）都会收到推送通知。这种一对多的通知机制，就是观察者模式的核心。虽然好用，但要注意避免内存泄漏和性能问题。在前端开发中，它无处不在，理解它，你就掌握了现代前端框架的"响应式"秘密