1 什么是桥接模式

Bridge模式允许两个组件，即客户端和服务一起工作，每个组件都有自己的接口。Bridge是一种高级架构模式，它的主要目标是通过两级抽象来编写更好的代码。它有利于对象之间非常松散的耦合，有时也被称为双适配器模式。 桥接模式的作用在于将实现部分和抽象部分分离，以便两者可以独立的变化。这种类型的设计模式属于结构型模式，它通过提供抽象化和实现化之间的桥接结构，来实现二者的解耦。Bridge模式弱化了代码之间的耦合，将抽象和其实现分离，便于二者独立变化、让API更加健壮，有利于分层，提高组件的模块化程度，提高可拓性，但同时增加了开发成本，在性能方面可能会有所降低。

Bridge模式的一个例子是一个应用程序（客户端）和一个数据库驱动（服务）。应用程序实现了一个数据库API，例如ODBC，但在这个API背后，你会发现每个驱动程序对每个数据库厂商（SQL Server、MySQL、Oracle等）的实现是完全不同的。

Bridge模式是一个很好的驱动开发模式，但在JavaScript中很少见到。

2 参与者

桥接模式的主要参与对象有：

客户端（Client）：调用到Abstraction中请求操作

抽象(Abstraction) ：JavaScript中没有使用，声明一个第一层抽象的接口，维护对实施者的引用

RefinedAbstraction ：实现并扩展了Abstraction定义的接口

执行者 (Implementor)： JavaScript中未使用，为第二层或实现者抽象声明一个接口。

ConcreteImplementor ：实现了Implementor接口，并定义了它的效果。

3 实例讲解

在下面的代码中使用桥式模式，使输入和输出设备可以独立变化（不需要改变代码），这些设备通过两层抽象松散地耦合。JavaScript不支持抽象类，因此不包括Abstraction和Implementor。但是，它们的接口（属性和方法）始终在RefinedAbstraction和ConcreteImplementor中实现。在我们的示例代码中，Abstraction代表输入设备，Implementor代表输出设备。

触摸板和鼠标是不同的输入设备，但它们的动作映射到一组共同的输出指令：点击、移动、拖动等。屏幕和音频是非常不同的输出设备，但它们响应的是同一组指令，当然效果是完全不同的。桥接模式允许任何输入设备与任何输出设备一起工作。日志函数用来收集和显示结果。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>桥接模式:公众号AlbertYang</title></head><body></body><script>// 输入设备:触摸板var Gestures = function(output) {this.output = output;this.tap = function() {this.output.click();}this.swipe = function() {this.output.move();}this.pan = function() {this.output.drag();}this.pinch = function() {this.output.zoom();}};//输入设备:鼠标var Mouse = function(output) {this.output = output;this.click = function() {this.output.click();}this.move = function() {this.output.move();}this.down = function() {this.output.drag();}this.wheel = function() {this.output.zoom();}};// 输出设备：屏幕var Screen = function() {this.click = function() {log.add("点击屏幕");}this.move = function() {log.add("移动屏幕");}this.drag = function() {log.add("拖拽屏幕");}this.zoom = function() {log.add("放大屏幕");}};// 输出设备：音响var Audio = function() {this.click = function() {log.add("点击音响");}this.move = function() {log.add("移动音响");}this.drag = function() {log.add("拖拽音响");}this.zoom = function() {log.add("加大音量");}};//日志记录函数var log = (function() {var log = "";return {add: function(msg) {log += msg + "\n";},show: function() {console.info("%c%s", "color:red; font-size:18px", log);log = "";}}})();function run() {var screen = new Screen();var audio = new Audio();var hand = new Gestures(screen);var mouse = new Mouse(audio);hand.tap();hand.swipe();hand.pinch();mouse.click();mouse.move();mouse.wheel();log.show();}run();</script>
</html>

4 总结

桥式设计适用于一个类存在两个或多个独立变化的维度，且这两个维度都需要进行扩展,桥接模式实现了抽象化与实现化的脱耦。它们两个互相独立，不会影响到对方, 对于两个独立变化的维度，使用桥接模式再适合不过了。

1.桥接模式可以将抽象和其实现分离，方便他们独立变化，而且实现细节对客户透明。

2.在事件监听中将事件处理函数的抽象部分与实现部分分离,也就是抽像部分只是提供一个接口，具体的实现由桥接函数来实现。

3.桥接模式对的好处是弱化了代码之间的耦合，有利于代码拓展。

今天的学习就到这里，你可以使用今天学习的技巧来改善一下你曾经的代码，如果想继续提高，欢迎关注我，每天学习进步一点点，就是领先的开始。如果觉得本文对你有帮助的话，欢迎点赞，评论，转发！！！

设计模式(9)[JS版]-JavaScript设计模式之如何实现桥接模式？？？相关推荐

设计模式(7)[JS版]-JavaScript设计模式之原型模式如何实现？？？
目录 1.什么是原型模式 2 参与者 3 实例讲解 4 使用 Object.create实现原型模式 4.1 Object.create()的用法 4.2 用 Object.create实现继承 4. ...
设计模式(6)[JS版]-JavaScript如何实现抽象工厂模式？
目录 1 学习目标 2 什么是抽象工厂模式? 3 抽象工厂模式作用 4 工厂模式参与者 5 代码实现 1 学习目标通过本篇文章的学习,你应当掌握以下知识: 1 知道什么是抽象工厂模式? 2 掌握抽象 ...
设计模式(10)[JS版]-JavaScript如何实现组合模式？？？
目录 1 什么是组合模式 2 主要参与者 3 代码实现 4 应用实例 4.1 表单验证 4.1 图片阅读器 5 总结 1 什么是组合模式组合模式允许创建具有属性的对象,这些对象是原始项目或对象集合. ...
头像上传html js版,javascript头像上传代码实例
上传头像: 相关关键词: ondragover(拖动元素在投放区内移动) ondrop (元素放在投放区触发但是要去处理浏览器默认事件的影响:ondragenter.ondragover) dataT ...
《JavaScript设计模式张》整理
最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单 ...
JS代理模式《JavaScript设计模式与开发实践》阅读笔记
代理模式代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问. 保护代理和虚拟代理保护代理:当有许多需求要向某对象发出一些请求时,可以设置保护代理,通过一些条件判断对请求进行过滤. 虚拟 ...
16种JavaScript设计模式（中）
简介上文中介绍了学习设计模式前需要了解的一些基础概念和js的基础模式-原型模式,没看过的同学可以点这里,本章将介绍以下几种模式单例模式策略模式代理模式迭代器模式发布订阅模式命令模式组合 ...
专访《Javascript设计模式与开发实践》作者曾探：爱编程爱生活
专访<Javascript设计模式与开发实践>作者曾探:爱编程爱生活发表于12小时前| 2742次阅读| 来源CSDN| 8 条评论| 作者夏梦竹专访曾探图书作者Javascr ...
求【javascript设计模式】【高性能网站建设指南】PDF！哪位有给下啊！！！
快哟,等下版主就给我移除了,就没有了啊...... 强烈推荐:<JavaScript设计模式> 理由:异常生猛的一本书,看书名带"设计模式"就知道,这本书想要读明白有点 ...

设计模式(9)[JS版]-JavaScript设计模式之如何实现桥接模式？？？

1 什么是桥接模式

2 参与者

3 实例讲解

4 总结

设计模式(9)[JS版]-JavaScript设计模式之如何实现桥接模式？？？相关推荐

最新文章

热门文章