前端設計模式——中介者模式

前端中介者模式（Mediator Pattern），用於將對象之間的通信解耦並集中管理。它通過引入一個中介者對象，將對象之間的交互轉移到中介者對象中，從而避免對象之間直接相互通信。

在前端開發中，中介者模式常常被用於管理複雜的用戶界面或組件之間的交互，比如 GUI 組件、聊天室、游戲等等。通過引入一個中介者對象，各個組件可以向中介者對象發送消息或事件，而不需要知道消息或事件的接收者是誰。中介者對象負責接收並分發消息或事件，從而實現組件之間的解耦和統一管理。

下麵是一個簡單的例子，展示瞭如何在前端中使用中介者模式：

// 中介者對象
const Mediator = {
  components: [],
  addComponent(component) {
    this.components.push(component);
  },
  broadcast(source, message) {
    this.components
      .filter(component => component !== source)
      .forEach(component => component.receive(message));
  }
};

// 組件對象
class Component {
  constructor() {
    this.mediator = Mediator;
    this.mediator.addComponent(this);
  }
  send(message) {
    this.mediator.broadcast(this, message);
  }
  receive(message) {
    console.log(`Received message: ${message}`);
  }
}

// 使用中介者模式進行組件之間的通信
const componentA = new Component();
const componentB = new Component();
componentA.send("Hello from Component A");
componentB.send("Hi from Component B");

// Received message: Hello from Component A
// Received message: Hi from Component B

在上面的例子中，我們定義了一個中介者對象 `Mediator` 和兩個組件對象 `ComponentA` 和 `ComponentB`。當組件對象發送消息時，它會將消息發送給中介者對象，中介者對象負責將消息分發給其他組件對象。這樣，我們就實現了組件之間的解耦和統一管理。

需要註意的是，在實際開發中，我們可能需要使用不同的中介者對象來管理不同的組件之間的交互行為。此外，我們還可以使用其他方式來實現中介者模式，比如使用觀察者模式來實現。