桥接模式（Bridge）
在系统沿着多个维度变化的同时，又不增加其复杂度并已达到
解耦。
需求：实现tabs划过的不通效果
<style>
ul>li {
list-style: none;
float: left;
margin: 10px;
padding: 5px 10px;
border: 1px solid #333;
}
</style>
<ul>
<li>ProsperLee</li>
<li>等级：<span>Lv10</span></li>
<li>消息：<span>99+</span></li>
</ul>
方式一：
const tabs = document.getElementsByTagName('li'); tabs[0].onmouseover = function (e) { this.style.backgroundColor = 'red'; }; tabs[0].onmouseout = function (e) { this.style.backgroundColor = 'transparent'; }; tabs[1].onmouseover = function (e) { this.getElementsByTagName('span')[0].style.color = 'blue'; }; tabs[1].onmouseout = function (e) { this.getElementsByTagName('span')[0].style.color = 'black'; }; tabs[2].onmouseover = function (e) { this.getElementsByTagName('span')[0].style['font-weight'] = 'bolder'; }; tabs[2].onmouseout = function (e) { this.getElementsByTagName('span')[0].style['font-weight'] = 'normal'; };方式二：（
桥接模式- 提取共同点）const tabs = document.getElementsByTagName('li'); /** * 桥接函数 - 解耦抽象出共同点方法 * @param {HTMLElement} el DOM * @param {string} attr 样式属性 * @param {string} value 样式值 */ const setStyle = function (el, attr, value) { el.style[attr] = value; }; tabs[0].onmouseover = function (e) { // 这个匿名函数为桥接模式的函数，作为onmouseover和setStyle之间的桥梁 setStyle(this, 'backgroundColor', 'red'); }; tabs[0].onmouseout = function (e) { // 这个匿名函数为桥接模式的函数，作为onmouseover和setStyle之间的桥梁 setStyle(this, 'backgroundColor', 'transparent'); }; tabs[1].onmouseover = function (e) { // 这个匿名函数为桥接模式的函数，作为onmouseover和setStyle之间的桥梁 setStyle(this.getElementsByTagName('span')[0], 'color', 'blue'); }; tabs[1].onmouseout = function (e) { // 这个匿名函数为桥接模式的函数，作为onmouseover和setStyle之间的桥梁 setStyle(this.getElementsByTagName('span')[0], 'color', 'black'); }; tabs[2].onmouseover = function (e) { // 这个匿名函数为桥接模式的函数，作为onmouseover和setStyle之间的桥梁 setStyle(this.getElementsByTagName('span')[0], 'font-weight', 'bolder'); }; tabs[2].onmouseout = function (e) { // 这个匿名函数为桥接模式的函数，作为onmouseover和setStyle之间的桥梁 setStyle(this.getElementsByTagName('span')[0], 'font-weight', 'normal'); };
多元化对象
多维变量类/共同点类
/**
* 运动单元 - 多维变量类/共同点类
* @param {number} x
* @param {number} y
*/
function Speed(x, y) {
this.x = x;
this.y = y;
}
Speed.prototype.run = function () {
console.log('运动起来');
}
/**
* 着色单元 - 多维变量类/共同点类
* @param {Color} color
*/
function Color(color) {
this.color = color;
}
Color.prototype.draw = function () {
console.log('绘制色彩');
}
/**
* 变形单元 - 多维变量类/共同点类
* @param {string} shape
*/
function Shape(shape) {
this.shape = shape;
}
Shape.prototype.change = function () {
console.log('改变形状');
}
/**
* 说话单元 - 多维变量类/共同点类
* @param {string} word
*/
function Speek(word) {
this.word = word;
}
Speek.prototype.say = function () {
console.log('书写字体');
}
桥接使用共同点类以达到解耦作用
/**
* 定义一个有颜色的运动小球
* @param {number} x
* @param {number} y
* @param {Color} c
*/
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();
}
var ball = new Ball(10, 12, 'red');
ball.init();
/**
* 定义一个人类
* @param {number} x
* @param {number} y
* @param {string} f
*/
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();
}
var people = new People(10, 12, 16);
people.init();
/**
* 定义一个精灵
* @param {number} x
* @param {number} y
* @param {Color} c
* @param {string} s
*/
function Sprite(x, y, c, s) {
this.speed = new Speed(x, y);
this.color = new Color(c);
this.shape = new Shape(s);
}
Sprite.prototype.init = function () {
this.speed.run();
this.color.draw();
this.shape.change();
}
var sprite = new Sprite(10, 12, 'red', '矩形');
sprite.init();
桥接模式最主要的特点：
将实现层（如元素绑定的事件）与抽象层（如修饰页面UI逻辑）解耦分离，使两部分可以独立变化，桥接模式主要是对结构之间的解构。
