详解JS设计模式之桥接模式用法

定义

桥接设计模式（Bridge Pattern）属于结构型设计模式的一种，其核心目的是将抽象部分与具体实现部分进行解耦，使得两者能够独立地进行扩展和变化。

组成

在桥接模式的架构中，主要包含两个关键角色：

• 抽象部分（Abstraction）：该部分负责定义高层接口和功能，并持有一个指向实现部分的引用。它通常包含被抽象化的方法或接口，用于定义高层操作的规范。需要注意的是，此处提到的“被抽象了的方法或接口”并非指TypeScript中的抽象方法概念。

• 实现部分（Implementation）：该部分定义了具体的实现逻辑，通常表现为一个接口或抽象类，并向抽象部分提供可供调用的具体方法。

• 通过这种分离机制，桥接模式允许抽象部分和实现部分独立演化。这种解耦带来的显著优势是，当需要新增抽象功能或实现逻辑时，无需修改现有的代码结构。

代码

// 实现部分 - 具体实现A 
class DomElementHandler { 
    constructor(elementId) { 
        this.elementId = elementId; 
    } 
    setText(text) { 
        const element = document.getElementById(this.elementId); 
        element.textContent = text; 
    } 
} 
// 抽象部分 - 桥接类 
class DomBridge { 
    constructor(handler) { 
        this.handler = handler; 
    } 
    /* 错误的写法
    constructor(){
        this.handler = new DomElementHandler("myElement");
    }
    */
    setText(text) { 
        this.handler.setText(text); 
    } 
} 
// 示例用法 
const domHandler = new DomElementHandler("myElement"); 
// 创建具体实现A对象 
const domBridge = new DomBridge(domHandler); 
// 使用具体实现A创建桥接对象 
domBridge.setText("Hello, Bridge Pattern!"); 

符合DIP原则

依赖倒置原则（DIP）是面向对象设计中的重要准则，主张高层模块不应直接依赖低层模块，二者均应依赖于抽象。具体而言，即【抽象不应依赖于具体实现细节，而具体实现细节应依赖于抽象】。

桥接模式通过引入桥接接口或抽象类来落实这一原则。

在桥接模式中，抽象部分与实现部分之间通过组合关系建立关联。这意味着抽象部分不直接依赖具体的实现类，而是依赖于抽象接口或抽象类，从而实现了依赖关系的倒置。

对比策略模式

• 策略模式提供了修改策略的接口，而桥接模式的实现注入发生在构造函数中，因此其实现对象是不可变的。
• 桥接模式强调抽象与实现的解耦，要求方法名必须保持一致（例如均为setText）；相比之下，策略模式可能涉及多种策略，且使用的方法不一定具有抽象性。
• 在使用多个策略时，策略模式允许随意组合它们；而桥接模式必须确保抽象方法与实现方法同名，且不能将多个实现对象进行组合使用。

使用场景

虽然原生JavaScript中没有直接对应此模式的内置语法，但在UI库开发、动画效果、主题切换以及数据源获取等业务场景中，桥接模式的应用较为广泛。

总结

桥接模式主要解决的是统一调用来自不同类的实例对象上同名方法的问题。

到此这篇关于详解JS设计模式之桥接模式用法的文章就介绍到这了,更多相关JS桥接模式内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！