前端设计模式应用--中介者模式

79 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第17天

介绍

  • 中介者模式(Mediator Pattern)是用来降低多个对象和类之间的通信复杂性。这种模式提供了一个中介类,该类通常处理不同类之间的通信,并支持松耦合,使代码易于维护。中介者模式属于行为型模式。

    一种设计模式。用一个中介对象来封装一系列对象的交互,从而把一批原来可能是交互关系复杂的对象转换成一组松散耦合的中间对象,以有利于维护和修改。

  • 中介者模式建议你停止组件之间的直接交流并使其相互独立。这些组件必须调用特殊的中介者对象,通过中介者对象重定向调用行为,以间接的方式进行合作。最终,组件仅依赖于一个中介者类,无需与多个其他组件相耦合。

使用场景

  • 系统中对象之间存在比较复杂的引用关系,导致它们之间的依赖关系结构混乱而且难以复用该对象。
  • 想通过一个中间类来封装多个类中的行为,而又不想生成太多的子类

应用实践

职责明确

  • 抽象中介者(Mediator)角色:它是中介者的接口,提供了同事对象注册与转发同事对象信息的抽象方法。
  • 具体中介者(Concrete Mediator)角色:实现中介者接口,定义一个 List 来管理同事对象,协调各个同事*角色之间的交互关系,因此它依赖于同事角色。
  • 抽象同事类(Colleague)角色:定义同事类的接口,保存中介者对象,提供同事对象交互的抽象方法,实现所有相互影响的同事类的公共功能。
  • 具体同事类(Concrete Colleague)角色:是抽象同事类的实现者,当需要与其他同事对象交互时,由中介者对象负责后续的交互。

实现

/**
 * 1. 抽象出结构
 */


// 抽象出中介者
abstract class Mediator {
    colleagues: Colleague[];

    abstract register(colleague: Colleague): void;
    abstract relay(colleague: Colleague): void;
}

// 抽象需要交互的对象
abstract class Colleague {
    mediator: Mediator;

    setMediator(mediator: Mediator) {
        this.mediator = mediator;
    }

    abstract receive(): void;
    abstract send(): void;
}

/**
 * 2. 具现
 */

// 中介者,内部维护一个 List ,保存了依赖这个中介者的所有对象
class ConcreteMediator extends Mediator {
    colleagues: Colleague[] = [];

    register(colleague: Colleague): void {
        const flag = this.colleagues.some((item) => item === colleague);

        if (!flag) this.colleagues.push(colleague);
    }
    relay(colleague: Colleague): void {
        this.colleagues.forEach((item) => {
            if (item !== colleague) item.receive();
        })
    }
}

class ConcreteColleague extends Colleague {
    name: string;
    constructor(name: string) {
        super();
        this.name = name;
    }
    receive(): void {
        console.log(`${this.name}接收的信号`);
    }
    send(): void {
        console.log(`${this.name}发出的信号`);
        this.mediator.relay(this);
    }
}

// 1. 初始化中介者
const mediator = new ConcreteMediator();

// 2. 创建关联对象
const c1 = new ConcreteColleague("c1");
const c2 = new ConcreteColleague("c2");
const c3 = new ConcreteColleague("c3");

// 3. 将两者关联起来
mediator.register(c1);
mediator.register(c2);
mediator.register(c3);

c1.setMediator(mediator);
c2.setMediator(mediator);
c3.setMediator(mediator);

// 4. 测试
c1.send();
// c1发出的信号
// c2接收的信号
// c3接收的信号


c2.send();
// c2发出的信号
// c1接收的信号
// c3接收的信号

总结

优点

  • 可以降低各个业务对象之间的耦合度,易于维护
  • 可以更方便的复用对象
  • 将多对多的交互关系转换为一对多的关系,降低系统复杂度
  • 无需修改其他对象就能增加新的对象 易于扩展

缺点

  • 会增加一个新的中介者对象
  • 封装了太多的交互细节和对象间的关系,可能会使中介者对象变的过于庞大、复杂