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)