观察者模式与发布-订阅模式的对决

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

摘要：

本文将深入探讨观察者模式和发布-订阅模式，分析它们的异同、应用场景以及优缺点。通过了解这两种模式，我们可以更好地应对不同的开发需求，选择合适的模式来实现代码的解耦和模块化。

引言：

在软件工程中，为了实现代码的解耦和模块化，我们常常会用到一些设计模式。观察者模式和发布-订阅模式是最常用的两种模式，它们在某些方面有着相似之处，但在实际应用中又存在差异。本文将详细介绍这两种模式，帮助大家在实际开发中做出合适的选择。

正文：

1️⃣ 观察者模式

观察者模式是一种行为型设计模式，它定义了一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知并自动更新。

• 优点：实现了对象之间的解耦，提高代码的可维护性和可扩展性。
• 缺点：观察者和被观察者之间的高度耦合，可能导致代码的复杂性增加。

观察者模式是一种设计模式，允许一个对象（称为“主题”）注册一个或多个其他对象（称为“观察者”）以便在某个事件发生时被通知。

以下是一个简单的JavaScript观察者模式代码示例：

// 主题构造函数
function Subject() {
  this.observers = []; // 数组用于存放观察者对象
}

// 注册观察者
Subject.prototype.subscribe = function(observer) {
  this.observers.push(observer);
};

// 移除观察者
Subject.prototype.unsubscribe = function(observer) {
  const index = this.observers.indexOf(observer);
  if (index > -1) {
    this.observers.splice(index, 1);
  }
};

// 通知所有观察者
Subject.prototype.notify = function(data) {
  this.observers.forEach(observer => observer.update(data));
};

// 观察者构造函数
function Observer(name) {
  this.name = name;
}

// 观察者更新方法
Observer.prototype.update = function(data) {
  console.log(`${this.name} received notification:`, data);
};

// 创建主题实例
const subject = new Subject();

// 创建观察者实例
const observer1 = new Observer("Observer 1");
const observer2 = new Observer("Observer 2");

// 注册观察者
subject.subscribe(observer1);
subject.subscribe(observer2);

// 通知观察者
subject.notify("Hello, observers!");

在这个示例中，我们创建了一个主题（Subject）构造函数和一个观察者（Observer）构造函数。主题具有订阅（subscribe）、移除（unsubscribe）和通知（notify）观察者的方法。观察者具有更新（update）方法。

然后我们创建了主题和观察者的实例，并注册观察者到主题。最后，我们通过调用主题的notify方法来通知观察者。

2️⃣ 发布-订阅模式

发布-订阅模式是一种消息传递模式，它允许发布者发送消息到消息队列，而订阅者可以订阅感兴趣的消息并接收通知。

• 优点：实现了发布者和订阅者之间的完全解耦，提高了代码的模块化和灵活性。
• 缺点：可能导致系统的性能开销增加，因为需要维护一个消息队列。

发布-订阅模式是一种设计模式，允许一个对象（发布者）发布消息，其他多个对象（订阅者）监听并接收这个消息。

以下是一个简单的JavaScript发布-订阅模式代码示例：

// 发布者构造函数
function Publisher() {
  this.subscribers = {}; // 对象用于存放订阅者及其回调函数
}

// 发布消息
Publisher.prototype.publish = function(topic, data) {
  if (this.subscribers[topic]) {
    this.subscribers[topic].forEach(subscriber => subscriber(data));
  }
};

// 订阅者构造函数
function Subscriber(name) {
  this.name = name;
}

// 订阅消息
Subscriber.prototype.subscribe = function(topic, callback) {
  if (!this.publisher.subscribers[topic]) {
    this.publisher.subscribers[topic] = [];
  }
  this.publisher.subscribers[topic].push(callback);
};

// 创建发布者和订阅者实例
const publisher = new Publisher();
const subscriber1 = new Subscriber("Subscriber 1");
const subscriber2 = new Subscriber("Subscriber 2");

// 订阅消息
subscriber1.subscribe("topic1", data => {
  console.log(`${subscriber1.name} received message:`, data);
});

subscriber2.subscribe("topic1", data => {
  console.log(`${subscriber2.name} received message:`, data);
});

// 发布消息
publisher.publish("topic1", "Hello, subscribers!");

在这个示例中，我们创建了一个发布者（Publisher）构造函数和一个订阅者（Subscriber）构造函数。发布者具有发布（publish）消息的方法，订阅者具有订阅（subscribe）消息的方法。

然后我们创建了发布者和订阅者的实例，并让订阅者订阅发布者的消息。最后，我们通过调用发布者的publish方法来发布消息，订阅者将接收到这个消息。

3️⃣ 观察者模式与发布-订阅模式的异同

虽然观察者模式和发布-订阅模式在功能上有些相似，但它们在实际应用中存在一些差异：

• 耦合度：观察者模式中的观察者和被观察者是直接关联的，而发布-订阅模式中的发布者和订阅者是通过消息队列进行通信的，实现了更低的耦合度。
• 灵活性：发布-订阅模式更加灵活，因为它允许订阅者动态地订阅和取消订阅消息。
  总结：观察者模式和发布-订阅模式都是实现代码解耦和模块化的有效手段。在实际开发中，我们需要根据项目需求和场景来选择合适的模式。观察者模式适用于对象间高度耦合的场景，而发布-订阅模式适用于需要高度解耦和模块化的场景。

参考资料：

• “设计模式：观察者模式和发布-订阅模式”，极客时间，2022
• “深入理解观察者模式和发布-订阅模式”，掘金，2021