当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript桥接模式：解耦抽象与实现

JavaScript桥接模式：解耦抽象与实现

2025-12-14 22:42:30 0浏览收藏

有志者，事竟成！如果你在学习文章，那么本文《JavaScript桥接模式：抽象与实现分离》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

桥接模式通过将抽象与实现分离，使两者独立变化，避免类爆炸问题。例如在绘制不同颜色形状时，形状和颜色可分别扩展，通过组合关联（如圆形持有渲染器引用）实现灵活搭配，支持运行时切换行为，适用于跨平台、多主题等场景。

JavaScript桥接模式_抽象与实现分离

在JavaScript中，桥接模式（Bridge Pattern）是一种结构型设计模式，它的核心思想是将抽象部分与实现部分分离，使它们可以独立变化。这种解耦方式特别适用于那些可能在多个维度上扩展的系统，比如图形渲染、UI组件或跨平台功能。

为什么需要桥接模式？

当一个类存在多个变化维度时，比如一个形状既有类型（圆形、方形），又有颜色（红色、蓝色），如果用传统的继承方式，每新增一种组合就需要创建一个新的子类，导致类的数量急剧膨胀。

桥接模式通过组合而非继承来解决这个问题：把其中一个维度（如颜色）抽离为独立的实现层级，让另一个维度（如形状）持有其引用。这样，形状和颜色可以各自独立扩展，互不影响。

基本结构与实现

桥接模式通常包含以下角色：

抽象（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