一、定义
通过提供抽象化和现实化之间的桥接结构，实现二者的解耦。
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)
}
三、总结
优点：
分离接口和实现部分
提供可扩展性
实现细节对客户透明，可以对客户隐藏实现细节
缺点：
大量的类将导致开发成本增加，同时在性能方面可能也会有所降低
