桥接模式

/**
 * 桥接模式
 * 有时候页面中的一些小细节改变常常因逻辑相似导致大片臃肿的代码，
 */
var span = document.getElementsByTagName("span");
span[0].onmouseover = function () {
  this.style.color = "red";
  this.style.background = "#ddd";
};
span[0].onmouseout = function () {
  this.style.color = "#333";
  this.style.background = "#f5f5f5";
};
span[1].onmouseover = function () {
  this.getElementsByTagName("strong")[0].style.color = "red";
  this.getElementsByTagName("strong")[0].style.background = "#ddd";
};
span[1].onmouseout = function () {
  this.getElementsByTagName("strong")[0].style.color = "#333";
  this.getElementsByTagName("strong")[0].style.background = "#f5f5f5";
};
//...

/**
 * 提取共同点
 */
// 抽象
function changeColor(dom, color, bg) {
  dom.style.color = color;
  dom.style.background = bg;
}

var span = document.getElementsByTagName("span");

span[0].onmouseover = function () {
  changeColor(this, "red", "#ddd");
};
span[0].onmouseout = function () {
  changeColor(this, "#333", "#f5f5f5");
};
span[1].onmouseover = function () {
  changeColor(this.getElementsByTagName("strong")[0], "red", "#ddd");
};
span[1].onmouseout = function () {
  changeColor(this.getElementsByTagName("strong")[0], "#333", "#f5f5f5");
};

/**
 * 多元化对象
 */
// 多维变量类
// 运动单元
function Speed(x, y) {
  this.x = x;
  this.y = y;
}
Speed.prototype.run = function () {
  console.log("运动起来");
};
// 着色单元
function Color(cl) {
  this.color = cl;
}
Color.prototype.draw = function () {
  console.log("绘制色彩");
};
// 变形单元
function Shape(sp) {
  this.shape = sp;
}
Shape.prototype.change = function () {
  console.log("改变形状");
};
// 说话单元
function Speek(wd) {
  this.word = wd;
}
Speek.prototype.say = function () {
  console.log("书写字体");
};

/**
 * 创建一个球类，并且它可以运动，可以着色
 */
function Ball(x, y, c) {
  // 实现运动单元
  this.speed = new Speed(x, y);
  // 实现着色单元
  this.color = new Color(c);
}
Ball.prototype.init = function () {
  // 实现运动
  this.speed.run();
  // 实现着色
  this.color.draw();
};

/**
 * 创建一个人物类，他可以运动以及说话
 */
function People(x, y, f) {
  this.speed = new Speed(x, y);
  this.font = new Speek(f);
}
People.prototype.init = function () {
  this.speed.run();
  this.font.say();
};

/**
 * 创建一个精灵类，它可以运动可以着色可以改变形状
 */
function Spirite(x, y, c, s) {
  this.speed = new Speed(x, y);
  this.color = new Color(c);
  this.shape = new Shape(s);
}
Spirite.prototype.init = function () {
  this.speed.run();
  this.color.draw();
  this.shape.change();
};

// 测试用例
var p = new People(10, 12, 16);
p.init();