概念

桥接模式（Bridge Pattern）是一种结构型设计模式，它用于将抽象部分与它的实现部分分离，使它们可以独立变化

桥接模式通过将继承关系转化为组合关系来实现这一点


在桥接模式中，存在两个独立的继承层次结构：抽象部分（Abstraction）和实现部分（Implementation）

抽象部分定义了高层次的抽象接口，而实现部分则提供了这些接口的具体实现。通过将抽象部分和实现部分分离，可以使它们可以独立地扩展和变化，而不会相互影响


这种模式的核心思想是通过抽象与实现之间的桥梁来连接它们，使得它们可以独立变化

这种分离使得系统更加灵活，能够更好地应对需求变化。


举个简单的例子，考虑一个绘制图形的程序

可以有不同类型的图形（如圆形、矩形等），也可以有不同的绘制方式（如在屏幕上绘制、在打印机上绘制等）

使用桥接模式，可以将图形的类型和绘制方式分离开来，使得可以很容易地添加新的图形类型或绘制方式，而不需要修改已有的代码


实现条件

  1. 存在多个维度的变化

    桥接模式适用于有多个维度的变化，并且这些变化需要独立地进行扩展

    例如，一个类有两个或更多的维度，每个维度都可能变化，而且这些变化不应该相互影响

  2. 需要在抽象部分和实现部分之间建立关联

    桥接模式的核心是将抽象部分和实现部分分离，但又需要在它们之间建立关联

    因此，在桥接模式中，需要有一种方式将抽象部分和实现部分连接起来，使它们可以协同工作

  3. 需要在运行时选择具体实现

    桥接模式适用于需要在运行时选择具体实现的情况

    通过桥接模式，可以将抽象部分和实现部分分离开来，并且可以在运行时动态地选择具体的实现

  4. 可以通过组合而不是继承来实现

    在桥接模式中，通常是通过组合而不是继承来实现抽象部分和实现部分之间的关联

    因此，需要考虑如何将抽象部分和实现部分通过组合关系来连接起来


优点

  1. 分离抽象和实现

    桥接模式通过将抽象部分和实现部分分离，使它们可以独立变化

    这样一来，可以更容易地扩展和修改系统的功能。

  2. 可扩展性

    由于桥接模式分离了抽象部分和实现部分，因此可以很容易地添加新的抽象部分或实现部分，而不会影响到已有的代码。

  3. 透明性

    客户端不需要了解抽象部分和实现部分的具体实现细节，只需要通过抽象接口与抽象部分交互即可，这提高了系统的透明性。

  4. 高内聚低耦合

    桥接模式使得系统中的不同部分之间的耦合度降低，同时提高了内聚性，使得系统更易于理解和维护。


缺点

  1. 增加复杂性

    引入桥接模式会增加一定的复杂性，因为需要定义抽象部分、实现部分以及它们之间的桥梁，这可能会增加代码量和理解难度

  2. 可能导致过度设计

    如果系统中的抽象部分和实现部分之间的关系并不复杂，使用桥接模式可能会显得过度设计，增加不必要的开销

  3. 抽象和实现分离的代价

    虽然将抽象部分和实现部分分离可以提高系统的灵活性和可扩展性，但同时也会增加系统的理解难度，特别是在复杂的系统中可能会增加维护的成本


实现方式

基础的Shape类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/**
 * Shape 类定义了基本的形状对象，包括颜色和位置属性，并提供了一系列方法来操作这些属性。
 * @constructor
 * @param {string} color - 形状的颜色，默认为"black"。
 */
class Shape {
    constructor(color = "black") {
        this.color = color  // 设置形状颜色
        this.position = { x: 0, y: 0 }  // 初始化形状位置为原点
    }
    
    /**
     * 设置形状的颜色。
     * @param {string} color - 新的颜色值，默认为"black"。
     */
    setColor(color = "black") {
        this.color = color
    }
    
