桥接模式

将抽象与实现分离，使它们可以独立变化。它是用组合关系代替继承关系来实现，从而降低了抽象和实现这两个可变维度的耦合度。

桥接模式的优点是：

• 抽象与实现分离，扩展能力强
• 符合开闭原则
• 符合合成复用原则
• 其实现细节对客户透明

桥接模式的缺点是：

• 由于聚合关系建立在抽象层，要求开发者针对抽象化进行设计与编程，能正确地识别出系统中两个独立变化的维度，这增加了系统的理解与设计难度。

示例一

有三种形状，每种形状都有3种颜色

function rect(color){
    showcolor(color);
}

function circle(color){
    showcolor(color);
}

function delta(color){
    showcolor(color);
}

function showcolor(color){}

// 需要一个红色的圆形
new circle('red');

对于3种形状、每种形状有3种颜色的需求，可以不用创建9种不同颜色的不同形状。

示例二

有一组菜单，上面每种选项，都有不同的选中效果

优化之前

function menuItem(word) {
    this.word = word;
    this.dom = document.createElement('div');
    this.dom.innerHTML = this.word;
}

var menu1 = new menuItem('menu1');
var menu2 = new menuItem('menu2');

menu1.onmouseover = function () {
    menu1.style.color = 'red';
}
menu2.onmouseover = function () {
    menu2.style.color = 'greeen'
}

优化之后

function menuItem(word, color) {
    this.word = word;
    this.dom = document.createElement('div');
    this.dom.innerHTML = this.word;
    this.color = color;
}

menuItem.prototype.bind = function () {
    var self = this;
    this.dom.onmouseover = function () {
        this.style.color = self.color.colorOver;
    }
}

function menuColor (colorOver) {
    this.colorOver = colorOver;
}

var data = [
    { word: 'menu1', color: ['red'] },
    { word: 'menu2', color: ['green'] }
]

for (var i = 0; i < data.length; i++) {
    new menuItem(data[i].word, new menuColor(data[i][0]))
}

示例三

express中有get、post等方法，如何快速的创建。

var methods = ['get', 'post', 'delete'];
methods.forEach(function (method){
    app[method] = function (){
        // 其他逻辑
    }
})