iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >怎么用typescript实现Bridge桥接模式
  • 942
分享到

怎么用typescript实现Bridge桥接模式

2024-04-02 19:04:59 942人浏览 薄情痞子
摘要

今天小编给大家分享一下怎么用typescript实现Bridge桥接模式的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获

今天小编给大家分享一下怎么用typescript实现Bridge桥接模式的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

Bridge(桥接模式)

Bridge(桥接模式)属于结构型模式,是一种解决继承后灵活拓展的方案。

意图:将抽象部分与它的实现部分分离,使它们可以独立地变化。

桥接模式比较难理解,我会一步步还原该设计模式的思考,让你体会这个设计模式是如何一步一步被提炼出来的。

举例子

如果看不懂上面的意图介绍,没有关系,设计模式需要在日常工作里用起来,结合例子可以加深你的理解,下面我准备了三个例子,让你体会什么场景下会用到这种设计模式。

汽车生产线改造为新能源生产线

汽油车与新能源汽车的生产流程有很大相似之处,那么汽油车生产线能否快速改造为新能源汽车生产线呢?

如果汽油车生产线没有将内部实现解耦,只把生产汽油车的各部分独立了出来,对新能源车生产线是没什么用处的,但如果汽油车生产线提供了更底层的能力,比如加装轮胎,加装方向盘,那么这些步骤是可以同时被汽油车与新能源车所共享的。

在设计汽油车生产线时,就将生产过程与汽油车解耦,使其可以快速运用到新能源汽车的生产,这就是桥接模式的一种运用。

窗口(Window)类的派生

假设存在一个 Window 窗口类,其底层实现在不同操作系统是不一样的,假设对于操作系统 A 与 B,分别有 AWindow 与 BWindow 继承自 Window,现在要做一个新功能 ManageWindow(管理器窗口),就要针对操作系统 A 与 B 分别生成 AManageWindow 与 BManageWindow,这样显然不容易拓展。

无论我们新增支持 C 操作系统,还是新增支持一个 IconWindow,类的数量都会成倍提升,因为我们所做的 AMangeWindow 与 BMangeWindow 同时存在两个即以上的独立维度,这使得增加维度时,代码变得很冗余。

适配多个搭建平台的物料

前端搭建平台时,经常出现一些物料(组件)因为固化了某个搭建平台的 api,因此无法迁移到另一个搭建平台,如果要迁移,就需要为不同的平台写不同的组件,而这些组件中大部分 UI 逻辑都是一样的,这使得产生大量代码冗余,如果再兼容一个新搭建平台,或者为已有的 10 个搭建平台再创建一个新组件,工作量都是写一个组件的好几倍。

意图解释

意图:将抽象部分与它的实现部分分离,使它们可以独立地变化。

“抽象” 部分与 “实现” 部分分离,这句话看起来很像接口与实现。确实,如果 “抽象” 指的是 接口(Interface),而 “实现” 指的是 类(Class) 的话,这就是简简单单的 class MyWindow implements Window 类实现过程而已。

但后半句话 “使它们可以独立地变化” 会让你难以和前半句联系起来,如果说 “抽象” 不变,“实现” 可以随意改变还好理解,但反过来就难以解释了。

其实桥接模式中,抽象指的是一种接口(Abstraction),实现指的也是一种接口(Implementor),其中 Implementor 并不是直接实现了 Abstraction 定义的接口,而是提供更底层的方法,使 Abstraction 可以基于它们封装出自己的接口实现。

这样一来,Abstraction 的接口可以随意变化,毕竟调用的是 Implementor 提供函数的组合,只要 Implementor 提供的功能全面,Implementor 可以不变;相应的,Implementor 的实现也可以随意变化,只要提供的底层函数不变,就不影响 Abstraction 对其的使用。

上面举的三个例子都是这样,我们应该把汽油车生产线的标准与通用汽车生产线标准分离、将具体功能窗口与适配不同操作系统的基础 GUI 能力隔离、将组件功能与平台功能隔离,只有做到了抽象部分与实现部分的隔离,才可以通过组合满足更多场景。

结构图

Abstraction:定义抽象类的接口。

RefinedAbstraction:扩充 Abstraction。

Implementor:定义实现类的接口,该接口可以与 Abstraction 接口不一致。

ConcreteImplementor:实现 Implementor 接口并定义它的具体实现。

抽象部分就是 Abstraction,实现部分就是 Implementor,在这个结构图中,它们是分离的,可以各自独立变化的,桥接模式,就是指 imp 这个桥,通过 Implementor 实现 Abstraction 接口,就算是桥接上了,这种组合的桥接相比普通的类实现更灵活,更具有拓展性。

代码例子

对于完全版桥接模式,Implementor 可以有多套实现,Abstraction 不需关心具体用的是哪一种实现,而是通过抽象工厂方式封装。下面举一个简单版的例子。

下面例子使用 typescript 编写。

class Window {

  private windowImp: WindowImp

  public drawBox() {

    // 通过画线生成 box

    this.windowImp.drawLine(0, 1)

    this.windowImp.drawLine(1, 1)

    this.windowImp.drawLine(1, 0)

    this.windowImp.drawLine(0, 0)

  }

}

// 拓展 window 就非常容易

class SuperWindow extends Window {

  public drawIcon {

    // 通过自定义画线

    this.windowImp.drawLine(0, 5)

    this.windowImp.drawLine(3, 9)

  }

}

桥接模式的精髓,通过上面的例子可以这么理解:

Window 的能力是 drawBox,那继承 Window 容易拓展 drawIcon 吗?默认是不行的,因为 Window 并没有提供这个能力。经分析可以看出,划线是一种基础能力,不应该与 Window 代码耦合,因此我们将基础能力放到 windowImp 中,这样 drawIcon 也可以利用其基础能力画线了。

