丁鹿学堂:前端进阶设计模式学习之桥接模式

设计模式之桥接模式

享元模式，就是当我们观察到我们的对象或者代码块，存在多个比较类似的重复的代码。
我们把相同的部分抽取出来，封装成一个类或者方法，再把它桥接回去。
思想方法类似于前面说过的建造者模式。都是提取，拆分再组合。但是建造者模式关注的是对象的创建，而桥接模式更关注的是代码的优化。
代码示例：
创建一组按钮菜单，根据不同的选中显示不同的颜色（移入和移出）
常规代码示例：

function menuItem(content){
    this.content = content;
    this.dom = document.createElement("div");
    this.dom.innerHTML = this.content
}
let menu1 = new menuItem('menu1');
let menu2 = new menuItem('menu2');
let menu3 = new menuItem('menu3');
menu1.onmouseover = function(){
    menu1.style.color = 'red';
}
menu2.onmouseover = function(){
    menu2.style.color = 'black';
}
menu3.onmouseover = function(){
    menu3.style.color = 'green';
}
menu1.onmouseout = function(){
    menu1.style.color = 'yellow';
}
menu2.onmouseout = function(){
    menu2.style.color = 'blue';
}
menu3.onmouseout = function(){
    menu3.style.color = 'pink';
}

使用桥接模式后的示例：

function MenuItem(content,color){
    this.content = content;
    this.dom = document.createElement("div");
    this.dom.innerHTML = this.content
    this.color = color;
}
function MenuColor(overColor,outColor){
    this.overColor = overColor;
    this.outColor = outColor;
}
MenuItem.prototype.bind = function(){
    let that = this
    this.dom.onmouseover = function(){
        this.style.color = that.color.overColor;
    }
    this.dom.onmouseout = function(){
        this.style.color = that.color.outColor;
    }   
}
let data = [{content:'menu1',color:['green','blue']},{content:'menu2',color:['yellow','red']}]
data.forEach(item=>{
    new MenuItem(item.content,new MenuColor(item.color[0],item.color[1])).bind()
})

套路总结： 通过把代码中变化部分和不变的部分分离开，然后再桥接在一起。后续如果有多维度的改变，也可以非常方便的添加功能或者重构。