持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情

中介者设计模式是指通过一个中介者对象封装一系列的对象交互，中介者对象可以让每个对象不需要显式地相互引用，从降低耦合度，当其中一个对象发生改变时，只需要通知中介者对象即可

graph TD
对象1 --> 中介者对象
对象2 --> 中介者对象
对象3 --> 中介者对象
对象4 --> 中介者对象
中介者对象 --> 对象1 
中介者对象 --> 对象2 
中介者对象 --> 对象3 
中介者对象 --> 对象4 

生活中的中介者

在生活中我们也经常使用到中介者设计模式，例如，医院的120急救中心调度站，当我们打电话给120急救中心时，急救中心120调度员接到电话会指派最近的急救车辆去我们身边，急救车辆只需要和急救中心调度台通信就能确定路线和需要救援人员位置，而不需要和所有的急救车辆通信，同时急救中心调度台作为中介者，知道每个车辆的位置与行驶路线，所以可以安排所有急救车辆的路线和调配

中介者设计模式案例

我们来照着急救中心调度站的例子来实现一下

创建一个急救中心调度站,里面有俩个属性代表救护车编号和需要急救的病人，还有俩个方法给急救车分配任务，以及询问当前急救车辆是否有急救任务

        class FirstAid {
            constructor(identifier) {
                // 救护车编号
                this.identifier = identifier;
                // 需要救得病人
                this.patient = null;
            }
            // 添加病人
            setPatient(patient) {
                this.patient = patient;
            }
            // 是否已有急救任务
            receivePatient() {
                // 通过是否分配病人进行判断
                if (this.patient) {
                    console.log(this.identifier + '已接收病人');
                } else {
                    console.log(this.identifier + '未接收病人，可接收急救任务');
                }
            }
        }

创建急救车实例，并进行分派任务

     // 创建急救车
        let first1 = new FirstAid('急救车1');
        let first2 = new FirstAid('急救车2');
        //分派急救任务
        first1.setPatient('小孩');
        //询问是否可接收急救任务
        first1.receivePatient();
        first2.receivePatient();

业务中的中介者

中介者设计模式在我们书写业务中也经常会用到，比如电商网站做的购物车需求，该需求中有存在商品选择表单，颜色选择表单  ，购买数量表单等等，都会触发change事件，这个时候我们就可以通过中介者进行转发处理这些事件，实现每个事件的解耦，我们只需要维护中介者对象即可

redux和vuex都属于中介者设计模式的实际应用，我们把共享的数据抽离成一个store，每个都通过store这个中介者来进行操作

中介者设计模式通过让对象之间的关联性变低降低了代码耦合度提高了可复用性，通过将控制逻辑集中，提高代码可维护性，但是中介者在其中承担了较多的责任，一旦中介者出现问题，整个系统就都会受到影响

坚持努力，无惧未来！