JavaScript 设计模式之桥接模式

桥接模式

通过桥接模式，我们可以将业务逻辑与元素的事件解耦，也可以更灵活的创建一些对象

倘若我们有如下代码

const dom = document.getElementById('#test')

// 鼠标移入移出事件
// 鼠标移入时改变背景色和字体颜色
dom.onmouseenter = function() { 
  this.style.color = 'white'
  this.style.backgroundColor = 'black'
}

// 鼠标移出时恢复背景色和字体颜色
dom.onmouseleave = function () {
  this.style.color = 'black'
  this.style.backgroundColor = 'white'
}

这里我们不难看出有部分代码是重复的，只是改变了字体颜色跟背景色，这耦合度就高起来了，我们可以是这样

const changeColor = (dom, color, val)=>{
  dom.style[color] = val
}
const dom = document.getElementById('#test')
dom.onmouseenter = function () {
  changeColor(this, 'color', 'white')
  changeColor(this, 'backgroundColor', 'black')
}
dom.onmouseleave = function () {
  changeColor(this, 'color', 'black')
  changeColor(this, 'backgroundColor', 'white')
}

继续优化

const changeColor = (dom, color, val)=>{
  dom.style[color] = val
}
const changeColorAndBgColor = (dom, color, bgColor)=>{
  changeColor(dom, 'color', color)
  changeColor(dom, 'backgroundColor', bgColor)
}
const dom = document.getElementById('#test')
dom.onmouseenter = function () {
  changeColorAndBgColor(this, 'white', 'black')
}
dom.onmouseleave = function () {
  changeColor(this, 'black', 'white')
}

多元化

在使用不同角色有相同公用的方法时可以使用这种多元化来处理

const Speed = (x, y) => {
  this.x = x
  this.y = y
}
Speed.prototype.run = function () { 
  console.log('first run')
}
// TODO：其他内容
const Color = color => {
  this.color = color
}
Color.prototype.draw = function () {
  console.log('first draw')
}
// TODO：其他内容
const Speak = word => {
  this.word = word
}
Speak.prototype.say = function () {
  console.log('first say')
}
// TODO：其他内容

// 创建一个 球
const Ball = function (x, y, color) {
  this.speed = new Speed(x, y)
  this.color = new Color(color)
}
Ball.prototype.init = function () {
  this.speed.run()
  this.color.draw()
}

// 创建一个人
const People = function (x, y, say) {
  this.speed = new Speed(x, y)
  this.speak = new Speak(say)
}
People.prototype.init = function () {
  this.speed.run()
  this.speak.say()
}
...

通过桥接灵活的创建一个对象，针对不同的对象处理不同的业务逻辑，更灵活处理差异