设计模式之桥接模式

桥接模式

为了提高代码质量，优化代码，js代码中也常用使用桥接模式优化。
目的：通过桥接模式代替耦合。通过独立方法间的桥接来形成整体功能，这样每个方法都可以被高度复用。
应用场景：减少模块之间的耦合度。
项目中可根据具体需求，看是否可以用桥接模式去优化你的代码。下面根据一个小的业务需求介绍使用桥接模式的优点。
实例：创建多个dom,并给每个dom绑定鼠标移入移出事件。
言简意赅，下面直接搬出不使用桥接模式的命令式编程。

function menuItem(word) {
  this.word = "";
  this.dom = document.createElement('div');
  this.dom.innerHTML = this.word;
}
var menu1 = new menuItem('menu1');
var menu2 = new menuItem('menu2');
var menu3 = new menuItem('menu3');
menu1.onmouseover = function () {
  menu1.style.color = 'red';
}
menu2.onmouseover = function () {
  menu1.style.color = 'green';
}
menu3.onmouseover = function () {
  menu1.style.color = 'blue';
}
menu1.onmouseout = function () {
  menu1.style.color = 'white';
}
menu2.onmouseout = function () {
  menu1.style.color = 'white';
}
menu3.onmouseout = function () {
  menu1.style.color = 'white';
}

这种命令式编程虽然能完成业务功能，但是代码质量太差，无论是从可读性合适代码的冗余度内心还是很难接受的。即使利用享元模式的思想，将代码片段公有数据提取，也是不够完美。这种例题中试着去敲下代码，利用桥接模式的优势能体现出来，桥接的思想是通过独立的方法桥接功能，从而减少代码的耦合度，实现整体的功能。

function menuItem(word, color) {
  this.word = word;
  this.color = color;
  this.dom = document.createElement('div');
  this.dom.innerHTML = this.word;
  document.getElementById('app').appendChild(this.dom);

menuItem.prototype.bind = function () {
  var self = this;
  this.dom.onmouseover = function () {
    this.style.color = self.color.colorOver;
  }
  this.dom.onmouseout = function () {
    this.style.color = self.color.colorOut;
  }
}
function menuColor(colorover, colorout) {//独立的方法
  this.colorOver = colorover;
  this.colorOut = colorout;
}
var data = [
	{ word: 'menu1', color: ['red', 'black'] },
	{ word: 'menu2', color: ['green', 'black'] }, 
	{ word: 'menu3', color: ['blue', 'black'] }
]
for (var i = 0; i < data.length; i++) {
  new menuItem(data[i].word, new menuColor(data[i].color[0], data[i].color[1])).bind();
}

利用函数编程的思想，提取代码共有的数据模块，menuColor作为独立函数处理相应的任务（本例中只做了将颜色实例化），根据业务需求也可以处理更复杂的任务。这样做的好处不仅能使整体功能完整，也能减少代码的耦合度，即使业务需求的变更，开发者只需专注独立函数模块的开发。

本文地址：https://blog.csdn.net/weaJung/article/details/107372654