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