三分钟学JS设计模式（八）桥接模式

桥接模式

一、什么是桥接模式

桥接（Bridge）是用于把抽象化与实现化解耦，使得二者可以独立变化。这种类型的设计模式属于结构型模式，它通过提供抽象化和实现化之间的桥接结构，来实现二者的解耦。

举个栗子：
老王要做两件事，一是脚踏车，接送孩子。二是买菜，同样是脚踏车，运输菜。

很明显，脚踏车这个提供动力的行为可以抽象化，而具体任务是：接送小王和运输菜。

于是给自行车加了电机，把提供动力任务交给电机，自己只需要关注具体实现：接送孩子、运输菜。

二、 优缺点

• 优点：
  • 1、抽象化与实现化解耦，隐藏实现细节，只需关注实现
• 缺点：
  • 1、增加系统的理解与设计难度，考验设计者的抽象能力

三、场景例子、代码实现

• 场景一：Array.protopyte.forEach的出现
  加入我们要遍历一个数组，并给数组对象赋值：

var list = [{name:'张三',no:null},{name:'李四',no:null}]
// 循环动作
for(let i = 0; i < list.length; i++){
	// 赋值操作
	list[i].no = i + 1
}
var list = [{name:'张三2',no:null},{name:'李四2',no:null}]
// 循环动作
for(let i = 0; i < list.length; i++){
	// 赋值操作
	list[i].no = i + 1
}

很明显，怎么做循环时使用者不需要关心的，需要关心的是循环中做了什么。于是循环可以被抽象出forEach，只需要往内部传入具体实现方法回调：

var list = [{name:'张三',no:null},{name:'李四',no:null}]

list.forEach(function(human){
	human.no = i + 1
})

var list2 = [{name:'张三2',no:null},{name:'李四2',no:null}]
list2.forEach(function(human){
	human.no = i + 1
})

因为实现基本相似，我们还能再抽象行为：

const setHumanNo = function(student){
	student.no = i + 1
}

var list = [{name:'张三',no:null},{name:'李四',no:null}]
list.forEach(setHumanNo)

var list2 = [{name:'张三2',no:null},{name:'李四2',no:null}]
list2 .forEach(setHumanNo )