详解JS设计模式之桥接模式用法
更新时间：2023年08月27日 11:11:06 作者：慕仲卿
javascript桥接桥接设计模式（Bridge Pattern）是一种结构型设计模式,它用于将抽象部分与其具体实现部分分离,使它们可以独立地变化,本文将通过代码示例详解的给大家介绍一下JS桥接模式,需要的朋友可以参考下
定义
桥接设计模式（Bridge Pattern）是一种结构型设计模式，它用于将抽象部分与其具体实现部分分离，使它们可以独立地变化。
组成
在桥接模式中，有两个关键角色：
抽象部分（Abstraction）：抽象部分定义了高层的接口和功能，它持有一个对实现部分的引用。抽象部分通常包含被抽象了的方法或接口，用于定义高层接口的操作。 注意这里被抽象了的方法或接口不是Ts中的抽象方法。
实现部分（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原则
依赖倒置原则：依赖倒置原则是面向对象设计中的一个重要原则，它主张高层模块不应该依赖于低层模块，两者都应该依赖于抽象。也就是说，【抽象不应该依赖于具体实现细节，具体实现细节应该依赖于抽象】。
桥接模式通过引入一个桥接接口或抽象类来实现依赖倒置原则。
抽象部分和实现部分之间通过组合关系进行关联。这样，抽象部分不依赖于具体实现类，而是依赖于抽象接口或抽象类，从而实现了依赖倒置。
对比策略模式
- 策略模式提供了一个修改策略的接口，而桥接模式注入实现的过程是在构造函数中，所以是不可变的
- 桥接模式强调抽象和实现的解耦，所以方法名必须一致，都是setText，而策略模式可能会用到多个策略，并且使用的方法不抽象
- 策略模式使用多个策略的时候可以将它们随意组合，而桥接模式必须保证抽象方法和实现方法同名，不能将实现对象组合使用
使用场景
原生js中没有直接对此模式的使用，但是在UI库开发，动画，主题，获取数据源的业务场景中用得较多。
总结
桥接模式解决的是：统一提调来自不同类的实例对象上的同名方法的问题。
到此这篇关于详解JS设计模式之桥接模式用法的文章就介绍到这了,更多相关JS桥接模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JS封装cavans多种滤镜组件,本文主要是讲解图片滤镜的效果以及实现思路，如需更多的滤镜效果可以研究算法或者参考其他的一些开源库glfx.js、lena.js等等,需要的朋友可以参考下2022-02-02
IE的 JScript 存在内存泄露的bug 想必大家都清楚或者有耳闻了。这是由于IE的内存回收管理器的一个设计错误导致的2011-10-10
这篇文章主要为大家详细介绍了原生JS实现鼠标滑动撒爱心特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
JavaScript的变量声明提升问题浅析(Hoisting)
大家应该都只奥javascript的变量声明具有hoisting机制，JavaScript引擎在执行的时候，会把所有变量的声明都提升到当前作用域的最前面。网上关于JavaScript的变量声明提升问题的文章有很多，这篇文章将再次谈谈关于这方面的问题，有需要的朋友们可以参考借鉴。2016-11-11
其实防抖和节流不仅仅在面试中会让大家手写，在实际项目中也可以起到性能优化的作用，所以还是很有必要掌握的。本文就带大家彻底学会JavaScript手写防抖节流，需要的可以参考一下2022-11-11
这篇文章主要介绍了原生Javascript封装的一个AJAX函数分享,本文是实际项目中提取出来的,简单易用,需要的朋友可以参考下2014-10-10
JavaScript中的函数是一种重要的编程概念，它允许我们封装可重用的代码块，并在需要时进行调用，本文将深入介绍JavaScript函数的各个方面，包括函数定义和调用、参数和返回值、作用域和闭包、高阶函数以及常见的函数应用场景，感兴趣的朋友一起看看吧2023-08-08
本文主要介绍了JS PromiseLike的判定与使用详解, 文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-11-11
单例模式是一种创建型设计模式,它确保一个类只有一个实例,并提供一个全局访问点,这篇文章主要介绍了前端(JavaScript)中单例模式的实现与应用实例的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-07-07
javascript语言是网页中广泛使用的一种脚本语言，通过本文给大家介绍javascript基本语法，需要的朋友可以参考下本文2016-01-01
最新评论