    /**
     * 获取形状的颜色。
     * @returns {string} 返回当前形状的颜色。
     */
    getColor() {
        return this.color
    }
    
    /**
     * 设置形状的位置。
     * @param {number} x - x轴坐标。
     * @param {number} y - y轴坐标。
     */
    setPosition(x, y) {
        this.position.x = x
        this.position.y = y
    }
    
    /**
     * 获取形状的位置。
     * @returns {Object} 返回一个包含x和y属性的对象。
     */
    getPosition() {
        return { ...this.position }
    }
    
    /**
     * 抽象方法，用于绘制形状。子类需要重写此方法。
     */
    draw() {
        throw new Error("Method 'draw' must be implemented.")
    }
}

export default Shape  // 导出默认的 Shape 类


使用方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/**
 * Square 类继承自 Shape 类，代表一个正方形形状。
 * @extends Shape
 */
class Square extends Shape {
    /**
     * 构造一个新的 Square 实例。
     * @param {string} color 正方形的颜色。
     * @param {number} sideLength 正方形的边长。
     */
    constructor(color, sideLength) {
        super(color) // 调用父类的构造函数设置颜色
        this.setSideLength(sideLength) // 设置正方形的边长
    }
    
    /**
     * 设置正方形的边长。
     * @param {number} sideLength 想要设置的边长值。
     * @throws {Error} 如果边长小于等于零，则抛出错误。
     */
    setSideLength(sideLength) {
        if (sideLength <= 0) {
            throw new Error("Side length must be greater than zero.")
        }
        this.sideLength = sideLength
    }
    
    /**
     * 获取正方形的边长。
     * @returns {number} 返回当前正方形的边长。
     */
    getSideLength() {
        return this.sideLength
    }
    
    /**
     * 绘制正方形。
     * 在控制台输出绘制的信息，包括颜色和边长。
     */
    draw() {
        console.log(`Drawing Square with color ${this.getColor()} and side length ${this.getSideLength()}`)
    }
}

// 创建一个蓝色的正方形实例，边长为20
const blueSquare = new Square("blue", 20)

// 设置正方形的位置为 (200, 200)
blueSquare.setPosition(200, 200)

// 获取并输出正方形的位置信息
console.log("Square position:", blueSquare.getPosition())

// 输出正方形的边长
console.log("Square side length:", blueSquare.getSideLength())

// 绘制正方形
blueSquare.draw() // 输出：Drawing Square with color blue and side length 20


场景

  1. UI 组件库：
    • UI 组件库通常需要支持多种不同的主题样式和外观，例如不同的色彩、字体、布局等。桥接模式可以用来将 UI 组件的核心功能与不同的主题样式进行解耦，从而实现灵活的主题切换。
  2. 跨浏览器兼容性库：
    • 在前端开发中，需要考虑不同浏览器之间的兼容性问题，例如不同的 CSS 属性、JavaScript API 等。桥接模式可以用来将前端代码的核心功能与不同的浏览器兼容性进行解耦，从而实现跨浏览器兼容性。
  3. 数据可视化库：
    • 数据可视化库通常需要支持多种不同的图表类型和图形样式，例如折线图、柱状图、饼图等。桥接模式可以用来将数据可视化库的核心功能与不同的图表类型和图形样式进行解耦，从而实现灵活的数据可视化。
  4. 前端框架：
    • 前端框架（如 React、Vue、Angular 等）通常需要支持多种不同的 UI 组件、路由、状态管理等功能。桥接模式可以用来将前端框架的核心功能与不同的 UI 组件库、路由库、状态管理库进行解耦，从而实现灵活的前端开发。
  5. HTTP 请求库：
    • 前端应用通常需要与后端进行数据交互，例如发送 HTTP 请求获取数据。桥接模式可以用来将前端应用的核心功能与不同的 HTTP 请求库进行解耦，从而实现灵活的数据交互。


源代码