JS设计模式之中介者模式

前言

中介者模式(Mediator Pattern)是一种行为设计模式,旨在通过引入一个中介者对象来减少多个对象之间的直接交互,降低对象之间的耦合度。

这种模式使得对象之间的通信通过中介者来协调,从而减少了对象之间的直接依赖。

主要组成部分

中介者模式包含以下几个核心组件:

  1. 中介者(Mediator):定义一个接口,该接口用于与各个具体同事对象进行交互,中介者负责管理这些同事对象之间的通信。

  2. 具体中介者(Concrete Mediator):实现中介者接口,维护对具体同事对象的引用,并实现协调它们之间交互的具体逻辑。

  3. 同事(Colleague):定义一个接口,表示参与交互的对象。每个同事对象都持有对中介者的引用,并通过中介者与其他同事对象进行交互。

  4. 具体同事(Concrete Colleague):实现同事接口,具体的同事对象通过中介者与其他同事对象进行通信。

工作原理

客户端创建一个具体中介者和多个同事对象。同事对象通过中介者进行交互,而不是直接引用其他同事对象。中介者协调同事对象之间的通信,处理它们之间的交互逻辑。

优点

  • 降低耦合度:通过中介者对象,减少了同事对象之间的直接依赖,使得系统更加灵活和可维护。
  • 集中控制:中介者集中管理同事对象之间的交互逻辑,便于修改和扩展。

缺点

  • 中介者复杂性:中介者可能会变得复杂,尤其是在同事对象较多时,可能导致中介者的职责过于繁重。

  • 不易扩展:如果需要添加新的同事对象,可能需要修改中介者的实现,增加了维护成本。

应用场景

中介者模式适用于多种场景,包括但不限于:

  1. GUI组件交互
  2. 聊天应用
  3. 订单处理系统
  4. 游戏开发
  5. 工作流管理
  6. 网络协议
  7. 多模块系统

示例

以下是中介者模式的一个简单实现示例,展示了如何通过中介者来协调两个对象之间的交互:

javascript 复制代码
// 中介者接口  
class Mediator {  
    notify(colleague, event) {}  
}  

// 具体中介者  
class ConcreteMediator extends Mediator {  
    constructor(colleague1, colleague2) {  
        super();  
        this.colleague1 = colleague1;  
        this.colleague1.setMediator(this);  
        this.colleague2 = colleague2;  
        this.colleague2.setMediator(this);  
    }  

    notify(colleague, event) {  
        if (event === 'A') {  
            console.log('Mediator reacts on A and triggers B');  
            this.colleague2.doSomethingB();  
        } else if (event === 'B') {  
            console.log('Mediator reacts on B and triggers A');  
            this.colleague1.doSomethingA();  
        }  
    }  
}  

// 同事接口  
class Colleague {  
    setMediator(mediator) {  
        this.mediator = mediator;  
    }  
}  

// 具体同事A  
class ConcreteColleagueA extends Colleague {  
    doSomethingA() {  
        console.log('Colleague A does something.');  
        this.mediator.notify(this, 'A');  
    }  
}  

// 具体同事B  
class ConcreteColleagueB extends Colleague {  
    doSomethingB() {  
        console.log('Colleague B does something.');  
        this.mediator.notify(this, 'B');  
    }  
}  

// 使用中介者模式  
const colleagueA = new ConcreteColleagueA();  
const colleagueB = new ConcreteColleagueB();  
const mediator = new ConcreteMediator(colleagueA, colleagueB);  

colleagueA.doSomethingA(); // Colleague A does something. Mediator reacts on A and triggers B  
colleagueB.doSomethingB(); // Colleague B does something. Mediator reacts on B and triggers A

总结

中介者模式提供了一种有效的方式来降低系统中对象之间的耦合度,通过集中管理对象间的交互逻辑,使得系统更加模块化和易于维护。

尽管在某些情况下,中介者可能会变得复杂,且不易扩展,但在需要减少对象间直接交互的场景中,中介者模式是一个非常有用的设计模式。

-- 欢迎点赞、关注、转发、收藏【我码玄黄】,各大平台同名。

相关推荐
张元清10 分钟前
React useEventSource Hook:自带断线重连的 Server-Sent Events (2026)
javascript·react.js
铁皮饭盒37 分钟前
网页端, 6.5MB人脸识别模型, 谷歌框架, 又快又准
前端·javascript·后端
自进化Agent智能体1 小时前
Hermes 工具与工具集——Hermes 的内置能力
javascript
你挚爱的强哥1 小时前
【exportExcel】单纯靠js不用任何其他第三方插件导出xls格式文件
开发语言·javascript·ecmascript
AI人工智能+电脑小能手2 小时前
大白话说Java设计模式-08-建造者模式(业务实战篇)
java·设计模式·建造者模式·架构设计·对象构建
大家的林语冰2 小时前
👉 尤雨溪再次成立新公司,同时官宣 Pinia 4 正式发布!
前端·javascript·vue.js
用户938515635073 小时前
从零在浏览器里跑 DeepSeek-R1:WebGPU + Transformer.js 全链路实战(二)
前端·javascript·typescript
BD_Marathon4 小时前
部署Spark
大数据·javascript·spark
gis开发之家4 小时前
《Vue3 从入门到大神50篇》Vue3 源码详解(二十):生命周期钩子源码解析 —— onMounted / onUpdated 如何实现?
前端·javascript·前端框架·vue3·vue3源码
全栈项目管理程序猿4 小时前
ArcGIS JS 基础教程(9):天空盒与大气效果
javascript