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

javascript设计模式-桥接模式

相关推荐