当前位置：首页 > 文章列表 > 文章 > 前端 > 观察者模式实战解析与应用

观察者模式实战解析与应用

2026-01-08 19:25:34 0浏览收藏

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《观察者模式实战：JavaScript设计模式解析》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

观察者模式是一种一对多的依赖关系设计模式，当主题对象状态改变时，所有依赖它的观察者都会收到通知并自动更新。其核心角色包括发布者（Subject）和观察者（Observer），发布者维护观察者列表并提供添加、删除及通知接口，观察者实现更新方法以响应通知。JavaScript中可通过类手动实现该模式，常用于事件系统、状态管理和组件通信等场景。例如，自定义事件总线或简化版状态管理均可基于此模式构建。与发布订阅模式相比，观察者模式中发布者与观察者直接关联，耦合度较高，而发布订阅通过中间调度层解耦，更为松散。掌握该模式有助于提升代码的可维护性和模块化程度。

JavaScript设计模式_观察者模式实战

观察者模式在JavaScript中是一种非常实用的设计模式，特别适合处理对象间的依赖关系。当一个对象的状态发生变化时，所有依赖它的对象都会自动收到通知并更新。这种松耦合的机制广泛应用于事件系统、状态管理以及前端框架中。

什么是观察者模式

观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时会通知所有观察者，使它们能够自动更新。

核心角色有两个：

发布者（Subject）：维护观察者列表，提供添加、删除和通知观察者的接口。
观察者（Observer）：实现一个更新方法，在被通知时执行相应逻辑。

手动实现一个观察者模式

下面是一个简洁但完整的观察者模式实现：

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

  // 添加观察者
  addObserver(observer) {
    this.observers.push(observer);
  }

  // 移除观察者
  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== 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 subject = new Subject();

const user1 = new Observer("用户A");
const user2 = new Observer("用户B");

subject.addObserver(user1);
subject.addObserver(user2);

subject.notify("系统即将升级！"); 
// 输出：
// 用户A 收到通知: 系统即将升级！
// 用户B 收到通知: 系统即将升级！

subject.removeObserver(user1);
subject.notify("新消息来了！");
// 只有用户B会收到

在实际项目中的应用场景

观察者模式非常适合用于解耦组件之间的通信，比如：

自定义事件系统：可以封装一个全局事件总线，组件之间通过订阅和发布事件进行通信。
状态管理简化版：类似Vue或Redux的部分原理，数据变更后自动刷新视图。
表单验证提示：输入框变化时通知多个提示模块更新状态。

举个简单的事件总线例子：

const EventBus = {
  events: {},

  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  },

  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  },

  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
};

// 使用
EventBus.on('login', user => {
  console.log('欢迎你，' + user.name);
});

EventBus.emit('login', { name: 'Alice' });