前端设计模式之桥接模式

桥接模式是一种结构型设计模式,旨在将抽象化与实现化解耦,允许二者独立变化。该模式通过组件化思想实现功能的拆分和组合。文章通过示例解释了如何使用桥接模式解决图形绘制时颜色与形状的问题,对比了不同设计方案的优缺点,并探讨了在前端框架中的应用。
摘要由CSDN通过智能技术生成

桥接模式

桥接(Bridge)是用于把抽象化与实现化解耦,使得二者可以独立变化。这种类型的设计模式属于结构型模式,它通过提供抽象化实现化之间的桥接结构,来实现二者的解耦。

简单的说,就是将比较独立的功能,抽离成单独的组件,然后再需要使用到它的地方,按照使用方式的不同,在进行排列组件。其实这也是现代前端框架组件化思想的来源,不管是 react 还是 vue,开发的过程中,都是尽可能的拆分出各种独立的功能,然后单独开发管理,最后通过各种排列组合实现整个系统。

示例

设想如果要绘制矩形、圆形、正方形,我们至少需要3个形状类,但是如果绘制的图形需要具有不同的颜色,如红色、绿色、蓝色等,此时至少有如下两种设计方案:

图片来源自 js设计模式【详解】—— 桥接模式

  1. 第一种设计方案是为每一种形状都提供一套各种颜色的版本。
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UHmMh07n-1641283007163)(images/extends.png)]

  2. 第二种设计方案是根据实际需要对形状和颜色进行组合(这种就是桥接模式&#x

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值