JS中介者模式实现与作用详解

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《JS实现中介者模式及作用解析》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

中介者模式通过引入中间人协调对象交互，降低组件间耦合度，提升可维护性与复用性，适用于复杂表单等多组件联动场景。

中介者模式在JavaScript里，简单来说，就是引入一个“中间人”角色，专门负责协调一组对象之间的交互。它把原本可能错综复杂的直接点对点通信，集中到一个地方处理，让各个对象之间不再直接打交道，从而大大降低了它们之间的耦合度。它的核心作用，就是让系统里的组件能更独立地发展，同时又能高效地协作。

要实现中介者模式，我们通常会定义一个中介者对象，以及若干个“同事”对象。这些同事对象不再直接引用或调用其他同事对象的方法，而是通过中介者来发送消息或请求服务。中介者接收到请求后，根据内部逻辑决定如何转发或处理，再通知相关的同事。

举个例子，想象一个复杂的表单，里面有多个输入框、下拉菜单和按钮，它们之间有很多联动逻辑：一个输入框的值变化可能影响另一个下拉菜单的可用选项，一个按钮的点击可能需要根据多个输入框的状态来决定是否启用。如果没有中介者，这些组件会直接互相监听和操作，代码很快就变成一团乱麻。

用中介者模式来组织，大概是这样：

// 中介者
class FormMediator {
    constructor() {
        this.components = {}; // 存储所有注册的组件
    }

    register(name, component) {
        this.components[name] = component;
        component.setMediator(this); // 让组件知道自己的中介者是谁
    }

    notify(sender, event) {
        // 根据发送者和事件类型，决定通知哪些组件
        switch (event) {
            case 'inputChanged':
                if (sender.name === 'usernameInput') {
                    // 假设用户名输入后，需要验证并可能影响提交按钮状态
                    const username = this.components['usernameInput'].getValue();
                    if (username.length > 5) {
                        this.components['submitButton'].enable();
                    } else {
                        this.components['submitButton'].disable();
                    }
                }
                break;
            case 'dropdownSelected':
                if (sender.name === 'countryDropdown') {
                    const country = this.components['countryDropdown'].getValue();
                    // 根据国家选择，更新城市下拉列表
                    this.components['cityDropdown'].updateOptions(country);
                }
                break;
            // 更多事件处理...
        }
    }
}

// 同事组件基类 (为了演示，简化处理)
class Component {
    constructor(name) {
        this.name = name;
        this.mediator = null;
    }

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

    // 抽象方法，子类实现具体业务逻辑
    // 当自身状态变化时，通知中介者
    changed(event) {
        if (this.mediator) {
            this.mediator.notify(this, event);
        }
    }
}

// 具体同事组件
class InputField extends Component {
    constructor(name, value = '') {
        super(name);
        this._value = value;
    }

    getValue() {
        return this._value;
    }

    setValue(newValue) {
        this._value = newValue;
        console.log(`${this.name} 值变为: ${newValue}`);
        this.changed('inputChanged'); // 状态变化时通知中介者
    }
}

class Dropdown extends Component {
    constructor(name, options = []) {
        super(name);
        this._selected = options[0] || null;
        this.options = options;
    }

    getValue() {
        return this._selected;
    }

    select(value) {
        if (this.options.includes(value)) {
            this._selected = value;
            console.log(`${this.name} 选中: ${value}`);
            this.changed('dropdownSelected');
        }
    }

    updateOptions(basedOn) {
        // 模拟根据其他组件状态更新选项
        console.log(`${this.name} 根据 ${basedOn} 更新了选项。`);
        // 实际中这里会有复杂的逻辑来获取新的选项
        this.options = basedOn === 'USA' ? ['New York', 'Los Angeles'] : ['London', 'Paris'];
        this._selected = this.options[0]; // 默认选中第一个
    }
}

class Button extends Component {
    constructor(name, text) {
        super(name);
        this.text = text;
        this._enabled = false;
    }

    enable() {
        this._enabled = true;
        console.log(`${this.name} 按钮已启用。`);
    }

    disable() {
        this._enabled = false;
        console.log(`${this.name} 按钮已禁用。`);
    }

    click() {
        if (this._enabled) {
            console.log(`${this.name} 按钮被点击。`);
            this.changed('buttonClicked'); // 通知中介者，可能触发提交
        } else {
            console.log(`${this.name} 按钮被点击，但当前禁用。`);
        }
    }
}

// 使用示例
const mediator = new FormMediator();

const usernameInput = new InputField('usernameInput');
const countryDropdown = new Dropdown('countryDropdown', ['USA', 'UK', 'France']);
const cityDropdown = new Dropdown('cityDropdown'); // 初始为空
const submitButton = new Button('submitButton', '提交');

mediator.register('usernameInput', usernameInput);
mediator.register('countryDropdown', countryDropdown);
mediator.register('cityDropdown', cityDropdown);
mediator.register('submitButton', submitButton);

// 模拟用户操作
usernameInput.setValue('john_doe_123'); // 触发中介者，可能启用提交按钮
countryDropdown.select('USA'); // 触发中介者，更新城市下拉列表
submitButton.click(); // 尝试点击
usernameInput.setValue('jo'); // 再次改变值，可能禁用提交按钮
submitButton.click(); // 再次尝试点击

这段代码展示了核心思想：所有组件的交互都通过 FormMediator 来协调。组件自身只关心自己的状态变化并通知中介者，而无需知道其他组件的存在。

中介者模式解决了哪些痛点？

在我看来，中介者模式最显著的价值在于它能有效缓解“网状”依赖的困境。在一个大型或复杂的系统中，如果每个组件都需要直接知道并操作其他多个组件，那代码的耦合度会高到令人发指。这种情况下，修改一个组件可能会牵一发而动全身，维护成本呈指数级增长。

它解决的痛点主要体现在几个方面：

1. 降低耦合度：这是最直接的好处。组件之间不再直接通信，而是通过中介者间接沟通。这使得每个组件可以独立地进行开发、测试和修改，而不会对其他组件产生意料之外的影响。就像一个交通指挥员，车辆只和指挥员打交道，不用关心其他车辆的具体位置和意图。
2. 提高可维护性：当所有交互逻辑都集中在中介者中时，调试和理解系统行为变得容易得多。你不需要在多个组件之间跳来跳去追踪调用链，只需要查看中介者的 notify 方法就能大致了解系统的协作流程。这对于团队协作和新成员理解项目尤其重要。
3. 简化对象交互：原本复杂的N对N交互，现在变成了N对1（所有同事都只与中介者交互）和1对N（中介者与所有同事交互）的模式。这种结构上的简化，让系统的整体架构更加清晰。
4. 促进组件复用：因为组件不再直接依赖于特定其他组件，它们变得更加通用。你可以在不同的上下文或项目中复用这些组件，只要为它们提供一个新的中介者实例即可。

我个人在处理一些前端复杂表单或仪表盘时，

好了，本文到此结束，带大家了解了《JS中介者模式实现与作用详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！