中介者模式通过引入中间人协调对象交互，降低组件间耦合度，提升可维护性与复用性，适用于复杂表单等多组件联动场景。
中介者模式在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
来协调。组件自身只关心自己的状态变化并通知中介者，而无需知道其他组件的存在。
中介者模式解决了哪些痛点？
在我看来，中介者模式最显著的价值在于它能有效缓解“网状”依赖的困境。在一个大型或复杂的系统中，如果每个组件都需要直接知道并操作其他多个组件，那代码的耦合度会高到令人发指。这种情况下，修改一个组件可能会牵一发而动全身，维护成本呈指数级增长。
它解决的痛点主要体现在几个方面：
降低耦合度：这是最直接的好处。组件之间不再直接通信，而是通过中介者间接沟通。这使得每个组件可以独立地进行开发、测试和修改，而不会对其他组件产生意料之外的影响。就像一个交通指挥员，车辆只和指挥员打交道，不用关心其他车辆的具体位置和意图。提高可维护性：当所有交互逻辑都集中在中介者中时，调试和理解系统行为变得容易得多。你不需要在多个组件之间跳来跳去追踪调用链，只需要查看中介者的
notify
方法就能大致了解系统的协作流程。这对于团队协作和新成员理解项目尤其重要。简化对象交互：原本复杂的N对N交互，现在变成了N对1（所有同事都只与中介者交互）和1对N（中介者与所有同事交互）的模式。这种结构上的简化，让系统的整体架构更加清晰。促进组件复用：因为组件不再直接依赖于特定其他组件，它们变得更加通用。你可以在不同的上下文或项目中复用这些组件，只要为它们提供一个新的中介者实例即可。
我个人在处理一些前端复杂表单或仪表盘时，
以上就是JS如何实现中介者模式？中介者的作用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/111961.html
微信扫一扫 
支付宝扫一扫 
