在系统中,某些类由于自身逻辑,具有两个或两个以上维度的变化,如何使得该类型可以沿多个方向变化,但又不引入额外的复杂度,这就是桥接模式要解决的问题。

定义:桥接模式(Bridge),将抽象部分与它的实现部分分离,使他们可以独立的变化。

意图:将抽象与实现解耦。

对于前端,比较常用的场景,是事件监控:

addEvent(element, 'click', getDrinkById);
function getDrinkById(e) {
var id = this.id;
asyncRequest('GET', 'drink.uri?id=' + id, function(resp) {
// callback response
console.log('Requested drink:' + resp.responseText);
});
}

但是上面代码有一个问题,就是getDrinkById必须有上下文,才能取得id,因为使用了this.id来取id.然后接着实现下面的逻辑,耦合过紧密。需要拆分:

function getDrinkById(id,callback) {
asyncRequest('GET', 'drink.uri?id=' + id, function(resp) {
// callback response
callback(resp.responseText);
});
}
addEvent(element,'click',getDrinkByIdBridge);
function getDrinkByIdBridge(e){
  getDrinkById(this.id,function(drink){
  console.log('Requested drink: '+ drink);
  });
} 

从逻辑上分析,把id传给getDrinkById函数式合情理的,且响应结果总是通过一个回调函数返回。现在做的是针对接口而不是实现进行编程,用桥接模式把抽象隔离开来。
这样,明显代码模块话,各个部分代码功能明确,耦合性大大降低,将监听器方法抽取出来,成为一个单独的API函数,而且保证该API函数与节点本身没有必然的耦合,就可以独立的运行getDrinkById这个函数。
桥接模式,就是把给抽象与现实对象搭一座桥,让对象方法即联系在一起,又是独立变化的,让代码耦合性降低的一种设计模式。

javascript设计模式-桥接模式的更多相关文章

  1. javascript设计模式----桥接模式、组合模式、装饰者模式、享元模式

    http://blog.csdn.net/painsonline/article/details/7215087    桥接模式:http://www.cnblogs.com/TomXu/archiv ...

  2. 转:设计模式-----桥接模式(Bridge Pattern)

    转自:http://www.cnblogs.com/houleixx/archive/2008/02/23/1078877.html 记得看原始链接的评论. 学习设计模式也有一段时间了,今天就把我整理 ...

  3. 跟着ZHONGHuan学习设计模式--桥接模式

    转载请注明出处! ! !http://blog.csdn.net/zhonghuan1992 全部配套代码均在github上:https://github.com/ZHONGHuanGit/Desig ...

  4. linkin大话设计模式--桥接模式

    linkin大话设计模式--桥接模式 桥接模式是一种结构化模式,他主要应对的是:由于实际的需要,某个类具有2个或者2个以上维度的变化,如果只是使用继承将无法实现功能,或者会使得设计变得相当的臃肿.我们 ...

  5. java设计模式——桥接模式

    一. 定义与类型 定义:将抽象部分与他的具体实现部分分离,使它们都可以独立的变化,通过组合的方式建立两个类之间的联系,而不是继承 类型:结构性. 二. 使用场景 (1) 抽象和具体实现之间增加更多的灵 ...

  6. 【设计模式】Java设计模式 - 桥接模式

    [设计模式]Java设计模式 - 桥接模式 不断学习才是王道 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 原创作品,更多关注我CSDN: 一个有梦有戏的人 准备将博客园.CSDN一起 ...

  7. [设计模式] javascript 之 桥接模式

    桥接模式说明 定义:分离抽象化与实现化,使之可以自由独立的变化: 说明:由于软件环境需求原因,使得类型抽象具有多种实现以自身变化定义等情况,这使得我们要分离抽象实现与具体实现,使得抽象化与实现化解耦, ...

  8. JAVA 设计模式 桥接模式

    用途 桥接模式 (Bridge) 将抽象部分与实现部分分离,使它们都可以独立的变化. 桥接模式是一种结构式模式. 结构

  9. javascript 设计模式-----策略模式

    在<javascript设计模式>中,作者并没有向我们介绍策略模式,然而它却是一种在开发中十分常见的设计模式.最常见的就是当我们遇到一个复杂的表单验证的时候,常常需要编写一大段的if和el ...

随机推荐

  1. mousewheel滚轮事件 浏览器的写法

    鼠标的滚轮事件,在Jquery中有对应的一个插件:https://github.com/brandonaaron/jquery-mousewheel 原生的滚轮事件:火狐与其他浏览器使用了不同的事件 ...

  2. 黄聪:WordPress 函数:apply_filters()(创建过滤器)

    apply_filters() 函数用来创建一个过滤器,大多数被用在函数中,是 WordPress 插件机制中非常重要的一个函数,能让其它的主题和插件对一个值进行修改过滤. 用法 apply_filt ...

  3. windows初始化后做了哪些事情

    保护视力,将WINDOWS背景色变成淡绿色 绿色和蓝色对眼睛最好,建议大家在长时间用电脑后,经常看看蓝天.绿地,就能在一定程度上缓解视疲劳.同样的道理,如果我们把电脑屏幕和网页的底色变为淡淡的苹果绿, ...

  4. room-views-用窗口颜色清除背景(Clear Background with Window Colour)选项

    这个选项是默认开启的,它的作用是在游戏每一帧绘制以前,都用一个颜色打底(覆盖整个游戏场景包括背景,从而实现背景清除),然后在这个基础上再画背景.场景等等. 如果关闭,则在游戏每一帧以前绘制背景(绘制背 ...

  5. ADF_Database Develop系列3_通过UML进行数据库开发之将Database Diagram转为Class Diagram

    2013-05-01 Created By BaoXinjian

  6. mysql 增加用户

    mysql 增加用户 3.增加用户: (注意:和上面不同,下面的因为是MYSQL环境中的命令,所以后面都带一个分号作为命令结束符) 格式:grant select on 数据库.* to 用户名@登录 ...

  7. wireshark1.8捕获无线网卡的数据包——找不到无线网卡!

    问题说明:奇怪的是,我线网卡明明有的,是interl的型号,可是wireshark总是找不到,如下: 奇了怪了,没有!原来是如下的: 实际上这块无线网卡是存在的,只不过由于兼容或驱动的原因无法显示型号 ...

  8. C#导出带有格式的Excel(列宽,合并单元格,显示边框线,加背景颜色等)

    源地址:http://blog.sina.com.cn/s/blog_74f702e60101au55.html 导出excel相关设置:http://blog.csdn.net/wanmingtom ...

  9. tomcat 内存溢出

    PermGen space的全称是Permanent Generation space,是指内存的永久保存区域,这一部分用于存放Class和Meta的信息,Class在被 Load的时候被放入Perm ...

  10. wince6.0应用程序自启动

    主要思想:将应用程序添加到image里,然后用应用程序代替桌面应用程序,从而使应用程序自启动. 主要步骤:                 1.将应用程序MyApp.exe拷贝到wince600\OS ...