简介

• 桥接模式（Bridge Pattern）是一种结构型设计模式，其目的是将抽象部分与其实现部分分离，使它们可以独立地变化。在 JavaScript 中，桥接模式通过组合而非继承来实现这一目标，这有助于减少类之间的耦合，并提高代码的可扩展性。

桥接模式的基本构成

• 桥接模式通常涉及以下两个方面：

  • 抽象部分（Abstraction）：这部分定义了抽象类的接口。它持有一个对实现部分对象的引用，所有对这个类的请求都会转发给这个实现部分。
  • 实现部分（Implementor）：这是一个接口或抽象类，定义了实际操作的接口。不同的具体实现类将按照这个接口实现具体操作。

  这种分离的好处是，抽象部分可以不受实现部分的影响地发展，反之亦然。这样，系统中的任何一方都可以独立地更改或扩展，而不会影响另一方。

示例：渲染器和形状

• 假设我们需要开发一个图形库，可以渲染不同形状，如圆形和方形。同时，支持不同的渲染方式，如矢量渲染和光栅渲染。

  Implementor - 渲染器接口（Renderer）：

  class Renderer {
    renderCircle(radius) {}
    renderSquare(side) {}
  }
  

  具体实现类 - 矢量渲染器和光栅渲染器：

  class VectorRenderer extends Renderer {
    renderCircle(radius) {
      console.log(`Drawing a circle of radius ${radius} with vector renderer`);
    }
  
    renderSquare(side) {
      console.log(`Drawing a square of side ${side} with vector renderer`);
    }
  }
  
  class RasterRenderer extends Renderer {
    renderCircle(radius) {
      console.log(`Drawing pixels for a circle of radius ${radius} with raster renderer`);
    }
  
    renderSquare(side) {
      console.log(`Drawing pixels for a square of side ${side} with raster renderer`);
    }
  }
  

  Abstraction - 形状：

  class Shape {
    constructor(renderer) {
      this.renderer = renderer;
    }
  
    draw() {}
    resize() {}
  }
  

  具体的形状类 - 圆形和方形：

  class Circle extends Shape {
    constructor(renderer, radius) {
      super(renderer);
      this.radius = radius;
    }
  
    draw() {
      this.renderer.renderCircle(this.radius);
    }
  
    resize(factor) {
      this.radius *= factor;
    }
  }
  
  class Square extends Shape {
    constructor(renderer, side) {
      super(renderer);
      this.side = side;
    }
  
    draw() {
      this.renderer.renderSquare(this.side);
    }
  }
  

  使用桥接模式：

  const vectorRenderer = new VectorRenderer();
  const rasterRenderer = new RasterRenderer();
  
  const circle = new Circle(vectorRenderer, 5);
  circle.draw();  // 输出：Drawing a circle of radius 5 with vector renderer
  
  const square = new Square(rasterRenderer, 4);
  square.draw();  // 输出：Drawing pixels for a square of side 4 with raster renderer
  

优点和适用场景

• 优点：

  • 分离抽象和实现：使得抽象部分和实现部分可以独立地变化和扩展。
  • 减少类的数量：避免在每个实现需要不同抽象的情况下的类爆炸问题。
  • 提高扩展性：可以独立地增加新的抽象部分和实现部分，而不会影响到其他代码。

• 适用场景：

  • 当你想避免抽象部分和具体实现部分之间的永久绑定时。
  • 当两个维度的变化都很可能时，使用桥接模式可以独立地进行扩展，而不是通过继承来增加子类的数量。
  • 当需要跨多个平台运行时，其实现细节可能会有所不同，桥接模式可以帮助将平台独立的代码与平台相关的代码分离开来。

总结

• 在 JavaScript 中，桥接模式通过将抽象部分和实现部分分离，有助于管理和最小化各个类的复杂性。这种模式特别适合于那些可能需要在多个维度上变化的系统设计，例如图形渲染示例中的不同形状与不同渲染技术。通过使用桥接模式，可以灵活地组合不同的抽象和实现，从而提供更加动态的系统架构。