JS设计模式之桥接模式

桥接模式（Bridge Pattern）是一种结构型设计模式，它将抽象部分与它的实现部分分离，使它们都可以独立地变化。桥接模式的核心在于解耦抽象和实现，使得抽象部分和实现部分可以相对独立地变化。

在桥接模式中，包含以下几个主要角色：

• 抽象化（Abstraction）角色：抽象化给出的定义，并保存一个对实现化对象的引用。

• 修正抽象化（Refined Abstraction）角色：扩展抽象化角色，改变和修正父类对抽象化的定义。

• 实现化（Implementor）角色：这个角色给出实现化角色的接口，但不给出具体的实现。它定义了一个实现化的接口，该接口并不涉及实现化的细节。

• 具体实现化（Concrete Implementor）角色：这个角色给出实现化角色接口的具体实现。

接下来就直接上案例举例，设计模式的初衷就是为了能够用这种设计思想在不同的场景中可以优化代码，增加可读性和可维护性

正常我们开发的项目中使用Element-UI等框架的时候都会使用像模态框，滑动框，消息显示框等等，而这些组件，如果我们需要给他们进入项目添加一些动画，例如，弹跳，滑动，旋转，等等，就需要拿到该dom节点然后一个一个的写，这样的话代码量很大的时候，或者后期需要再次添加其他的框，需要添加其他的动画的时候，就很麻烦，这时我们就可以使用桥接模式，来做一个代码的封装。

桥接模式：抽象与实现分离，下面这张图就是抽象的部分

这里可以看到我们定义了一个构造函数，它将接收两个参数，第一个是dom节点元素，第二个是动画，接着我们在这个构造函数的原型上添加了两个方法，一个是显示，一个是隐藏，当我们new 这个构造函数的时候，传入dom节点和需要实现的动画效果，就可以存储到Toast这个函数中，使用的时候使用toast.show()调用原型上的显示和隐藏方法，就可以实现对传进去的dom做一些动画效果。

接下来是实现部分：

实现部分里面我们可以看到，我们将弹跳，滑动，旋转的三个动画效果的显示隐藏都封装到了Animations动画这个对象中。如此封装之后，后期如果我们要添加动画效果，只需要在Animations对象中添加就可以。同时如果要添加其他的方法，如添加，删除等操作，只需要在Animations对象中添加上和prototype原型上挂载就可以。此外，我们还可以构建多个平台，也就是构建多个Toast，不同的Toast可以去匹配不同的动画。

桥接模式

优点 ：把抽象与现实隔离开，有助于独立的管理各组成部分

缺点：每使用一个桥接元素都要增加一次函数调用，这对应用程序的性能会有一些负面影响 --- 提高了系统的复杂程度

以上就是桥接模式的思想和使用方法。