JavaScript 设计模式之桥接模式

桥接模式

通过桥接模式,我们可以将业务逻辑与元素的事件解耦,也可以更灵活的创建一些对象

倘若我们有如下代码

javascript 复制代码
const dom = document.getElementById('#test')

// 鼠标移入移出事件
// 鼠标移入时改变背景色和字体颜色
dom.onmouseenter = function() { 
  this.style.color = 'white'
  this.style.backgroundColor = 'black'
}

// 鼠标移出时恢复背景色和字体颜色
dom.onmouseleave = function () {
  this.style.color = 'black'
  this.style.backgroundColor = 'white'
}

这里我们不难看出有部分代码是重复的,只是改变了字体颜色跟背景色,这耦合度就高起来了,我们可以是这样

javascript 复制代码
const changeColor = (dom, color, val)=>{
  dom.style[color] = val
}
const dom = document.getElementById('#test')
dom.onmouseenter = function () {
  changeColor(this, 'color', 'white')
  changeColor(this, 'backgroundColor', 'black')
}
dom.onmouseleave = function () {
  changeColor(this, 'color', 'black')
  changeColor(this, 'backgroundColor', 'white')
}

继续优化

javascript 复制代码
const changeColor = (dom, color, val)=>{
  dom.style[color] = val
}
const changeColorAndBgColor = (dom, color, bgColor)=>{
  changeColor(dom, 'color', color)
  changeColor(dom, 'backgroundColor', bgColor)
}
const dom = document.getElementById('#test')
dom.onmouseenter = function () {
  changeColorAndBgColor(this, 'white', 'black')
}
dom.onmouseleave = function () {
  changeColor(this, 'black', 'white')
}

多元化

在使用不同角色有相同公用的方法时可以使用这种多元化来处理

javascript 复制代码
const Speed = (x, y) => {
  this.x = x
  this.y = y
}
Speed.prototype.run = function () { 
  console.log('first run')
}
// TODO:其他内容
const Color = color => {
  this.color = color
}
Color.prototype.draw = function () {
  console.log('first draw')
}
// TODO:其他内容
const Speak = word => {
  this.word = word
}
Speak.prototype.say = function () {
  console.log('first say')
}
// TODO:其他内容

// 创建一个 球
const Ball = function (x, y, color) {
  this.speed = new Speed(x, y)
  this.color = new Color(color)
}
Ball.prototype.init = function () {
  this.speed.run()
  this.color.draw()
}

// 创建一个人
const People = function (x, y, say) {
  this.speed = new Speed(x, y)
  this.speak = new Speak(say)
}
People.prototype.init = function () {
  this.speed.run()
  this.speak.say()
}
...

通过桥接灵活的创建一个对象,针对不同的对象处理不同的业务逻辑,更灵活处理差异

相关推荐
开开心心就好42 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Hellyc7 小时前
基于模板设计模式开发优惠券推送功能以及对过期优惠卷进行定时清理
java·数据库·设计模式·rocketmq
追烽少年x7 小时前
设计模式---观察者模式(发布-订阅模式)
网络·设计模式
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
花好月圆春祺夏安7 小时前
基于odoo17的设计模式详解---享元模式
设计模式·享元模式
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
花好月圆春祺夏安9 小时前
基于odoo17的设计模式详解---命令模式
设计模式·命令模式
烛阴10 小时前
WebSocket实时通信入门到实践
前端·javascript