设计模式-中介者模式

简介

中介者模式是一种行为设计模式,它允许我们减少多个组件(对象)之间的直接通信,而是通过一个中介者对象来协调相互作用。这种模式有助于减少组件之间的依赖关系,使其更容易维护和扩展

基本概念

在中介者模式中,组件(通常称为同事类)不直接与其他组件通信。相反,它们通过中介者对象进行交互。这种设置有助于将组件之间的通信逻辑集中在一个位置,使得代码更加整洁并且易于理解和维护

优点

  • 降低耦合度:组件不需要知道其他组件的详细信息,只需与中介者沟通。
  • 集中控制交互:所有的组件交互都通过同一个中介者,方便进行监控和控制。
  • 更易于维护和修改:添加新的交互或修改现有逻辑只需更改中介者代码,而不是多个组件。

缺点

  • 中介者可能变得复杂:随着系统的扩展,中介者自身可能会变得过于复杂,成为一个难以维护的大型类。
  • 可能影响性能:所有的通信都通过中介者,可能会导致性能瓶颈。

使用场景

  • 当多个组件相互交互,但交互方式非常复杂时,使用中介者可以简化这些组件之间的通信。
  • 当你想要在不同组件之间的交互中引入新的行为,而不影响这些组件的时候

实现示例

假设我们有一个聊天室应用,其中多个用户(组件)通过聊天室(中介者)进行交流。以下是一个简单的 JavaScript 实现:

javascript 复制代码
class ChatRoom {
  constructor() {
    this.participants = {};
  }

  register(participant) {
    this.participants[participant.name] = participant;
    participant.chatroom = this;
  }

  send(message, from, to) {
    if (to) {
      // 私人消息
      to.receive(message, from);
    } else {
      // 广播消息
      for (let key in this.participants) {
        if (this.participants[key] !== from) {
          this.participants[key].receive(message, from);
        }
      }
    }
  }
}

class Participant {
  constructor(name) {
    this.name = name;
    this.chatroom = null;
  }

  send(message, to) {
    this.chatroom.send(message, this, to);
  }

  receive(message, from) {
    console.log(`${from.name} to ${this.name}: ${message}`);
  }
}

// 使用示例
const chatroom = new ChatRoom();

const alice = new Participant("Alice");
const bob = new Participant("Bob");
const charlie = new Participant("Charlie");

chatroom.register(alice);
chatroom.register(bob);
chatroom.register(charlie);

alice.send("Hi Bob!", bob);
bob.send("Hey Alice!", alice);
charlie.send("Hello everyone!");

总结

在这个示例中,ChatRoom 是中介者,负责处理所有的消息发送逻辑。Participant 类代表各个组件,它们通过 ChatRoom 进行通信。这样,参与者之间的通信逻辑就被集中到了 ChatRoom 中,使得每个参与者的实现更简单,也更容易管理和扩展。

相关推荐
m0_7482550228 分钟前
前端常用算法集合
前端·算法
真的很上进42 分钟前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203981 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2341 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1232 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~3 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语3 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport3 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg3 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww3 小时前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest