欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

设计模式之桥接模式

程序员文章站 2022-06-23 14:41:04
在面向对象设计中,有一个很重要的设计原则,那就是合成/聚合复用原则,即优先使用对象合成/聚合,而不是类继承。 合成和关联都是关联的特殊种类。聚合表示一种弱的拥有关系,体现的是A对象可以包含B对象,但B对象不是A对象的一部分;合成则是一种强的拥有关系,体现了一种严格的部分与整体的关系,部分和整体的生命 ......

桥接模式

为了提高代码质量,优化代码,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