前端设计模式应用--桥接模式

玉
182 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天

介绍

  • 桥接模式是将抽象部分与它的实现部分分离，使它们都可以独立地变化。它是一种对象结构型模式，又称为柄体(Handle and Body)模式或接口(interface)模式。

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

    这种模式涉及到一个作为桥接的接口，使得实体类的功能独立于接口实现类。这两种类型的类可被结构化改变而互不影响

使用场景

  • 如果一个系统需要在构件的抽象化角色和具体化角色之间增加更多的灵活性，避免在两个层次之间建立静态的继承联系，通过桥接模式可以使它们在抽象层建立一个关联关系。

  • 对于那些不希望使用继承或因为多层次继承导致系统类的个数急剧增加的系统，桥接模式尤为适用。

  • 一个类存在两个独立变化的维度，且这两个维度都需要进行扩展。

应用实践

职责明确

  • 抽象部分：提供高层控制逻辑，依赖于完成底层实际工作的实现对象
  • 实现部分：为所有具体实现声明通用接口。抽象部分仅能通过在这里声明的方法于实现对象交互
  • 实现具体：包括特定于平台的代码
  • 精确抽象：提供控制逻辑的变体，与其父类一样，他们通过通用实现接口与不同的实现进行交互
  • 客户端：仅关心如何与抽象部分合作。但是，客户端需要将抽象对象与一个实现对象连接起来

实现

理解桥接模式的思想，关键是要理解其分离抽象部分和实现部分的思想。我们举例进行说明

interface Dialog {
    show(): void;
    hide(): void;
}

class Toase implements Dialog {
    constructor(animation, node) {
        this.node = node
        this.animation = animation

    }
    public show() {
        this.animation.show(this.node)

    }
    public hide() {
        this.animation.hide(this.node)
    }
}
clasee Message implements Dialog {
    constructor(animation, node) {
        this.node = node
        this.animation = animation
    }

    public show() {
        this.animation.show(this.node)
    }
    public hide() {
        this.animation.hide(this.node)
    }
}


const Animations = {
    bounce: {
        show: function (node) {
            console.log(node + '弹跳着出现')
        }
        hide: function (node) {
            console.log(node + '弹跳着消失')
        }
    },
    slide: {
        show: function (node) {
            console.log(node + '滑着出现')
        }
        hide: function (node) {
            console.log(node + '滑着消失')
        }
    }
}

let toast = new Toast('元素1', Animations.bounce)
toast.show()

let messageBox = new Message('元素2', Animations.slide)
messageBox.hide()

汇总

优点特性

  • 可以创建与平台无关的类和程序

  • 把抽象与实现隔离开，有助于独立地管理各组成部分。分离了抽象和实现部分，将实现层（DOM 元素事件触发并执行具体修改逻辑）和抽象层（ 元素外观、尺寸部分的修改函数）解耦，有利于分层；

  • 桥接模式把抽象和实现隔离开，有助于独立的管理软件的各个部分，bug也更容易查找，发生严重故障的可能性也减少了

缺点弊端

  • 桥接模式的引入会增加系统的理解与设计难度，由于聚合关联关系建立在抽象层，要求开发者针对抽象进行设计与编程。

  • 对高内聚的类使用桥接模式可能会让代码更加复杂化。

  • 桥接模式要求两个部件没有耦合关系，否则无法独立地变化，因此要求正确的对系统变化的维度进行识别，使用范围存在局限性。

avatar
文章
阅读
粉丝