为了提高代码质量，优化代码，js代码中也常用使用桥接模式优化。
目的：通过桥接模式代替耦合。通过独立方法间的桥接来形成整体功能，这样每个方法都可以被高度复用。
应用场景：减少模块之间的耦合度。
项目中可根据具体需求，看是否可以用桥接模式去优化你的代码。下面根据一个小的业务需求介绍使用桥接模式的优点。
实例：创建多个dom,并给每个dom绑定鼠标移入移出事件。
言简意赅，下面直接搬出不使用桥接模式的命令式编程。
我要评论function menuItem(word) {
this.word = "";
this.dom = document.createElement('div');
this.dom.innerHTML = this.word;
}
var menu1 = new menuItem('menu1');
var menu2 = new menuItem('menu2');
var menu3 = new menuItem('menu3');
menu1.onmouseover = function () {
menu1.style.color = 'red';
}
menu2.onmouseover = function () {
menu1.style.color = 'green';
}
menu3.onmouseover = function () {
menu1.style.color = 'blue';
}
menu1.onmouseout = function () {
menu1.style.color = 'white';
}
menu2.onmouseout = function () {
menu1.style.color = 'white';
}
menu3.onmouseout = function () {
menu1.style.color = 'white';
}
这种命令式编程虽然能完成业务功能，但是代码质量太差，无论是从可读性合适代码的冗余度内心还是很难接受的。即使利用享元模式的思想，将代码片段公有数据提取，也是不够完美。这种例题中试着去敲下代码，利用桥接模式的优势能体现出来，桥接的思想是通过独立的方法桥接功能，从而减少代码的耦合度，实现整体的功能。
function menuItem(word, color) {
this.word = word;
this.color = color;
this.dom = document.createElement('div');
this.dom.innerHTML = this.word;
document.getElementById('app').appendChild(this.dom);
menuItem.prototype.bind = function () {
var self = this;
this.dom.onmouseover = function () {
this.style.color = self.color.colorOver;
}
this.dom.onmouseout = function () {
this.style.color = self.color.colorOut;
}
}
function menuColor(colorover, colorout) {//独立的方法
this.colorOver = colorover;
this.colorOut = colorout;
}
var data = [
{ word: 'menu1', color: ['red', 'black'] },
{ word: 'menu2', color: ['green', 'black'] },
{ word: 'menu3', color: ['blue', 'black'] }
]
for (var i = 0; i < data.length; i++) {
new menuItem(data[i].word, new menuColor(data[i].color[0], data[i].color[1])).bind();
}
利用函数编程的思想，提取代码共有的数据模块，menuColor作为独立函数处理相应的任务（本例中只做了将颜色实例化），根据业务需求也可以处理更复杂的任务。这样做的好处不仅能使整体功能完整，也能减少代码的耦合度，即使业务需求的变更，开发者只需专注独立函数模块的开发。
本文地址：https://blog.csdn.net/weaJung/article/details/107372654
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论