JavaScript中介者模式与开发实践(下)

本文介绍了中介者模式在前端开发中的应用,通过一个实例展示了如何实现中介者模式,降低对象间的耦合性,使得系统更易维护和扩展。同时,文章也提到了中介者模式的潜在缺点,如中介者对象的单一故障点和管理大量对象时的复杂性。
摘要由CSDN通过智能技术生成

前言

作为一个前端切图仔,少有和各类设计模式打交道。但这不影响我们学习设计模式的思维,来提升我们的代码水平。

本章通过讲解中介者模式,希望能够让你对设计模式更一步的学习。

本章学习内容👇

  • 实现中介者模式
  • 中介者模式优缺点

实现中介者模式

在上一章中,我们讲述了中介者模式的定义以及作用,现在再回顾一下。

中介者模式的实现其实就跟我们买房时找了个房屋中介,中介会帮你处理所有事情,而你只需要与中介保持联系就可以了。

在这里我们模拟一个案例

  • 假设,有三个不同公司的同事因工作原因需要交流事务,如果没有第三方介入,那么他们就需要保持建立之间的联系。现在,我们引入一个中介者,由他来处理联系,这三名同事发出的消息都由他发出。

code:

class Clerk{
    constructor(name) {
        this.name = name
        this.broker = null //存放对中介者对象的引用
    }
​
    send(msg){
        this.broker.transfer(msg,this) //利用中介者进行转发消息
    }
​
    getBroker(obj){
        this.broker = obj //获取中介者对象 
    }
​
    received(msg){
        console.log(msg) //接受消息
    }
}
​
class Mediator{
    constructor() {
        this.serviceObjects = [] //存放服务对象
    }
​
    register(obj){ //注册服务对象
        this.serviceObjects.push(obj) 
        obj.getBroker(this)
    }
​
    transfer(msg,obj){//转发消息
        this.serviceObjects.forEach((target)=>{
            if (target.name  !== obj.name){
                target.received(`msg:${msg},from:${obj.name}`)
            }
        })
    }
}
​
let mediator = new Mediator()
​
let staff1 = new Clerk('A司职员')
let staff2 = new Clerk('B司职员')
let staff3 = new Clerk('C司职员')
​
mediator.register(staff1)
mediator.register(staff2)
mediator.register(staff3)
​
staff1.send('吃饭')
staff3.send('GO!')

控制台输出👇

msg:吃饭,from:A司职员
msg:吃饭,from:A司职员
msg:GO!,from:C司职员
msg:GO!,from:C司职员

总结

通过以上代码,我们就完成了一个中介者模式的实现。

可以看到即使我们再次增加另外一个公司的职员,这对其他公司的职员也是不受影响的。这也就是中介者模式的优点所在:降低各个对象的耦合性,使系统易于维护与扩展

那么中介者模式缺点呢?

试想,如果中介者跑路了或者生病了,那么这种模式还能运行吗?很明显是不能的,并且每添加一个职员(对象),就需要在中介处更新,如果对象过多,中介类就会变的臃肿,复杂难以维护。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值