桥接模式(Bridge)的多维度扩展实现

桥接模式是一种结构型设计模式，用于将抽象部分与实现部分分离，使它们可以独立变化。通过组合关系替代继承关系，避免多层继承带来的复杂性。在JavaScript中，桥接模式特别适合处理多维度变化的场景，例如UI组件与平台适配、数据格式与渲染逻辑的解耦等。

桥接模式的核心思想

桥接模式包含两个关键角色：

1. 抽象部分（Abstraction）：定义高层控制逻辑，依赖实现部分完成底层操作
2. 实现部分（Implementor）：定义底层接口，供抽象部分调用

这种分离使得抽象和实现可以独立扩展，不会相互影响。例如，一个图形绘制系统可能有多种形状（圆形、方形）和多种渲染方式（Canvas、SVG），使用桥接模式可以避免创建圆形Canvas渲染、圆形SVG渲染等组合类。

// 实现部分接口
class Renderer {
  renderCircle(radius) {
    throw new Error('必须实现renderCircle方法');
  }
}

// 具体实现：Canvas渲染
class CanvasRenderer extends Renderer {
  renderCircle(radius) {
    console.log(`使用Canvas绘制半径为${radius}的圆`);
  }
}

// 具体实现：SVG渲染
class SVGRenderer extends Renderer {
  renderCircle(radius) {
    console.log(`使用SVG绘制半径为${radius}的圆`);
  }
}

// 抽象部分
class Shape {
  constructor(renderer) {
    this.renderer = renderer;
  }
}

// 扩展抽象：圆形
class Circle extends Shape {
  constructor(renderer, radius) {
    super(renderer);
    this.radius = radius;
  }
  
  draw() {
    this.renderer.renderCircle(this.radius);
  }
}

// 使用
const canvasCircle = new Circle(new CanvasRenderer(), 10);
canvasCircle.draw(); // 使用Canvas绘制半径为10的圆

const svgCircle = new Circle(new SVGRenderer(), 5);
svgCircle.draw(); // 使用SVG绘制半径为5的圆

多维度扩展的实现方式

当系统需要在多个维度上变化时，桥接模式的优势更加明显。考虑一个跨平台UI组件库，需要支持不同平台（Web、Mobile）和不同主题（Light、Dark）。

传统继承方式的问题

使用继承会导致类爆炸：

UIComponent
├── WebLightButton
├── WebDarkButton
├── MobileLightButton
└── MobileDarkButton

桥接模式解决方案

将平台和主题两个维度分离：

// 主题实现接口
class Theme {
  getColor() {
    throw new Error('必须实现getColor方法');
  }
}

// 具体主题实现
class LightTheme extends Theme {
  getColor() {
    return '白色';
  }
}

class DarkTheme extends Theme {
  getColor() {
    return '黑色';
  }
}

// 平台实现接口
class Platform {
  render(component) {
    throw new Error('必须实现render方法');
  }
}

// 具体平台实现
class WebPlatform extends Platform {
  render(component) {
    console.log(`在Web上渲染${component.getName()}，使用${component.getTheme().getColor()}主题`);
  }
}

class MobilePlatform extends Platform {
  render(component) {
    console.log(`在Mobile上渲染${component.getName()}，使用${component.getTheme().getColor()}主题`);
  }
}

// 抽象UI组件
class UIComponent {
  constructor(platform, theme) {
    this.platform = platform;
    this.theme = theme;
  }
  
  getName() {
    return '通用组件';
  }
  
  getTheme() {
    return this.theme;
  }
  
  render() {
    this.platform.render(this);
  }
}

// 具体组件
class Button extends UIComponent {
  getName() {
    return '按钮';
  }
}

// 使用
const webLightButton = new Button(new WebPlatform(), new LightTheme());
webLightButton.render(); // 在Web上渲染按钮，使用白色主题

const mobileDarkButton = new Button(new MobilePlatform(), new DarkTheme());
mobileDarkButton.render(); // 在Mobile上渲染按钮，使用黑色主题

动态切换实现

桥接模式的另一个优势是可以在运行时动态切换实现部分。这在需要根据条件改变行为时非常有用。

class DynamicShape {
  constructor(renderer) {
    this.renderer = renderer;
  }
  
