JavaScript设计模式：桥接模式

桥接模式

桥接模式的主要形式提取代码中的公共的部分并抽象，达到代码复用和解耦的目的。

举例

var spans = getElementByTagNames('span');
span[0].onmouseover = function(){
	this.style.color = 'red';
	this.style.background = '#ddd';
}
span[1].onmouseover = function(){
	this.style.color = 'black';
	this.style.background = '#fff';
}
span[2].onmouse...
...

像上面的代码中，我们对每一个span都添加了一个事件，事件处理程序中的代码是结构类似的，这样我们可以提取出来公共的部分。我们可以抽象出一个changeColor的函数。

function changeColor(obj,color,background){
	obj.style.color = color;
	obj.style.background = background;
}

然后将上面的代码改写：

var spans = getElementByTagNames('span');
span[0].onmouseover = function(){
	changeColor(this,'red','#ddd');
}
span[1].onmouseover = function(){
	changeColor(this,'black','#fff');
}
span[2].onmouse...
...

这样我们就将改变颜色的具体逻辑从事件处理函数中拿出来了，在事件处理函数中调用的是抽象出来的changeColor函数，在一定程度上完成了解耦和代码复用。

甚至我们可以做多个维度的抽象，让各个部分相互独立。在上面示例的基础上，假定我们还要改变span的position。我们可以进行如下的抽象：

function changePosition(obj,x,y) {
	obj.style.position.x = x;
	obj.style.position.y = y;
}

// 然后这样使用
var spans = getElementByTagNames('span');
span[0].onmouseover = function(){
	changeColor(this,'red','#ddd');
	changePosition(this,100,100);
}
span[1].onmouseover = function(){
	changeColor(this,'black','#fff');
	changePosition(this,200,200);
}
span[2].onmouse...
...

这样我们可以实现多个维度上的解耦和复用，假定我们只需要改变颜色，那么只调用changeColor即可。

总结

桥接模式其实就是提取代码中的公共部分，并将其进行抽象，以此达到复用和解耦的目的。

我们平时自己的写的代码，有很多复制粘贴后改几个参数就ok的代码块，其实就可以利用桥接模式进行重构。