桥接模式

抽象提取出共用的部分，并将抽象和实现连接起来的方法就叫做桥接模式。

应用场景

在 JavaScript 中，桥接模式经常用于事件的监听。
比如，现在网页上有两个按钮，鼠标点击之后，两个按钮都会弹出提示框，但提示内容并不相同：

例子：

<button>提交</button>
<button>取消</button>

var btns = document.querySelectorAll("button");

btns[0].addEventListener("click", function () {
    alert("提交成功");
});

btns[1].addEventListener("click", function () {
    alert("取消成功");
});

鼠标点击之后，弹出提示框的逻辑是相似的，因此正常的做法是抽象提取出相同的代码：

function clickAfterTip(element) {
    alert(element.innerText + "成功");
}

那么，接下来要做的就是如何将抽象函数与点击事件联系起来。
此时就可以使用桥接模式，在抽象和实现之间架起一座桥梁。

例子：

<button>提交</button>
<button>取消</button>

var btns = document.querySelectorAll("button");

// 抽象函数
function clickAfterTip(element) {
    alert(element.innerText + "成功");
}

// 桥接函数
function bridgeFn(e) {
    clickAfterTip(e.target);
}

// 实现方法
btns[0].addEventListener("click", bridgeFn);
btns[1].addEventListener("click", bridgeFn);

当然，在 JavaScript 中，对于事件的桥接方法更多的是用匿名函数，而不是另写一个桥接函数。

例子：

<button>提交</button>
<button>取消</button>

var btns = document.querySelectorAll("button");

// 抽象函数
function clickAfterTip(element) {
    alert(element.innerText + "成功");
}

// 匿名函数作为桥接函数
btns[0].addEventListener("click", function (e) {
    clickAfterTip(e.target);
});
btns[1].addEventListener("click", function (e) {
    clickAfterTip(e.target);
});

如有错误，欢迎指正，本人不胜感激。