为了账号安全,请及时绑定邮箱和手机立即绑定

桥接模式

2020.08.21 14:45 5125浏览

桥接模式

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

应用场景

在 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);
});

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

点击查看更多内容

本文首次发布于慕课网 ,转载请注明出处,谢谢合作

1人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消