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

定义:桥接模式(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. 我的Android最佳实践之—— 常用的Intent.Action(转)

    1.从google搜索内容 Intent intent = new Intent(); intent.setAction(Intent.ACTION_WEB_SEARCH); intent.putEx ...

  2. C# DEBUG 调试信息打印及输出详解

    转载自: http://blog.csdn.net/aaaaatiger/article/details/5583301 1.debug只在[debug模式下才执行](运行按钮后面的下拉框可选) 2. ...

  3. [CSS]当选择器没有指定元素时

    当选择器没有指定元素时,样式会作用于(匹配)所有html元素. 如下面代码: <!DOCTYPE html> <html> <head> <style> ...

  4. opencv,关于物体检测

    关于物体检测 环境:opencv 2.4.11+vs2013 参考: http://www.cnblogs.com/tornadomeet/archive/2012/06/02/2531705.htm ...

  5. OSTimeDelay(1)

    当OS_TICKS_PER_SEC=100HZ ,即每个时钟节拍10ms;如果想延时10ms而调用OSTimeDelay(1)是不行的,调用该函数至少要2个时钟节拍才不会因时间太短,调度跟不上而产生错 ...

  6. TNT平台

    1, TNT平台 本词条缺少信息栏.名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! TNT平台中的开发平台是基于微软Jupiter平台的快速开发工具,开发者可以通过界面属性设定的方法来 ...

  7. mac下安装和卸载软件

    http://snowolf.iteye.com/blog/774312 homebrew主页对brew   https://github.com/mxcl/homebrew/wiki Pre. in ...

  8. Vim 中截取部分内容保存到其他文件

    最近无聊,突然想跟着玩玩天池数据挖掘,发现数据好大,想转换到mysql数据库,phpmyadmin import 导入时抱错! 数据文件大大! 于是乎,准备截取一小段到另外一个文件测试先,然后,发现了 ...

  9. Bootstrap学习的点点滴滴

    1)网站:http://www.bootcss.com/http://v3.bootcss.com/getting-started/#downloadhttps://github.com/twbs/b ...

  10. JavaScript判断字符串是否含有中文(实用)

    引用页: http://javasam.iteye.com/blog/1465048 UTF-8有点类似于Haffman编码,它将Unicode编码为:0x00-0x7F的字符,用单个字节来表示:0x ...