JavaScript设计模式实战：桥接与中介者模式解析
本文深入解析JavaScript中的桥接模式与中介者模式。桥接模式通过组合替代继承，将抽象部分与实现部分分离，有效降低耦合度并提升扩展性，适用于主题切换等场景。中介者模式则通过中心对象封装交互，简化对象间通信，常见于状态管理与事件分发。文章结合具体代码案例，阐述两种模式在实际业务中的应用与优劣。
一、桥接设计模式
桥接模式属于组合优先于继承的设计范式，其核心在于将实现细节从抽象模块中分离，并推送给拥有独立接口的对象处理。
在开发实践中，桥接模式的思想常见于事件监听机制及数组方法（如forEach）中，体现了模块间的解耦与协作。
桥接设计模式在工作中的使用
假设有一个多页面网站，需要支持用户自定义修改网站主题。若为每个页面单独创建主题副本，维护成本极高。此时可利用桥接模式，通过创建独立的主题模块，根据用户选择动态加载对应主题颜色，从而实现灵活控制。
首先定义两个主题模块类：外观主题与内容主题。这两个类均包含一个用于设置主题颜色的方法，作为抽象接口。
// 外观主题
class Large {
constructor(theme) {
// 主题颜色
this.theme = theme;
}
// 设置主题颜色
setThemeColor() {
console.log("Large主题颜色设置为" + this.theme.getColor());
}
}
// 内容主题
class Small {
constructor(theme) {
// 主题颜色
this.theme = theme;
}
// 设置主题颜色
setThemeColor() {
console.log("Small主题颜色设置为" + this.theme.getColor());
}
}
接着定义若干具体主题颜色类，每个类内部实现获取当前主题颜色的方法，提供具体的实现逻辑。
class RedTheme {
getColor() {
return "red";
}
}
class BlueTheme {
getColor() {
return "blue";
}
}
class YellowTheme {
getColor() {
return "yellow";
}
}
随后创建主题模块实例，并将具体的主题颜色类实例作为参数传入，调用模块的设置方法，从而完成外观与实现的绑定。
// 创建主题颜色
const RedTheme = new RedTheme();
const BlueTheme = new BlueTheme();
const YellowTheme = new YellowTheme();
// 主题模块
const Large = new Large(RedTheme);
const Small = new Small(BlueTheme);
// 设置外观主题和内容主题
Large.setThemeColor()
Small.setThemeColor()
桥接模式的优势在于，当某一模块发生变化时，不会影响其他模块的运行，从而显著降低代码耦合度。由于该模式要求两个模块间无直接耦合关系以支持独立变化，因此相比继承方案更具可扩展性。然而，这也增加了整体代码结构的复杂性。
二、JavaScript中介者模式
中介者模式通过引入一个中介者对象来封装一系列对象间的交互。该模式使各对象无需显式相互引用，从而降低耦合度。当某个对象状态改变时，只需通知中介者对象即可处理后续逻辑。
中介者设计模式案例
生活中存在大量中介者模式的实例，例如医院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这一中介者进行数据操作与状态同步。
中介者模式通过降低对象间的关联性，提高了代码的耦合度与可复用性，并将控制逻辑集中，提升了可维护性。然而，中介者对象承担了较多责任，一旦其出现异常，可能导致整个系统受到影响。
到此这篇关于JavaScript设计模式中的桥接和中介者模式的文章就介绍到这了,更多相关JavaScript设计模式 内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么？
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比：灵活性 vs 开发效率
2026-11-05 09:45:01