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

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

调停者模式特性

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

应用示例

1. 表单验证

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

js 复制代码

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. 组件间通信

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

js 复制代码

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 方法被调用。

优缺点

优点

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

缺点

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

总结

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