JavaScript 设计模式 - 桥接模式原理与应用实例分析

1. 什么是桥接模式

桥接模式是一种结构型设计模式，它允许你将不同的层级结构分离开来，从而能够独立的变化。它通过桥接接口实现了不同层级结构之间的通信。

桥接模式中包含以下几个角色：

抽象接口（Abstraction）：定义抽象接口，包含通用的方法。
具体接口（ConcreteAbstraction）：实现抽象接口，具体实现通用方法。
实现接口（Implementor）：定义实现接口，具体实现抽象接口中的方法。
具体实现接口（ConcreteImplementor）：实现实现接口，具体实现抽象接口中的方法。

通过桥接模式，抽象接口和实现接口之间松耦合，可以独立变化，从而能够灵活地扩展系统。

下面通过一个实例来演示桥接模式的应用。

2. 桥接模式应用实例

在本例中，我们将使用桥接模式来实现不同类型的窗口，包括警告框（Alert）和确认框（Confirm）。

首先，我们定义一个抽象接口 Window，其中包含一个通用的方法 open：

// 抽象接口
class Window {
  open() {
    // ...
  }
}

然后，我们定义两个具体接口 Alert 和 Confirm，它们都继承自抽象接口 Window：

// 具体接口 Alert
class Alert extends Window {
  open() {
    // ...
  }
}

// 具体接口 Confirm
class Confirm extends Window {
  open() {
    // ...
  }
}

接下来，我们定义一个实现接口，它包含一个方法 show：

// 实现接口
class Dialog {
  show() {
    // ...
  }
}

最后，我们定义两个具体实现接口，分别用来实现 Alert 和 Confirm：

// 具体实现接口 Alert，实现了 Dialog 接口
class AlertDialog extends Dialog {
  show() {
    // ...
  }
}

// 具体实现接口 Confirm，实现了 Dialog 接口
class ConfirmDialog extends Dialog {
  show() {
    // ...
  }
}

现在，我们可以使用桥接模式来创建 Alert 和 Confirm 窗口。具体实现方式如下：

// 创建 Alert 窗口
const alertWindow = new Alert(new AlertDialog())
alertWindow.open()

// 创建 Confirm 窗口
const confirmWindow = new Confirm(new ConfirmDialog())
confirmWindow.open()

通过桥接模式，我们将 Window 和 Dialog 两个分离开来，可以分别进行扩展和修改。

3. 示例说明

下面我们通过两个示例来说明桥接模式的应用。

示例1 - 图形绘制

假设我们正在开发一个图形绘制工具，需要支持两种不同类型的图形，矩形和圆形。如果我们想要为每个图形添加不同的颜色，使用桥接模式可以非常方便地实现这一功能。

首先，我们定义一个抽象接口 Shape，其中包含一个通用的方法 draw：

// 抽象接口 Shape
class Shape {
  constructor(color) {
    this.color = color
  }

  draw() {
    // ...
  }
}

然后，我们定义两个具体接口 Rectangle 和 Circle，它们都继承自抽象接口 Shape：

// 具体接口 Rectangle
class Rectangle extends Shape {
  draw() {
    // ...
  }
}

// 具体接口 Circle
class Circle extends Shape {
  draw() {
    // ...
  }
}

接下来，我们定义一个实现接口，它包含一个方法 fill：

// 实现接口
class Color {
  constructor(fillColor) {
    this.fillColor = fillColor
  }

  fill() {
    // ...
  }
}

最后，我们定义两个具体实现接口，分别用来实现不同颜色的矩形和圆形：

// 具体实现接口 RedRectangle，实现了 Color 接口
class RedRectangle extends Color {
  fill() {
    // ...
  }
}

// 具体实现接口 BlueCircle，实现了 Color 接口
class BlueCircle extends Color {
  fill() {
    // ...
  }
}

现在，我们可以使用桥接模式来创建不同颜色的矩形和圆形。具体实现方式如下：

// 创建红色矩形
const redRectangle = new Rectangle(new RedRectangle())
redRectangle.draw()

// 创建蓝色圆形
const blueCircle = new Circle(new BlueCircle())
blueCircle.draw()

示例2 - 表单验证

假设我们正在开发一个表单验证工具，需要支持两种不同的验证规则，必填和正则验证。如果我们想要为每个验证规则添加不同的错误提示信息，使用桥接模式可以非常方便地实现这一功能。

首先，我们定义一个抽象接口 Validator，其中包含一个通用的方法 validate：

// 抽象接口 Validator
class Validator {
  constructor(errorMessage) {
    this.errorMessage = errorMessage
  }

  validate() {
    // ...
  }
}

然后，我们定义两个具体接口 Required 和 Pattern，它们都继承自抽象接口 Validator：

// 具体接口 Required
class Required extends Validator {
  validate() {
    // ...
  }
}

// 具体接口 Pattern
class Pattern extends Validator {
  validate() {
    // ...
  }
}

接下来，我们定义一个实现接口，它包含一个方法 showError：

// 实现接口
class Error {
  constructor(errorMessage) {
    this.errorMessage = errorMessage
  }

  showError() {
    // ...
  }
}

最后，我们定义两个具体实现接口，分别用来实现不同错误提示信息的必填和正则验证：

// 具体实现接口 RequiredError，实现了 Error 接口
class RequiredError extends Error {
  showError() {
    // ...
  }
}

// 具体实现接口 PatternError，实现了 Error 接口
class PatternError extends Error {
  showError() {
    // ...
  }
}

现在，我们可以使用桥接模式来创建不同验证规则带有不同错误提示信息的表单元素。具体实现方式如下：

// 创建必填输入框
const requiredInput = new Required(new RequiredError())
requiredInput.validate()

// 创建正则验证输入框
const patternInput = new Pattern(new PatternError())
patternInput.validate()