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：已为接口编程，而非实现编程为指导，通过桥来链接抽象的接口和实现。