js 设计模式 第八章 Bridge Pattern

场景 1  事件处理

是页面上，我们往往用到事件绑定。这这个例子中，我们对元素添加click 事件处理，在handle 函数中，通过得到元素的id属性，进行ajax操作。

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

这个绑定函数有几个问题：

• 因为改函数需要e这个事件变量，所以这个函数只能运行在浏览器的环境中，这样不能简单的测试这个函数的正确性
• 这个函数的输入参数是e，而里面的实现根本就不需要这个变量

一个更好的方法是，写一个独立的函数

function getBeerById(id, callback) {
    // Make request for beer by ID, then return the beer data.
    asyncRequest('GET', 'beer.uri?id=' + id, function(resp) {
    // callback response
        callback(resp.responseText);
    });
}

好处：

• 函数的输入参数是id，更符合逻辑
• callback 方法更通用。任何充服务器取得的数据，通过callback得到，并进行下一步的处理。
• program to interface ,not an implementation
• 可以在单元测试中测试

最后，上面的事件绑定实现方式如下：

addEvent(element, 'click', getBeerByIdBridge);
function getBeerByIdBridge (e) {
    getBeerById(this.id, function(beer) {
        console.log('Requested Beer: '+beer);
     });
}

有了这个桥接函数，我们就可以在任何地方测试getBeerById这个核心函数

场景2      类的私有属性

通过类的特权方法，访问类的私有属性，这个特权方法，就是私有属性通向外边的桥

var Public = function() {
		var secret = 3;
		this.privilegedGetter = function() {
		    return secret;
		};
};
var o = new Public;
var data = o.privilegedGetter();

xiong：已为接口编程，而非实现编程为指导，通过桥来链接抽象的接口和实现。