JavaScript中介者模式与开发实践（下）

前言

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

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

本章学习内容👇

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

实现中介者模式

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

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

在这里我们模拟一个案例：

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

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司职员

总结

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

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

那么中介者模式的缺点呢？

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