JS设计模式---7.桥接模式

适用场合及栗子

  • 事件监听器

    假设有一个名为 getBeerById 的 API 函数。它根据一个标识符返回有关某种啤酒的信息。我们来给一个事件监听用户操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//bad
addEvent(Element,'click',getBeerById)
function getBeerById(e){
  // 事件对象被作为参数传递给函数，而本例并没有使用这个参数，只是从this对象中获取id
  var id = this.id;
  asyncRequest('GET',`beer.uri?id=${id}`,function (res) {
     console.log(`Request Beer:${res.responseText}`)
  })
}
// good
function getBeerById(id,callback) {
  asyncRequest('GET',`beer.uri?id=${id}`,function (res) {
    // 回调 传入返回值
    callback(res.responseText)
  })
}
addEvent(Element,'click',getBeerByIdBridge)
function getBeerByIdBridge(e){
  // 把id作为参数传递给getBeerById函数是合情合理的，这里使用一个回调函数把回应结果返回 现在我们将针对接口而不是实现进行编程
  getBeerById(this.id,function (beer) {
    console.log(`Request Beer:${res.responseText}`)
  })
}

我们用了两种方式来实现，第一种方式把事件对象与 getBeerById 捆绑在一起，那么它只在本次事件中适用。第二种方式使用桥接模式把抽象隔离开来后，getBeerById 函数不再和事件对象捆绑在一起，也就扩大了它的适用范围

  • 特权函数
1
2
3
4
5
6
7
8
var Public = function () {
   var secret = 3;
   this.privilegedGetter = function () {
     return secret
   }
 }
 var o = new Public();
 var data = o.privilegedGetter();

利用桥接函数来实现公共成员对私有成员的访问和操作 详见封装

  • 连接多个类
1
2
3
4
5
6
7
8
9
10
11
12
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 clsaa2(d);
}

这看起来很像适配器，但是本例中实际上并没有客户系统要求提供数据，它只不过是用来接纳数据并转发给责任方的一种辅助性手段。
有人可能会觉得这个桥接类实际上就是一个门面类。但是这里与门面类不同，使用桥接模式是为了让 class1 和 class2 能够独立于 BrigeClass 而发生改变。

总结

桥接模式主要的作用是将抽象与其实现隔离开来，以便二者独立变化，互不影响。
桥接模式的好处就在于能够独立管理你项目的各个组成部分，可以促进代码的模块化，促成更简洁的实现并提高抽象的灵活性。
只有某一处调用的函数如果用桥接的话，代码就会变得累赘了。而且增加了函数的调用，可能会对性能造成一些影响。