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()
}
...

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

相关推荐
良木林1 小时前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript
工业甲酰苯胺7 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
谢尔登11 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
然我12 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法
kk_stoper12 小时前
如何通过API查询实时能源期货价格
java·开发语言·javascript·数据结构·python·能源
晨枫阳12 小时前
前端VUE项目-day1
前端·javascript·vue.js
颜酱13 小时前
抽离ant-design后台的公共查询设置
前端·javascript·ant design
绅士玖13 小时前
JavaScript 设计模式之单例模式🚀
前端·javascript·设计模式
Dream耀13 小时前
useReducer:React界的"灭霸手套",一个dispatch搞定所有状态乱局
前端·javascript·react.js
余大侠在劈柴13 小时前
pdf.js 开发指南:在 Web 项目中集成 PDF 预览功能
前端·javascript·学习·pdf