  setRenderer(renderer) {
    this.renderer = renderer;
  }
  
  draw() {
    throw new Error('必须实现draw方法');
  }
}

class DynamicCircle extends DynamicShape {
  constructor(renderer, radius) {
    super(renderer);
    this.radius = radius;
  }
  
  draw() {
    this.renderer.renderCircle(this.radius);
  }
}

// 使用
const circle = new DynamicCircle(new CanvasRenderer(), 8);
circle.draw(); // 使用Canvas绘制半径为8的圆

// 动态切换渲染器
circle.setRenderer(new SVGRenderer());
circle.draw(); // 使用SVG绘制半径为8的圆

与策略模式的对比

桥接模式常与策略模式混淆，但两者有本质区别：

• 策略模式关注行为的替换，通常在单个维度上变化
• 桥接模式关注抽象和实现的分离，处理多个独立变化的维度

例如，排序算法使用策略模式，而图形渲染系统更适合桥接模式。

实际应用案例

表单验证系统

考虑一个表单验证系统，需要支持：

1. 不同验证规则（必填、邮箱格式、长度限制）
2. 不同错误显示方式（控制台、页面提示、弹窗）

// 错误显示实现接口
class ErrorDisplay {
  show(error) {
    throw new Error('必须实现show方法');
  }
}

// 具体错误显示实现
class ConsoleDisplay extends ErrorDisplay {
  show(error) {
    console.error(`验证错误: ${error}`);
  }
}

class AlertDisplay extends ErrorDisplay {
  show(error) {
    alert(`错误: ${error}`);
  }
}

// 验证规则抽象
class Validator {
  constructor(display) {
    this.display = display;
  }
  
  validate(input) {
    throw new Error('必须实现validate方法');
  }
}

// 具体验证规则
class RequiredValidator extends Validator {
  validate(input) {
    if (!input) {
      this.display.show('字段不能为空');
      return false;
    }
    return true;
  }
}

class EmailValidator extends Validator {
  validate(input) {
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input)) {
      this.display.show('邮箱格式不正确');
      return false;
    }
    return true;
  }
}

// 使用
const emailInput = 'test@example';
const consoleEmailValidator = new EmailValidator(new ConsoleDisplay());
consoleEmailValidator.validate(emailInput); // 控制台输出: 验证错误: 邮箱格式不正确

const alertRequiredValidator = new RequiredValidator(new AlertDisplay());
alertRequiredValidator.validate(''); // 弹出alert: 错误: 字段不能为空

数据存储系统

另一个典型应用是数据存储系统，需要支持：

1. 不同数据源（本地存储、API、IndexedDB）
2. 不同数据格式（JSON、XML、二进制）

// 数据格式处理接口
class DataFormatter {
  format(data) {
    throw new Error('必须实现format方法');
  }
  
  parse(data) {
    throw new Error('必须实现parse方法');
  }
}

// 具体数据格式处理
class JSONFormatter extends DataFormatter {
  format(data) {
    return JSON.stringify(data);
  }
  
  parse(data) {
    return JSON.parse(data);
  }
}

class XMLFormatter extends DataFormatter {
  format(data) {
    // 简化示例
    return `<data>${JSON.stringify(data)}</data>`;
  }
  
  parse(data) {
    // 简化示例
    return JSON.parse(data.match(/<data>(.*?)<\/data>/)[1]);
  }
}

// 数据源抽象
class DataSource {
  constructor(formatter) {
    this.formatter = formatter;
  }
  
  save(key, data) {
    throw new Error('必须实现save方法');
  }
  
  load(key) {
    throw new Error('必须实现load方法');
  }
}

// 具体数据源实现
class LocalStorageSource extends DataSource {
  save(key, data) {
    localStorage.setItem(key, this.formatter.format(data));
  }
  
  load(key) {
    const data = localStorage.getItem(key);
    return data ? this.formatter.parse(data) : null;
  }
}

class APISource extends DataSource {
  constructor(formatter, endpoint) {
    super(formatter);
    this.endpoint = endpoint;
  }
  
  async save(key, data) {
    const response = await fetch(`${this.endpoint}/${key}`, {
      method: 'POST',
      body: this.formatter.format(data)
    });
    return response.json();
  }
  
