【前端设计模式】之调停者模式（中介者模式）

✨ 专栏介绍

设计模式是在软件开发中经过验证的解决问题的方法。它们是从经验中总结出来的，可以帮助我们更好地组织和管理代码，提高代码的可维护性、可扩展性和可重用性。无论是前端还是后端开发，设计模式都扮演着重要的角色。在本专栏中，我们将探索一些常见的前端设计模式，并学习如何将它们应用于实际项目中。通过掌握这些设计模式，我们可以编写更优雅、可靠且易于维护的前端代码。

本文主要讲解行为型模式中的调停者模式（中介者模式）

---

调停者模式是一种行为设计模式，它通过引入一个调停者对象来集中处理一组对象之间的交互。调停者模式的目标是减少对象之间的直接通信，从而降低耦合度，并且使代码更易于维护和扩展。

调停者模式特性

1. 将对象之间的通信集中在一个调停者对象中，避免了对象之间的直接耦合。
2. 调停者对象可以控制和协调一组相关对象之间的交互。
3. 调停者模式可以简化复杂系统中的交互逻辑，使代码更易于理解和维护。

应用示例

1. 表单验证

在一个表单中，各个输入字段之间可能存在依赖关系。使用调停者模式可以将表单验证逻辑集中在一个验证器对象中，各个输入字段只需要将自己的值传递给验证器进行验证即可。这样可以避免输入字段之间直接进行通信，并且使得验证逻辑更加清晰。

class Mediator {
  constructor() {
    this.fields = [];
  }

  addField(field) {
    this.fields.push(field);
  }

  validate() {
    let isValid = true;
    this.fields.forEach(field => {
      if (!field.validate()) {
        isValid = false;
      }
    });
    return isValid;
  }
}

class Field {
  constructor(mediator) {
    this.mediator = mediator;
    this.value = '';
  }

  setValue(value) {
    this.value = value;
    this.mediator.validate();
  }

  validate() {
    // 验证逻辑
    return true;
  }
}

const mediator = new Mediator();
const field1 = new Field(mediator);
const field2 = new Field(mediator);

mediator.addField(field1);
mediator.addField(field2);

field1.setValue('value1');
field2.setValue('value2');

在上述代码中，Mediator 是调停者对象，Field 是需要进行验证的输入字段。通过将输入字段注册到调停者对象中，并在字段值发生变化时通知调停者进行验证，可以实现表单验证的功能。

Mediator 类是一个中介者，它维护一个字段数组 fields，可以通过 addField 方法向数组中添加字段对象。它还提供了一个 validate 方法，用于验证所有字段是否有效。

Field 类表示一个字段，每个字段对象都有一个中介者引用 mediator，以及一个值属性 value。setValue 方法用于设置字段的值，并在设置值后调用中介者的 validate 方法进行验证。

最后部分，创建了一个中介者对象 mediator 和两个字段对象 field1 和 field2，并将它们关联在一起。然后通过调用 addField 方法将这两个字段添加到中介者的字段数组中。最后，分别设置 field1 和 field2 的值为 'value1' 和 'value2'。

2. 组件间通信

在一个复杂的前端应用中，各个组件之间可能需要进行通信和协调。使用调停者模式可以将组件之间的通信逻辑集中在一个调停者对象中，各个组件只需要将自己的状态或事件传递给调停者进行处理即可。这样可以避免组件之间直接进行通信，并且使得组件之间的关系更加清晰。

class Mediator {
  constructor() {
    this.components = [];
  }

  addComponent(component) {
    this.components.push(component);
  }

  notify(sender, event, data) {
    this.components.forEach(component => {
      if (component !== sender) {
        component.receive(event, data);
      }
    });
  }
}

class Component {
  constructor(mediator) {
    this.mediator = mediator;
    this.mediator.addComponent(this);
  }

  send(event, data) {
    this.mediator.notify(this, event, data);
  }

  receive(event, data) {
    // 处理事件和数据
  }
}

const mediator = new Mediator();
const component1 = new Component(mediator);
const component2 = new Component(mediator);

component1.send('event', 'data');

Mediator 类有一个构造函数，它初始化了一个空的数组 components，用于存储组件对象。它提供了两个方法：

• addComponent：将传入的组件对象添加到 components 数组中。
• notify：遍历 components 数组中的所有组件，除了发送方（sender）之外，调用每个组件的 receive 方法，并传递事件和数据作为参数。

Component 类有一个构造函数，它接收一个中介者对象作为参数，并将其存储在 mediator 属性中，同时调用中介者的 addComponent 方法将自己添加到中介者的组件数组中。它提供了三个方法：

• send：调用中介者的 notify 方法，将当前组件作为发送方，同时传递事件和数据作为参数。
• receive：这是一个抽象方法，用于处理接收到的事件和数据。具体的处理逻辑需要根据实际需求实现。

在代码的最后部分，创建了一个中介者对象 mediator 和两个组件对象 component1 和 component2，并将它们关联在一起。然后调用 component1 的 send 方法发送一个事件和数据，这样就会触发中介者的 notify 方法，使得 component2 的 receive 方法被调用。

优缺点

优点

1. 降低了对象之间的耦合度，使得代码更易于维护和扩展。
2. 集中处理了对象之间的交互逻辑，使得代码更易于理解。
3. 可以简化复杂系统中的交互逻辑，提高代码的可读性和可维护性。

缺点

1. 引入了一个额外的调停者对象，增加了系统的复杂性。
2. 调停者对象可能会变得庞大和复杂，难以维护。

总结

调停者模式是一种有助于降低对象之间耦合度的设计模式。它通过引入一个调停者对象来集中处理一组对象之间的交互，使得代码更易于维护和扩展。在前端开发中，调停者模式可以应用于表单验证、消息订阅与发布、组件间通信等场景。尽管调停者模式可能会增加系统的复杂性，并且调停者对象可能变得庞大和复杂，但它仍然是一种有价值的设计模式，可以提高代码的可读性和可维护性。

---

😶 写在结尾

前端设计模式专栏

设计模式是软件开发中不可或缺的一部分，它们帮助我们解决了许多常见问题，并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中，我们介绍了所有的前端设计模式，包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式，并将其应用于实际项目中，我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式，写出高质量的代码。点击订阅前端设计模式专栏

Vue专栏

Vue.js是一款流行的JavaScript框架，用于构建用户界面。它采用了MVVM（Model-View-ViewModel）的架构模式，通过数据驱动和组件化的方式，使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中，我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面，并探索其强大的生态系统，如Vue Router和Vuex、Pinia。通过学习这些内容，你将能够成为一名熟练的Vue.js开发者，并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏

JavaScript（ES6）专栏
JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点，是构建现代Web应用程序的重要工具之一。在这个专栏中，我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外，我们还将介绍ES6（ECMAScript 2015）及其后续版本中引入的新特性，如箭头函数、模块化、解构赋值等。通过学习这些内容，你将能够成为一名熟练的JavaScript开发者，并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScript（ES6）专栏