Bridge Pattern in Javascript

        一个比较简洁的例子:

function getBeerById(e) { 
    var id = this.id;

    asyncRequest('GET', 'beer.uri?id=' + id, function (resp) {
        console.log('Requested Beer: ' + resp.responseText);
    });
}
addEvent(element, 'click', getBeerById);

这里可以看到,它其实就是为DOM元素的click绑定一个方法,在这个方法里做一个异步请求,然后当请求成功后,log出response结果。 问题在于getBeerById方法与当前调用元素紧紧连在一起,它只能运行于浏览器,对吧? 所以,也就没有办法做单元测试了。

      好,利用Bridge Pattern来改进。如下: 

function getBeerById(id, callback) {

    asyncRequest('GET', 'beer.uri?id=' + id, function (response) {
        callback(response.responseText);
    });
}
function getBeerByIdBridge(e) {
    getBeerById(this.id, function (beer) {
        console.log('Requested Beer: ' + beer);
    });
}
addEvent(element, 'click', getBeerByIdBridge);

此时,请看getBeerById方法。它直接传参id,不再依赖于DOM元素;callback参数,是一个function指针。所以,它脱离了浏览器,可以进行单元测试。而问题是,怎么讲它注册绑定到DOM元素的事情呢? getBeerByIdBridge方法就是利用桥接模式来完成这个事情的。

     个人总结一句:桥接实际上就是通过架桥,将两类有关联的东西独立实现,然后连接起来。 比如上例,:)。书中还写了一个很复杂的例子,但是实在看不下去,也一并放到附件中,有时间再看,download

原文地址:https://www.cnblogs.com/Langzi127/p/2696933.html