JS如何实现中介者模式？中介者的作用

// 中介者
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