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

定义:桥接模式(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. 黄聪:WordPress 函数:apply_filters()(创建过滤器)

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

  2. 黄聪:走进wordpress do_action函数

    再看do_action函数.位于plugin.php352行.我把源码放在西街口这里,略去了其它辅助处理的语句. 如下: function do_action($tag, $arg = '') {   ...

  3. Redis常用方法

    首先构建非切片连接池jedisPool对象,写好配置redis连接的方法. /** * 构建redis切片连接池 * * @param ip * @param port * @return Jedis ...

  4. [Mysql] MySQL配置文件my.cnf的理解

    一.缘由 最近要接手数据库的维护工作,公司首选MySQL.对于MySQL的理解,我认为很多性能优化工作.主从主主复制都是在调整参数,来适应不同时期不同数量级的数据. 故,理解透彻my.cnf里的参数是 ...

  5. 前端实现 SVG 转 PNG

    http://fex.baidu.com/blog/2015/11/convert-svg-to-png-at-frontend/ 前言 svg 是一种矢量图形,在 web 上应用很广泛,但是很多时候 ...

  6. H桥电路

    电路特点:有三极管组成4个桥的腿,中间可以使电容或是电机. 应用:直流电机的正反转控制.DC-AC逆变电源(脉冲直流变为周期交流) 关键点:同一个时刻只能对角的一对三极管导通,同侧不能一块导通,共2对 ...

  7. requesting java ast from selection

    遇到這個錯誤是因為在eclipse中選擇了maven->update project.接著就不斷的出現題目上的錯誤,然後就提示是否退出workbench. 查看了一下項目的compile jre ...

  8. windows下Gulp入门详细教程 &&gulp安装失败的原因(红色)

    以下教程亲自实践可行: 另外添加一个Gulp自动编译.压缩.更新.测试的教程链接:https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8 ...

  9. 保持UIImagePickerController后导航栏风格统一

    1. UIImagePickerController 状态栏始终保持某一种风格. -(void)navigationController:(UINavigationController *)navig ...

  10. ORACLE 查看数据库中有哪些表

    SELECT TABLE_NAME FROM USER_TABLES ORDER BY TABLE_NAME;