【设计模式】之调停者模式

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

✨ 专栏介绍

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

image.png

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


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

调停者模式特性

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

应用示例

1. 表单验证

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

classMediator {
constructor() {
this.fields= [];
  }
addField(field) {
this.fields.push(field);
  }
validate() {
letisValid=true;
this.fields.forEach(field=> {
if (!field.validate()) {
isValid=false;
      }
    });
returnisValid;
  }
}
classField {
constructor(mediator) {
this.mediator=mediator;
this.value='';
  }
setValue(value) {
this.value=value;
this.mediator.validate();
  }
validate() {
// 验证逻辑returntrue;
  }
}
constmediator=newMediator();
constfield1=newField(mediator);
constfield2=newField(mediator);
mediator.addField(field1);
mediator.addField(field2);
field1.setValue('value1');
field2.setValue('value2');

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

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

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

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

2. 组件间通信

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

classMediator {
constructor() {
this.components= [];
  }
addComponent(component) {
this.components.push(component);
  }
notify(sender, event, data) {
this.components.forEach(component=> {
if (component!==sender) {
component.receive(event, data);
      }
    });
  }
}
classComponent {
constructor(mediator) {
this.mediator=mediator;
this.mediator.addComponent(this);
  }
send(event, data) {
this.mediator.notify(this, event, data);
  }
receive(event, data) {
// 处理事件和数据  }
}
constmediator=newMediator();
constcomponent1=newComponent(mediator);
constcomponent2=newComponent(mediator);
component1.send('event', 'data');

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

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

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

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

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

优缺点

优点

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

缺点

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

总结

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



目录
相关文章
|
6天前
|
设计模式 API
【设计模式】适配器和桥接器模式有什么区别
【设计模式】适配器和桥接器模式有什么区别
10 1
|
6天前
|
设计模式
【设计模式】张一鸣笔记:责任链接模式怎么用?
【设计模式】张一鸣笔记:责任链接模式怎么用?
11 1
|
6天前
|
设计模式 uml
【设计模式】建造者模式就是游戏模式吗?
【设计模式】建造者模式就是游戏模式吗?
11 0
|
6天前
|
设计模式 Java uml
【设计模式】什么是工厂方法模式?
【设计模式】什么是工厂方法模式?
8 1
|
6天前
|
设计模式 uml
【设计模式】一文搞定简单工厂模式!
【设计模式】一文搞定简单工厂模式!
8 2
|
6天前
|
设计模式 JavaScript 前端开发
js设计模式-观察者模式与发布/订阅模式
观察者模式和发布/订阅模式是JavaScript中的两种设计模式,用于处理对象间的通信和事件处理。观察者模式中,一个主题对象状态改变会通知所有观察者。实现包括定义主题和观察者对象,以及在主题中添加、删除和通知观察者的功能。发布/订阅模式则引入事件管理器,允许发布者发布事件,订阅者通过订阅接收通知。
|
6天前
|
设计模式 前端开发 Java
19:Web开发模式与MVC设计模式-Java Web
19:Web开发模式与MVC设计模式-Java Web
24 4
|
6天前
|
设计模式 消息中间件 Java
Java 设计模式:探索发布-订阅模式的原理与应用
【4月更文挑战第27天】发布-订阅模式是一种消息传递范式,被广泛用于构建松散耦合的系统。在 Java 中,这种模式允许多个对象监听和响应感兴趣的事件。
39 2
|
6天前
|
设计模式 存储 JavaScript
[设计模式Java实现附plantuml源码~创建型] 多态工厂的实现——工厂方法模式
[设计模式Java实现附plantuml源码~创建型] 多态工厂的实现——工厂方法模式
|
6天前
|
设计模式 Java Go
[设计模式Java实现附plantuml源码~创建型] 集中式工厂的实现~简单工厂模式
[设计模式Java实现附plantuml源码~创建型] 集中式工厂的实现~简单工厂模式