javascript设计模式-桥接模式

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

定义:桥接模式(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这个函数。
桥接模式,就是把给抽象与现实对象搭一座桥,让对象方法即联系在一起,又是独立变化的,让代码耦合性降低的一种设计模式。

时间: 2024-08-25 10:24:51

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

js设计模式——桥接模式

定义:将抽象化(Abstraction)与实现化(Implementation)脱耦,使得二者可以独立地变化. 常用场景:在js中,桥接模式常用于事件监听器和ajax请求的解耦,以便于进行单元测试. 举个栗子 普通方法. var btn=$('#btn'); btn.on('click',function () { $.ajax({ url:'test.html', data:{ id:this.id }, dataType:'html', success:function(data){ con

5分钟读书笔记之 - 设计模式 - 桥接模式

补充一点知识: 私有变量 在对象内部使用'var'关键字来声明,而且它只能被私有函数和特权方法访问.私有函数 在对象的构造函数里声明(或者是通过var functionName=function(){...}来定义),它能被特权函数调用(包括对象的构造函数)和私有函数调用.特权方法 通过this.methodName=function(){...}来声明而且可能被对象外部的代码调用.可以使用:this.特权函数() 方式来调用特权函数,使用 :私有函数()方式来调用私有函数.公共属性 通过thi

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

桥接模式说明 定义:分离抽象化与实现化,使之可以自由独立的变化: 说明:由于软件环境需求原因,使得类型抽象具有多种实现以自身变化定义等情况,这使得我们要分离抽象实现与具体实现,使得抽象化与实现化解耦,使之可以分开独立的变化,使得两者可以自由添加各自处理过程实现. 桥接模式就可以解决上面的问题,桥接模式的角色: 1. 抽象化角色,这个抽象化类中定义对 实现化接口定义的引用: 2. 修正抽象化角色,这个角色扩展并修改抽象化接口定义的实现,该修改用于引用实现化接口的实现的 (底层) 操作: 3. 实现

设计模式 -- 桥接模式(Bridge Pattern)

桥接模式 Bridge Pattern 结构设计模式 定义: 分离抽象部分和实现部分,使他们独立运行. 避免使用继承导致系统类个数暴增,可以考虑桥接模式. 桥接模式将继承关系转化为关联关系,减少耦合,减少代码量. 例如: public interface Shape { public void bepaint(String color); } public abstract class Color { Shape shape; public void setShape(Shape shape)

JavaScript设计模式 - 迭代器模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺序访问其中的每个元素 许多浏览器都支持 Javascript 的 Array.prototype.forEach 迭代器可以分为 内部迭代器 和 外部迭代器 一.jQuery 中的迭代器 1 $.each( [1,2,3,4], function (i, n) { 2 console.log( "当

js设计模式-桥接模式

桥接模式定义:桥梁模式的用意是"将抽象化(Abstraction)与实现化(Implementation)脱耦,使得二者可以独立地变化".这句话有三个关键词,也就是抽象化.实现化和脱耦. 最简单的桥接模式例子:事件监听器 addEvent(element,"click",getResultByIdBridge); function getResultByIdBridge(e){ getById(this.id, function(result){ //TODO: t

C#设计模式--桥接模式

0.C#设计模式--简单工厂模式 1.C#设计模式--工厂方法模式 2.C#设计模式--抽象工厂模式 3.C#设计模式--单例模式 4.C#设计模式--建造者模式 5.C#设计模式--原型模式 6.C#设计模式--设配器模式 7.C#设计模式--装饰器模式 8.C#设计模式--代理模式 9.C#设计模式--外观模式 设计模式: 桥接模式(Bridge Pattern) 简单介绍: 桥接模式(Bridge Pattern):桥接模式的用意是将抽象化(Abstraction)与实现化(Impleme

[Unity 设计模式]桥接模式(BridgePattern)

1.前言 继上一讲IOC模式的基础上继续本讲桥接模式,笔者感觉桥接模式是23种设计模式中桥接模式是最好用但也是最难理解的设计模式之一,23中设计模式就好武侠剧中一本武功秘籍,我们在工作过程中想要熟练运用其中的每一种设计模式就好比跟高手过招想要能运用好武侠秘籍中的每一招每一式,并且能随着对手出招的不同我们能随机应变对应的招数,这就要求我们对每一种设计模式都理解的非常深刻才能运用自如,打出组合拳的效果. 2.需求 我们在FPS类游戏中会碰到这样的需求——实现武器和角色,无论是敌人还是我方角色都能通过

设计模式 -- 桥接模式(Bridge)

写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------主要内容包括: 初始桥接模式,包括: 定义.结构和说明.参考实现 体会桥接模式,包括: 场景问题.不用模式的解决方案.使用模式的解决方案 理解桥接模式,包括: 认识桥接模式.谁来桥接.典型例子-JDBC.广义桥接-Java中无处不在桥接.桥接模式的优缺点 思考桥接模式,包括: 桥接模式的本质.对设计原则的体现.何时选用 参考内