小柒

www.xiaoqi.cn

0%

桥接模式

发表于 分类于

桥接模式：在系统沿着多个维度变化的同时，又不增加其复杂度并达到解耦

提取共同点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//抽象处公共部分
function changeColor(dom,color,bg){
    //设置元素的字体颜色
    dom.style.color=color
    //设置元素的背景颜色
    dom.style.background=bg
}
var spans=document.getElementsByTagName('span')
spans[0].onmouseover=function(){//匿名函数作为回调函数作为桥接方法，解除this和事件之间的耦合，changeColor方法中的dom实质上是事件回调函数中的this
    changeColor(this,'red','#ddd')
}
spans[0].onmouseout=function(){
    changeColor(this,'#333','#f5f5f5')
}

桥接模式最主要特点就是将实现层（如元素绑定的事件）与抽象层（如修饰页面UI逻辑）解耦分离，使两部分可以独立变化，桥接模式主要是针对结构之间的结构，而抽象工厂模式和创建者模式主要业务在于创建。通过桥接模式实现的解耦，使实现层和抽象层分开处理，避免需求的改变造成对象内部的修改。