【读书笔记】读《JavaScript设计模式》之桥接模式
桥接模式(Bridge)将抽象部分与它的实现部分分离,使它们都可以独立地变化。
一、使用场景
使用场景一:事件监控
对于前端而言,最典型的使用场景——事件监控。如——
addEvent(element, 'click', getBeerById); // 可以看出这是一个只能工作在浏览器中的API,根据时间监听期回调函数的工作机制,事件对象会被作为第一个参数传递给这个函数。
// 在本例中并没有使用这个参数,而只是从this对象获取ID。如果你对这个API函数做单元测试,就很困难了。
// 对于API开发者来说,最好从一个优良的API开始,不要把它与任何特定的实现搅在一起。
function getBeerById(e) {
var id = this.id;
asyncRequest('GET', 'beer.uri?id=' + id, function(resp) {
// callback response
console.log('Requested Beer:' + resp.responseText);
});
}
我们希望所有人都能获取到啤酒的信息。也就是将获取啤酒信息的方法形成共有API。
// 有利于独立的单元测试
// 由于单独抽离了业务逻辑,在一定程度上,提高了代码的复用性。
function getBeerById(id, callback) {
// Make request for beer by ID, then return the beer data
asyncRequest('GET', 'beer.uri?id=' + id, function(resp) {
// callback response
callback(resp.responseText);
});
} // 接下来,我们将针对接口而不是实现进行编程,用桥接模式把抽象隔离开来。
addEvent(element, 'click', getBeerById);
// 有了这层桥接元素,这个API的使用范围打打扩宽了,这给了你更大的设计自由。
// 因为现在getBeerById并没有和事件对象捆绑在一起,你可以在单元测试中运行这个API。只需提供一个ID和回调函数即可。
function getBeerByIdBridge(e) {
getBeerById(this.id, function(beer) {
console.log('Requested Beer:' + beer);
});
}
使用场景二:特权函数
提供共有API(即这里的桥接函数)来访问私有属性或者方法——
// 除了在事件回调函数与接口之间进行桥接外,桥接模式也可以用于连接公开的API代码和私有的实现代码
var Public = function() {
var secret = 3; // 使用桥接模式来访问某些私有的信息。这里的桥接函数也称为特权函数
this.privilegedGetter = function() {
return secret++;
};
}; var o = new Public();
var data = o.privilegedGetter();
使用场景三:实现组合
在显示生活中,桥梁可以把多种事物联接起来,在JavaScript也是如此——
var Class1 = function(a, b, c) {
this.a = a;
this.b = b;
this.c = c;
}; var Class2 = function(d) {
this.d = d;
}; // 有了这个桥接元素,Class1和Class2能够独立于BridgeClass而发生改变
var BridgeClass = function(a, b, c, d) {
this.one = new Class1(a, b, c);
this.two = new Class2(d);
};
二、使用原则
很难想象,不使用桥接模式的事件驱动编程回事什么样子。但是js编程新手们常常沉迷于事件驱动开发的函数式风格,忘了编写接口。哪怕面对的是复杂操作。判断什么地方应该使用桥接模式通常很简单。假如有下面的代码:
$('#example').click(function() {
new RichTextEditor();
});
从中你无法看出那个编辑器要显示在什么地方、它有些什么配置选项以及应该怎样修改它。这里的要诀是让接口“可桥接”,实际上也就是可适配。
在现实生活中,桥梁对于城市建设和城中街道的联通至关重要。城区相当于模块,而街道相当于把他们连接在一起的方法。 道路的可用性往往影响着该片区的人口数量。同样,你向客户提供的接口极有可能影响到模块的受欢迎程度。
三、优势及劣势
优势:
把抽象与其现实隔离开来,有助于独立地管理软件的各组成部分。达到充分解耦。Bug也因此更容易查找,而软件发生严重故障的可能性也减小了。有利于分层,从而产生更好的结构化系统。说到底,桥接元素应该是粘合每一个抽象的粘合因子。
劣势:
在我们看来,这种模式并没有多少真正的缺点。前面讲述它的优点的时候已经提过,它置灰让API更加健壮、提高组件的模块化程度并促成更简洁的客户系统实现。不过这些益处的确是有代价的。每使用一个桥接元素都要增加一次函数调用,这对应用程序的性能会有一些负面影响。此外,它们提高了系统的复杂程度,在出现问题时这回导致代码更难调试。大多数情况下桥接模式都非常有用,但注意不要滥用。举个例子来说,如果一个桥接函数被用于连接两个函数,而其中某个函数根本不会在桥接函数之外被调用,那么此时这个桥接函数就不是非要不可,你可以放心将它删除。
源自:JavaScript设计模式(人民邮电出版社)——第八章,桥接模式
参考:深入理解JavaScript系列(44):设计模式之桥接模式
【读书笔记】读《JavaScript设计模式》之桥接模式的更多相关文章
- 再起航,我的学习笔记之JavaScript设计模式14(桥接模式)
桥接模式 桥接模式(Bridge): 在系统沿着多个维度变化的同时,又不增加其复杂度并已达到解耦 从定义上看桥接模式的定义十分难以理解,那么我们来通过示例来演示什么是桥接模式. 现在我们需要做一个导航 ...
- 读书笔记之 - javascript 设计模式 - 享元模式
本章探讨另一种优化模式-享元模式,它最适合于解决因创建大量类似对象而累及性能的问题.这种模式在javascript中尤其有用,因为复杂的javascript代码很快就会用光浏览器的所有可用内存,通过把 ...
- 读书笔记之 - javascript 设计模式 - 责任链模式
责任链模式可以用来消除请求的发送者和接收者之间的耦合.这是通过实现一个由隐式地对请求进行处理的对象组成的链而做到的.链中的每个对象可以处理请求,也可以将其传给下一个对象. 责任链的结构: 责任链由多个 ...
- 读书笔记之 - javascript 设计模式 - 装饰者模式
本章讨论的是一种为对象增添特性的技术,它并不使用创建新子类这种手段. 装饰者模式可以透明地把对象包装在具有同样接口的另一对象之中,这样一来,你可以给一些方法添加一些行为,然后将方法调用传递给原始对象. ...
- 读书笔记之 - javascript 设计模式 - 门面模式
门面模式有俩个作用: 简化类的接口 消除类与使用它的客户代码之间的耦合 在javascript中,门面模式常常是开发人员最亲密的朋友.它是几乎所有javascript库的核心原则,门面模式可以使库提供 ...
- CSharp设计模式读书笔记(8):桥接模式(学习难度:★★★☆☆,使用频率:★★★☆☆)
桥接模式(Bridge Pattern): 将抽象部分与它的实现部分分离,使它们都可以独立地变化.它是一种对象结构型模式,又称为柄体(Handle and Body)模式或接口(Interface)模 ...
- 再起航,我的学习笔记之JavaScript设计模式08(建造者模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几 ...
- 再起航,我的学习笔记之JavaScript设计模式09(原型模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 我们 ...
- 再起航,我的学习笔记之JavaScript设计模式11(外观模式)
经过一段时间的学习与分享,我们对创建型设计模式已经有了一定的认识,未来的一段时间里我们将展开新的篇章,开始迈入结构性设计模式的学习. 结构性设计模式与创建型设计模式不同,结构性设计模式更偏向于关注如何 ...
- JavaScript面试系列:JavaScript设计模式之桥接模式和懒加载
我写的程序员面试系列文章 Java面试系列-webapp文件夹和WebContent文件夹的区别? 程序员面试系列:Spring MVC能响应HTTP请求的原因? Java程序员面试系列-什么是Jav ...
随机推荐
- Python input()和raw_input()的区别
当输入为数字的时候,input()获得的是数字,而后者获得的是str,可以用int(raw_input())来转换. i = input() print i+1 j = raw_input() pri ...
- Android模拟器端口被占用问题的解决办法
一.问题描述 今天在Eclipse中运行Android项目时遇到"The connection to adb is down, and a severe error has occured& ...
- Laravel教程 三:视图变量传递和Blade
Laravel教程 三:视图变量传递和Blade 此文章为原创文章,未经同意,禁止转载. Blade 上一篇我们简单地说了Router,Views和Controllers的工作流程,这一次我就按照上一 ...
- ECSHOP管理员密码忘记了怎么办?
ECSHOP管理员密码忘记了怎么办? ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2013-09-06 不小心在后台把管理员全部给清空了,闹的网站都无法登陆了?有 ...
- POI读写Excel简述之写入
二.POI写入Excel文件(以Excel2003版为例,2007版就是根据文件扩展名xlsx将HSSFWorkbook换为XSSFWorkbook,及其Sheet.Row.Cell也相应替换) 1. ...
- Nginx使用的php-fpm的两种进程管理方式及优化(转)
php-fpm目前主要又两个分支,分别对应于php-5.2.x的版本和php-5.3.x的版本.在5.2.x的版本中,php-fpm.conf使用的是xml格式,而在新的5.3.x版本中,则是和php ...
- heap和stack有什么区别
1.heap是堆,stack是栈. 2.stack的空间由操作系统自动分配和释放,heap的空间是手动申请和释放的,heap常用new关键字来分配. 3.stack空间有限,heap的空间是很大的自由 ...
- IOS开发/iphone开发多线程
有时候可能有很多功能要同时实现,例如每隔多长时间就会检测程序网络连接,又或者有时候需要从服务器下载一个不小的文件,如果用单线程几乎是不可想的事情,程序将会卡的无法使用,用到多线程和不用多线程,给用户的 ...
- linux find 命令详解
Linux下 利用find命令删除所有vssver2.scc文件 删除所有vssver2.scc文件 这是我当初查找 Linux find 命令的目的所在 1) find / -name ‘vssv ...
- [Effective JavaScript 笔记] 第7条:视字符串为16位的代码单元序列
Unicode编码,基础:它为世界上所有的文字系统的每个字符单位分配一个唯一的整数,该整数介于0~1114111之间,在Unicode术语中称为代码点(code point). 和其它字符编码几乎没有 ...