设计模式-桥接模式

简介

  • 桥接模式(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 中,桥接模式通过将抽象部分和实现部分分离,有助于管理和最小化各个类的复杂性。这种模式特别适合于那些可能需要在多个维度上变化的系统设计,例如图形渲染示例中的不同形状与不同渲染技术。通过使用桥接模式,可以灵活地组合不同的抽象和实现,从而提供更加动态的系统架构。
  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值