《javascript设计模式》笔记之第八章：桥接模式

浏览数：21 / 时间：2015年06月08日

个人理解：桥接模式就是更进一步地封装已有api，通过这个封装连接你的输入和底层api（初步理解，以后加深理解有不同体会之后可能要修改）

一：示例：事件监听器

下面这个示例就演示了通过一座桥（也就是一个API函数）来连接你的输入和原生的ajax

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);
  });
}

然后我们之后的编程就可以使用getBeerById这个函数了

如果我们不适用桥接模式的话，代码是下面这个样子的：

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);
  });
}

因此我们可以看出，使用桥接模式的话，getBeerById并没有和事件对象捆绑在一起了！此外，这样的模式还更方便测试，并且降低了代码的耦合性。

二：用桥接模式连接多个类

其实这个原理和上面的一样的，都是把其他类封装起来，通过一个函数（桥）来连接它们

代码：

var Class1 = function(a, b, c) {
  this.a = a;
  this.b = b;
  this.c = c;
}
var Class2 = function(d) {
  this.d = d;
};

var BridgeClass = function(a, b, c, d) {
  this.one = new Class1(a, b, c);
  this.two = new Class2(d);
};

我个人认为这样子的话和工厂模式是很相似的

三：示例：构建XHR连接队列

在演示之前，说一下一些要用到的函数，例如asyncRequest是用来解决浏览器的差异的，并且假设我们之前就定义了上面说过的Function.prototype.method方法，然后我们默认使用的是比较高级的浏览器，因此可以使用Array.prototype.forEach和Array.prototype.filter函数

接下来，例子太长了，要看的就看书吧。。。其实这个例子和上面所说的原理是一样的，只不过是一个真实的例子

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

《javascript设计模式》笔记之第八章：桥接模式