返回

JavaScript 设计模式 ---- 从买房子看（发布-订阅者）模式

前端




不管是程序世界里还是现实生活中，发布-订阅模式的应用都非常广泛。

举个例子🌰：

玛卡巴卡在网上看上一套房子，她喜欢这套房子的装修和地理位置。但由于手头资金不足，她需要先卖掉自己的房子才能买下这套房子。

玛卡巴卡将自己的房子挂在中介那里，并告诉中介，只要有合适的买家，就通知她。

中介就充当了一个发布者的角色，玛卡巴卡充当了一个订阅者的角色。当有合适的买家出现时，中介就会通知玛卡巴卡，玛卡巴卡就可以去和买家谈价格，达成交易后，玛卡巴卡就可以买下她看上的那套房子了。

这就是发布-订阅模式的一个典型应用。

在发布-订阅模式中，发布者和订阅者之间是松耦合的，发布者只需要将消息发布出去，而不需要关心谁会接收这些消息。订阅者只需要订阅自己感兴趣的消息，而不需要关心这些消息是从哪里来的。

这种松耦合使得发布-订阅模式非常灵活，可以很容易地扩展和维护。

发布-订阅模式在 JavaScript 中也有广泛的应用。例如，你可以使用发布-订阅模式来构建一个简单的聊天应用程序。

// 发布者
class Publisher {
  constructor() {
    this.subscribers = [];
  }

  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }

  unsubscribe(subscriber) {
    this.subscribers = this.subscribers.filter(s => s !== subscriber);
  }

  publish(message) {
    this.subscribers.forEach(subscriber => subscriber(message));
  }
}

// 订阅者
class Subscriber {
  constructor(name) {
    this.name = name;
  }

  receiveMessage(message) {
    console.log(`${this.name} received message: ${message}`);
  }
}

// 创建一个发布者
const publisher = new Publisher();

// 创建两个订阅者
const subscriber1 = new Subscriber('John');
const subscriber2 = new Subscriber('Mary');

// 订阅者订阅发布者
subscriber1.subscribe(publisher);
subscriber2.subscribe(publisher);

// 发布者发布消息
publisher.publish('Hello, world!');

运行这段代码，你会看到输出如下：

John received message: Hello, world!
Mary received message: Hello, world!

这段代码展示了如何使用发布-订阅模式来构建一个简单的聊天应用程序。在这个应用程序中，发布者是负责发送消息的类，而订阅者是负责接收消息的类。发布者和订阅者之间是松耦合的，这使得应用程序很容易扩展和维护。

发布-订阅模式是一个非常强大的设计模式，它可以用于构建各种各样的应用程序。如果你想了解更多关于发布-订阅模式的信息，我推荐你阅读以下资源：