设计模式js篇--桥接模式

一、定义

通过提供抽象化和现实化之间的桥接结构，实现二者的解耦。
2个角色：
（1）扩充抽象类
（2）具体实现类

二、举例

eg1: github上面原有的例子(https://github.com/sohamkamani/javascript-design-patterns-for-humans#-bridge)。

// 场景：更换主题
// About Careers是两个抽象类，都有自己的主题成员
class About{ 
    constructor(theme) {
        this.theme = theme
    }    
    getContent() {
        return "About page in " + this.theme.getColor()
    }
}
class Careers{
   constructor(theme) {
       this.theme = theme
   } 
   getContent() {
       return "Careers page in " + this.theme.getColor()
   } 
}
// DarkTheme LightTheme AquaTheme是具体实现类，不同的主题有不同的效果
class DarkTheme{
    getColor() {
        return 'Dark Black'
    }
}
class LightTheme{
    getColor() {
        return 'Off white'
    }
}
class AquaTheme{
    getColor() {
        return 'Light blue'
    }
}
// 调用
const darkTheme = new DarkTheme()
const about = new About(darkTheme)
const careers = new Careers(darkTheme)
console.log(about.getContent() )// "About page in Dark Black"
console.log(careers.getContent() )// "Careers page in Dark Black"

eg2:事件监听

/*
 点击事件获取数据
 弊端：该函数直接使用this.id,只能工作在浏览器中，如果要对这个API函数做单元测试，或在命令行环境中执行它，是非常不方便的
*/
getData () {
   api.fetchCompanyWalletApi({id: this.id}).then(data => {
        // do sth
   })
}
/*
1、将id作为参数传递
2、用桥接模式把抽象隔离开来
好处：拓宽了适用范围，因为现在getData 并没有和事件对象捆绑在一起，只需要提供一个ID就可以在单元测试中运行这个API。此外，也可以在命令行环境中对这个接口进行快速测试。
*/
getData (id) {
   api.fetchCompanyWalletApi({id: id}).then(data => {
       // do sth
   })
}
// 绑定事件
function getDataBridge(){
      getData (this.id);
}

eg3:连接公开的API代码和私用实现的代码

let Student = function () {
  // 私有变量
  let name = 'aa';
  // getName 访问私用成员变量 name(特权函数)
  this.getName = function () {
    return name;
  }
  // 私有方法
  let getAge = function ()  {
    // do sth
    return 1;
  }
// getAgeBridge 访问私用方法 name(特权函数)
  this.getAgeBridge = function () {
      return getAge ()
  }
}
let student = new Student()
student.getName()
student.getAgeBridge()

eg3:桥接模式联合几个类

const Fn1 = function(a) {
  // dosomething...  
}
const Fn2 = function(b) {
  // dosomething...
}
const Bridge = function(a, b){
  this.one = new Fn1(a)
  this.two = new Fn2(b)
}

三、总结

优点：
分离接口和实现部分
提供可扩展性
实现细节对客户透明，可以对客户隐藏实现细节

缺点：
大量的类将导致开发成本增加，同时在性能方面可能也会有所降低