桥接模式通过将抽象与实现分离，使两者独立变化，避免类爆炸问题。例如在绘制不同颜色形状时，形状和颜色可分别扩展，通过组合关联（如圆形持有渲染器引用）实现灵活搭配，支持运行时切换行为，适用于跨平台、多主题等场景。
在JavaScript中，桥接模式（Bridge Pattern）是一种结构型设计模式，它的核心思想是将抽象部分与实现部分分离，使它们可以独立变化。这种解耦方式特别适用于那些可能在多个维度上扩展的系统，比如图形渲染、UI组件或跨平台功能。
为什么需要桥接模式？
当一个类存在多个变化维度时，比如一个形状既有类型（圆形、方形），又有颜色（红色、蓝色），如果用传统的继承方式，每新增一种组合就需要创建一个新的子类，导致类的数量急剧膨胀。
桥接模式通过组合而非继承来解决这个问题：把其中一个维度（如颜色）抽离为独立的实现层级，让另一个维度（如形状）持有其引用。这样，形状和颜色可以各自独立扩展，互不影响。
基本结构与实现
桥接模式通常包含以下角色：
立即学习“Java免费学习笔记（深入）”；
- 抽象（Abstraction）：定义高层控制接口，并包含对实现对象的引用。
- 精化抽象（Refined Abstraction）：扩展抽象接口的具体实现。
- 实现接口（Implementor）：定义实现类的接口，不一定要与抽象一致。
- 具体实现（Concrete Implementor）：实现Implementor接口，在不同平台上提供具体行为。
示例：绘制不同颜色的形状
// 实现接口：颜色渲染器
class ColorRenderer {
renderCircle(radius) {
throw new Error("Must override method");
}
}
// 具体实现：红色渲染器
class RedRenderer extends ColorRenderer {
renderCircle(radius) {
console.log(`Drawing a red circle of radius ${radius}`);
}
}
// 具体实现：蓝色渲染器
class BlueRenderer extends ColorRenderer {
renderCircle(radius) {
console.log(`Drawing a blue circle of radius ${radius}`);
}
}
// 抽象：形状
class Shape {
constructor(renderer) {
this.renderer = renderer; // 桥接点：持有一个实现
}
draw() {
throw new Error("Must override method");
}
}
// 精化抽象：圆形
class Circle extends Shape {
constructor(renderer, radius) {
super(renderer);
this.radius = radius;
}
draw() {
this.renderer.renderCircle(this.radius);
}
}使用示例：
const redRenderer = new RedRenderer(); const blueRenderer = new BlueRenderer(); const redCircle = new Circle(redRenderer, 5); const blueCircle = new Circle(blueRenderer, 10); redCircle.draw(); // 输出：Drawing a red circle of radius 5 blueCircle.draw(); // 输出：Drawing a blue circle of radius 10
优势与适用场景
桥接模式带来的好处很明显：
- 抽象和实现可以独立扩展，避免类爆炸。
- 符合“开闭原则”——对扩展开放，对修改封闭。
- 可以在运行时切换实现，提高灵活性。
常见应用场景包括：
- 跨平台应用：如UI组件在Web、移动端使用不同渲染引擎。
- 多主题系统：同一组件支持多种视觉风格。
- 插件架构：核心逻辑与外部服务解耦。
基本上就这些。桥接模式的关键在于识别出系统中的多个变化维度，并通过组合的方式将它们连接起来，而不是靠层层继承。虽然JavaScript没有严格的接口机制，但通过约定和结构设计完全可以实现这一模式，提升代码的可维护性和扩展性。