  async load(key) {
    const response = await fetch(`${this.endpoint}/${key}`);
    const data = await response.text();
    return this.formatter.parse(data);
  }
}

// 使用
const userData = { name: '张三', age: 30 };

// 本地存储+JSON格式
const jsonLocalStorage = new LocalStorageSource(new JSONFormatter());
jsonLocalStorage.save('user', userData);
console.log(jsonLocalStorage.load('user')); // { name: '张三', age: 30 }

// API+XML格式
const xmlApiSource = new APISource(new XMLFormatter(), 'https://api.example.com/data');
xmlApiSource.save('user', userData);
// 假设API返回XML格式数据
xmlApiSource.load('user').then(data => console.log(data));

性能与复杂度权衡

桥接模式通过组合代替继承，虽然增加了灵活性，但也带来一些性能开销：

1. 需要额外的对象创建和引用
2. 方法调用需要通过桥接层转发

在性能敏感的场景中，需要权衡灵活性和性能。现代JavaScript引擎对小型对象的处理效率很高，这种开销通常可以忽略。

与其他模式的协同

桥接模式常与其他模式结合使用：

• 工厂方法模式：创建具体的实现对象
• 抽象工厂模式：创建相关的一系列实现
• 适配器模式：使不兼容的接口能够协同工作

// 桥接模式+工厂方法示例
class RendererFactory {
  static create(type) {
    switch(type) {
      case 'canvas':
        return new CanvasRenderer();
      case 'svg':
        return new SVGRenderer();
      default:
        throw new Error(`未知的渲染类型: ${type}`);
    }
  }
}

// 使用工厂创建桥接对象
const renderer = RendererFactory.create('svg');
const shape = new Circle(renderer, 15);
shape.draw();

测试策略

桥接模式使单元测试更加容易，可以分别测试抽象部分和实现部分：

// 测试实现部分
describe('CanvasRenderer', () => {
  it('应正确渲染圆形', () => {
    const renderer = new CanvasRenderer();
    spyOn(console, 'log');
    renderer.renderCircle(10);
    expect(console.log).toHaveBeenCalledWith('使用Canvas绘制半径为10的圆');
  });
});

// 测试抽象部分
describe('Circle', () => {
  it('应调用渲染器的renderCircle方法', () => {
    const mockRenderer = {
      renderCircle: jest.fn()
    };
    const circle = new Circle(mockRenderer, 10);
    circle.draw();
    expect(mockRenderer.renderCircle).toHaveBeenCalledWith(10);
  });
});

浏览器兼容性处理

在前端开发中，桥接模式可用于处理浏览器兼容性问题：

// 浏览器特性实现接口
class BrowserFeature {
  supports(feature) {
    throw new Error('必须实现supports方法');
  }
  
  execute() {
    throw new Error('必须实现execute方法');
  }
}

// 具体浏览器实现
class ModernBrowser extends BrowserFeature {
  supports(feature) {
    return feature in document.body.style;
  }
  
  execute(feature, value) {
    document.body.style[feature] = value;
  }
}

class LegacyBrowser extends BrowserFeature {
  supports(feature) {
    const prefixes = ['webkit', 'moz', 'ms', 'o'];
    return prefixes.some(prefix => `${prefix}${feature}` in document.body.style);
  }
  
  execute(feature, value) {
    const prefixes = ['webkit', 'moz', 'ms', 'o'];
    for (const prefix of prefixes) {
      const prefixedFeature = `${prefix}${feature}`;
      if (prefixedFeature in document.body.style) {
        document.body.style[prefixedFeature] = value;
        return;
      }
    }
  }
}

// 特性使用抽象
class FeatureApplier {
  constructor(browser) {
    this.browser = browser;
  }
  
  apply(feature, value) {
    if (this.browser.supports(feature)) {
      this.browser.execute(feature, value);
    } else {
      console.warn(`不支持的特性: ${feature}`);
    }
  }
}

// 使用
const isModern = 'transform' in document.body.style;
const browser = isModern ? new ModernBrowser() : new LegacyBrowser();
const applier = new FeatureApplier(browser);
applier.apply('transform', 'rotate(45deg)');