JavaScript设计模式：桥接模式

模式概念

软件系统中可能存在的一个问题：一个类存在两个或多个变化维度，但在传统的继承结构中，这种多维度的变化很难实现。

桥接模式（Bridge Pattern）是一种对象结构型设计模式，用于将抽象部分与其实现部分分离，使它们可以独立地变化。这种模式主要用于处理多维度的系统，允许在运行时动态地切换实现。桥接模式可以将类之间的静态继承关系转换为动态的对象组合关系。

模式结构

• Abstraction（抽象类） ：定义了客户端使用的接口，它维持一个对 Implementor 的引用。
• Implementor（实现类） ：定义了实现类接口，但不实现具体操作，而是延迟到具体的实现类中。
• Refined Abstraction（细化抽象类） ：扩展 Abstraction，添加更多的业务方法。
• Concrete Implementor（具体实现类） ：实现 Implementor 定义的接口，具体实现某种算法或行为。

代码实现

// 实现化
class Implementor {
  operation() {
    throw new Error("operation method must be implemented");
  }
}
​
// 具体实现化 Implementor A
class ConcreteImplementorA extends Implementor {
  operation() {
    console.log("Operation A");
  }
}
​
// 具体实现化 Implementor B
class ConcreteImplementorB extends Implementor {
  operation() {
    console.log("Operation B");
  }
}
​
// 抽象化
class Abstraction {
  constructor(implementor) {
    this.implementor = implementor;
  }
​
  abstraction() {
    console.log("Abstraction");
    this.implementor.operation();
  }
}
​
// 细化抽象化 Refined Abstraction
class RefinedAbstraction extends Abstraction {
  refinedAbstraction() {
    console.log("Refined Abstraction");
    this.implementor.operation();
  }
}
​
// 使用示例
const implementorA = new ConcreteImplementorA();
const abstractionA = new Abstraction(implementorA);
abstractionA.abstraction();
​
const implementorB = new ConcreteImplementorB();
const refinedAbstractionB = new RefinedAbstraction(implementorB);
refinedAbstractionB.refinedAbstraction();

• Abstraction 和 Implementor 的实现可以独立变化，不会影响到彼此。
• 可以在运行时根据需要创建不同的 Implementor 对象，并将其传递给 Abstraction 或 RefinedAbstraction 对象，实现独立扩展。

模式效果

模式优点：

• 解耦：将抽象部分与实现部分分离，降低它们之间的耦合度。
• 扩展性：可以独立地扩展抽象部分和实现部分，不需要修改原来系统，符合开闭原则。
• 灵活性：在运行时动态地切换实现，可以取代多层继承方案，大大减少了子类个数。

模式缺点：

• 复杂性：增加了系统的理解与设计难度，可能会引入更多的类，并且由于关联关系建立在抽象层，要求开发者开始就要针对抽象层进行设计与编程。

模式应用

如果我们需要在抽象化和具体化之间增加更多的灵活性，即避免在两个层次之间建立静态的继承关系，这时使用桥接模式的思想会很有用。桥接模式在前端开发中主要应用于处理多维度的变化。

UI组件库

构建UI组件库时，将按钮、输入框等与样式、主题等分离，从而实现不同样式和主题的组件组合，即用到了桥接模式思想，其中组件按钮、输入框作为抽象部分，样式、主题作为实现部分。

举个具体的示例，比如说现有三种提示信息的组件modal模态框、message弹框、toast弹框，而这些组件也有很多弹出的动画方式，三个提示组件都只实现自己的业务逻辑，但是不实现动画的实现方式，使用各种组合，抽象与实现分离，这就是桥接模式的思想。

const animations = {
  bounce: {
    show() {
      console.log("bounce-show")
    },
    hide() {
      console.log("bounce-hide")
    },
  },
  slide: {
    show() {
      console.log("slide-show")
    },
    hide() {
      console.log("slide-hide")
    },
  },
  rotate: {
    show() {
      console.log("rotate-show")
    },
    hide() {
      console.log("rotate-hide")
    },
  },
}
​
class Toast {
  constructor(ele, animation) {
    this.ele = ele
    this.animation = animation
  }
  show() {
    this.animation.show()
  }
  hide() {
    this.animation.hide()
  }
}
const model1 = new Toast("div1", animations.slide)

ajax数据请求

在进行数据请求时，我们会根据不同的业务请求不同的后端接口，比如登录、列表等，而前端实现请求的具体方式有多种选择，比如Ajax、Axios、Fetch API等，这里不同的接口作为抽象部分，具体方式Ajax、Axios作为实现部分。将这两个部分分离编码，使得可以在运行时根据需要切换不同的请求方式 ，更加灵活并且实现了解耦。

通过以上实例，我们可以看到桥接模式在前端开发中的应用有助于降低代码的耦合度，提高代码的复用性和可维护性。

今天的分享就到这里，希望可以帮助到你！假如你对文章感兴趣，可以来我的公众号：小新学研社。