JavaScript桥接模式_抽象与实现分离-js教程-PHP中文网

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

夢幻星辰

发布： 2025-11-23 23:49:02

原创

371人浏览过

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

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

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

为什么需要桥接模式？

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

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

基本结构与实现

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

立即学习“Java免费学习笔记（深入）”；

抽象（Abstraction）：定义高层控制接口，并包含对实现对象的引用。
精化抽象（Refined Abstraction）：扩展抽象接口的具体实现。
实现接口（Implementor）：定义实现类的接口，不一定要与抽象一致。
具体实现（Concrete Implementor）：实现Implementor接口，在不同平台上提供具体行为。

示例：绘制不同颜色的形状

SCA介绍及应用实例中文WORD版

本文档主要讲述的是SCA介绍及应用实例；SCA（Service Component Architecture）是针对SOA提出的一套服务体系构建框架协议，内部既融合了IOC的思想，同时又把面向对象的复用由代码复用上升到了业务模块组件复用，同时将服务接口，实现，部署，调用完全分离，通过配置的形式灵活的组装，绑定。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

查看详情

// 实现接口：颜色渲染器
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

登录后复制