弊端

不要过度抽象,桥接模式是为了让类的职责更单一,维护更便捷,但如果只是个小型项目,桥接模式会增加架构设计的复杂度,而且不正确的模块拆分,把本来关联的逻辑强制解耦,在未来会导致更大的问题。

另外桥接模式也有简单与复杂模式之分,只有一种实现的场景就不要用抽象工厂做过度封装了。

以上就是“怎么用typescript实现Bridge桥接模式”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网JavaScript频道。

--结束END--

本文标题: 怎么用typescript实现Bridge桥接模式

本文链接: https://www.lsjlt.com/news/94634.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 怎么用typescript实现Bridge桥接模式
    今天小编给大家分享一下怎么用typescript实现Bridge桥接模式的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获...
    99+
    2024-04-02
  • .Net结构型设计模式之桥接模式(Bridge)
    目录一、动机(Motivation)二、意图(Intent)三、结构(Structure)四、模式的组成五、桥接模式的具体代码实现六、桥接模式的实现要点:1、桥接模式的优点:2、桥接...
    99+
    2024-04-02
  • Java怎么实现桥接模式
    本文小编为大家详细介绍“Java怎么实现桥接模式”,内容详细,步骤清晰,细节处理妥当,希望这篇“Java怎么实现桥接模式”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。桥接模式(Bridge Pattern)是用于...
    99+
    2023-06-27
  • Javascript中怎么实现桥接模式
    Javascript中怎么实现桥接模式,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。基本理论桥接模式定义:将抽象部分与它的实现部分分离,使它们...
    99+
    2024-04-02
  • Java设计模式之桥接模式怎么实现
    这篇文章主要介绍“Java设计模式之桥接模式怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Java设计模式之桥接模式怎么实现”文章能帮助大家解决问题。一、什么是桥接模式:桥接,顾名思义,就是...
    99+
    2023-07-02
  • Java设计模式的桥接模式怎么实现
    这篇文章主要讲解了“Java设计模式的桥接模式怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Java设计模式的桥接模式怎么实现”吧!什么是桥接模式桥接(Bridge)模式的定义如下:...
    99+
    2023-06-30
  • java如何实现桥接模式
    这篇文章将为大家详细讲解有关java如何实现桥接模式,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。介绍桥接模式 (Bridge)将抽象部分与实现部分分离,使它们都可以独立的变化。桥接模式是一种结构式模式。...
    99+
    2023-05-30
    java
  • Java桥接模式怎么使用
    这篇文章主要介绍“Java桥接模式怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Java桥接模式怎么使用”文章能帮助大家解决问题。其实在现实生活中,有很多类可以有两个或多个维度的变化,如图形...
    99+
    2023-06-30
  • c++桥接模式怎么使用
    本篇内容介绍了“c++桥接模式怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!c++涉及模式 桥接模式(bridge Pattern)...
    99+
    2023-06-04
  • .Net结构型设计模式之桥接模式怎么实现
    本篇内容介绍了“.Net结构型设计模式之桥接模式怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、动机(Motivation)在很多...
    99+
    2023-06-30
  • PHP结构型设计模式之桥接模式怎么实现
    本篇内容介绍了“PHP结构型设计模式之桥接模式怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!桥接模式(Bridge Pattern)...
    99+
    2023-07-05
  • Java设计模式之桥接模式的实现
    桥接模式 桥接模式是将抽象部分与它的实现部分分离,使他们都可以独立地变化。它是一种对象结构型模式,又称为柄体(Handle and Body)模式或接口(Interface)模式。 ...
    99+
    2024-04-02
  • GoLang桥接模式的实现示例
    桥接模式是一种结构型设计模式,通过桥接模式可以将抽象部分和它的实现部分分离。这看着有点儿奇怪,接下来会作详细说明。 桥接模式建议将一个较大的类拆分成两中角色。 抽象角色 - 抽象角色...
    99+
    2024-04-02
  • Java设计模式的桥接模式如何实现
    本文小编为大家详细介绍“Java设计模式的桥接模式如何实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“Java设计模式的桥接模式如何实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。什么是桥接模式桥接(Bri...
    99+
    2023-07-06
  • Java设计模式之如何实现桥接模式
    这篇文章主要为大家展示了“Java设计模式之如何实现桥接模式”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Java设计模式之如何实现桥接模式”这篇文章吧。桥接模式桥接模式是将抽象部分与它的实现部...
    99+
    2023-06-15
  • JavaScript设计模式中的桥接和中介者模式怎么实现
    这篇文章主要介绍“JavaScript设计模式中的桥接和中介者模式怎么实现”,在日常操作中,相信很多人在JavaScript设计模式中的桥接和中介者模式怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”J...
    99+
    2023-07-02
  • 什么是php桥接模式
    本篇内容主要讲解“什么是php桥接模式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“什么是php桥接模式”吧!说明将两个原本不相关的类结合在一起,然后利用两个类中的方法和属性,输出一份新的结果。...
    99+
    2023-06-20
  • php桥接模式的作用是什么
    这篇文章主要讲解了“php桥接模式的作用是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“php桥接模式的作用是什么”吧!作用说明桥接模式分离抽象接口及其实现部分,实现解耦,比继承更好的解...
    99+
    2023-06-20
  • docker桥接模式的作用是什么
    Docker桥接模式(Bridge Mode)是Docker的一种网络模式,它允许容器通过一个虚拟的网络桥接器连接到宿主机的网络接口...
    99+
    2023-10-22
    docker
  • PHP桥接模式的优点与实现方法是什么
    这篇文章主要介绍“PHP桥接模式的优点与实现方法是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“PHP桥接模式的优点与实现方法是什么”文章能帮助大家解决问题。桥接模式Bridge Pattern...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作