当前位置: 首页 > news >正文

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'
}

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

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')
}

继续优化

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')
}

多元化

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

const Speed = (x, y) => {this.x = xthis.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()
}
...

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

相关文章:

JavaScript 设计模式之桥接模式

桥接模式 通过桥接模式,我们可以将业务逻辑与元素的事件解耦,也可以更灵活的创建一些对象 倘若我们有如下代码 const dom document.getElementById(#test)// 鼠标移入移出事件 // 鼠标移入时改变背景色和字体颜色 dom.onmouseenter function() { th…...

B3651 [语言月赛202208] 数组调整

题目描述 给出一个长度为 n 的数组,第 i 个数为ai​。 为了调整这个数组,需要将第 k 个数改变为 −ak​。 请你求出调整后的数组中所有数的和。 输入格式 输入共两行。 输入的第一行为两个整数 n,k。 输入的第二行为 n 个整数,第 i 个…...

MessageQueue --- RabbitMQ

MessageQueue --- RabbitMQ RabbitMQ IntroRabbitMQ 核心概念RabbitMQ 分发类型Dead letter (死信)保证消息的可靠传递 RabbitMQ Intro 2007年发布,是一个在AMQP(高级消息队列协议)基础上完成的,可复用的企业消息系统,…...

WordPress作者页面链接的用户名自动变成16位字符串串插件Smart User Slug Hider

WordPress默认的作者页面URL链接地址格式为“你的域名/author/admin”,其中admin就是你的用户名,这样的话就会暴露我们的用户名。 为了解决这个问题,前面boke112百科跟大家分享了『如何将WordPress作者存档链接中的用户名改为昵称或ID』一文…...

Nvidia 携手 RTX 推出的本地运行 AI 聊天机器人

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…...

年假作业day2

1.打印字母图形 #include<stdio.h> #include<string.h> int main(int argc, const char *argv[]) { int i,j; char k; for(i1;i<7;i) { for(j1;j<i;j) { printf("%c",_); } for(j0,…...

HTML-多媒体嵌入-MDN文档学习笔记

HTML-多媒体与嵌入 查看更多学习笔记&#xff1a;GitHub&#xff1a;LoveEmiliaForever MDN中文官网 HTML-中的图片 将图片放入网页 可以使用<img/>来将图片嵌入网页&#xff0c;它是一个空元素&#xff0c;最少只需src属性即可工作 <img src"图片链接"…...

openJudge | 距离排序 C语言

总时间限制: 1000ms 内存限制: 65536kB 描述 给出三维空间中的n个点&#xff08;不超过10个&#xff09;,求出n个点两两之间的距离,并按距离由大到小依次输出两个点的坐标及它们之间的距离。 输入 输入包括两行&#xff0c;第一行包含一个整数n表示点的个数&#xff0c;第二…...

【教程】MySQL数据库学习笔记(三)——数据定义语言DDL(持续更新)

写在前面&#xff1a; 如果文章对你有帮助&#xff0c;记得点赞关注加收藏一波&#xff0c;利于以后需要的时候复习&#xff0c;多谢支持&#xff01; 【MySQL数据库学习】系列文章 第一章 《认识与环境搭建》 第二章 《数据类型》 第三章 《数据定义语言DDL》 文章目录 【MyS…...

[leetcode]买卖股票的最佳时机 (动态规划)

121. 买卖股票的最佳时机 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从…...

隐函数的求导【高数笔记】

1. 什么是隐函数&#xff1f; 2. 隐函数的做题步骤&#xff1f; 3. 隐函数中的复合函数求解法&#xff0c;与求导中复合函数求解法有什么不同&#xff1f; 4. 隐函数求导的过程中需要注意什么&#xff1f;...

SG3225EEN晶体振荡器规格书

SG3225EEN 晶振是EPSON/爱普生的一款额定频率25 MHz至500 MHz的石英晶体振荡器&#xff0c;6脚贴片&#xff0c;LV-PECL输出&#xff0c;3225封装常规有源晶振&#xff0c;具有小尺寸&#xff0c;轻薄型&#xff0c;高稳定性&#xff0c;低相位抖动&#xff0c;低电源电压&…...

ESP8266 常用AT指令

一、ESP8266的AT指令要点、常见错误 AT指令要大写;以"\r\n"作结尾;串口通信&#xff0c;115200-None-8-1;支持2.4G频段&#xff0c;不支持5G频段 &#xff08;如果用手机创建热点&#xff0c;注意选择2.4G&#xff09;不支持中文的wifi名称工作模式&#xff0c;上电…...

esbuild 构建工具为什么很快?

esbuild 构建工具之所以很快&#xff0c;主要有以下几个原因&#xff1a; Go语言编写&#xff1a;esbuild 是用 Go 语言编写的&#xff0c;Go 语言以其高效的并发模型和编译速度而闻名。与一些其他构建工具相比&#xff0c;Go 语言在并发处理和内存管理方面表现出色&#xff0c…...

解决vscode报错,在赋值前使用了变量“XXX“

问题&#xff1a;如图所示 解决方法&#xff1a; 法一&#xff1a; 补全函数使其完整 法二&#xff1a; 使用断言...

python自动定时任务schedule库的使用方法

当你需要在 Python 中定期执行任务时&#xff0c;schedule 库是一个非常实用的工具。它可以帮助你自动化定时任务。以下是一些使用示例&#xff1a; 基本使用&#xff1a; import schedule import timedef job():print("Im working...")schedule.every(10).minutes.d…...

用机器学习方法重构期货商品板块

用机器学习方法重构期货商品板块 阿岛格 参考专栏:低门槛搭建个人量化平台 https://www.zhihu.com/column/c_1441014235068944386 摘 要 金融市场商品期货的板块分类,通常根据不同交易所、监管机构和证券商标准,按照期货标的属性、或产业链关系等进行分类,各自分类略有差…...

51单片机项目(29)——基于51单片机的避障跟随小车

1.功能设计 按键模式&#xff1a;按下按键&#xff0c;小车可以前后左右地运动 自动模式&#xff1a;根据红外传感器的状态&#xff0c;自行决定运动状态。检测到前方有物体时&#xff0c;车子移动&#xff0c;起到一个跟随的效果。 演示视频如下&#xff1a; 51单片机智能避障…...

人工智能学习与实训笔记(六):百度飞桨套件使用方法

目录 八、百度飞桨套件使用 8.1 飞桨预训练模型套件PaddleHub 8.1.1 一些本机CPU可运行的飞桨预训练简单模型&#xff08;亲测可用&#xff09; 8.1.1.1 人脸检测模型 8.1.1.2 中文分词模型 8.1.2 预训练模型Fine-tune 8.2 飞桨开发套件 8.2.1 PaddleSeg - 图像分割 8…...

Linux第一个小程序-进度条

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 一、回车和换行 二、行缓冲区概念 三、倒计时 四、进度条代码 版本一&#xff1a; ​编辑 版本二&#xff1a; 总结 前言 世上有两种耀眼的光芒&#xff0c;一…...

认知迷雾计划:用废话消耗AI算力

被低效会议吞噬的AI资源在软件测试领域&#xff0c;AI驱动工具正逐步承担自动化测试、缺陷预测、日志分析等高价值任务。然而&#xff0c;一种名为“认知迷雾”的隐形威胁——即低效会议产生的海量冗余信息——正在持续消耗宝贵算力资源。本文从测试工程视角&#xff0c;剖析废…...

广东省内推荐靠谱的知识产权服务机构

在广东省&#xff0c;随着创新驱动发展战略的深入实施&#xff0c;知识产权的重要性日益凸显。无论是企业还是个人&#xff0c;都越来越重视知识产权的保护和运用。选择一家靠谱的知识产权服务机构至关重要&#xff0c;它能为客户提供专业、高效的服务&#xff0c;助力客户在知…...

BGE-Reranker-v2-m3企业部署:高并发请求压力测试案例

BGE-Reranker-v2-m3企业部署&#xff1a;高并发请求压力测试案例 1. 项目背景与价值 在企业级RAG&#xff08;检索增强生成&#xff09;系统中&#xff0c;检索精度直接影响最终的回答质量。传统向量检索虽然快速&#xff0c;但容易受到关键词相似性的干扰&#xff0c;返回大…...

别再死记硬背了!用Multisim仿真带你玩转计数器与数据选择器(附FPGA引脚配置)

用Multisim仿真与FPGA实战&#xff1a;计数器与数据选择器的设计艺术 数字电路课程中那些抽象的概念&#xff0c;是否曾让你感到困惑&#xff1f;模5计数器、序列信号发生器这些名词听起来高深莫测&#xff0c;但通过Multisim仿真和FPGA实战&#xff0c;你会发现它们其实可以很…...

SDMatte与LSTM时序模型结合:处理视频连续帧的稳定抠图

SDMatte与LSTM时序模型结合&#xff1a;处理视频连续帧的稳定抠图 1. 引言&#xff1a;视频抠图的挑战与机遇 视频抠图技术一直是影视后期和直播领域的核心需求。传统方法在处理动态场景时常常面临边缘闪烁、细节丢失和时间不一致等问题。想象一下&#xff0c;当你在视频会议…...

weixin273基于微信小程序的刷题系统的设计与实现+springboot(文档+源码)_kaic

第4章 系统实现4.1登录功能模块的实现登录功能包括用户登录和管理员登录&#xff0c;在登录界面设计中包括用户名和密码、身份的检验。用户名和密码、身份的检验过程由数据库自动完成&#xff0c;此过程需要1秒左右。首先由用户填写账号和密码&#xff0c;然后选择身份&#xf…...

重构macOS开发流程:OpenInTerminal如何提升开发者环境切换效率

重构macOS开发流程&#xff1a;OpenInTerminal如何提升开发者环境切换效率 【免费下载链接】OpenInTerminal ✨ Finder Toolbar app for macOS to open the current directory in Terminal, iTerm, Hyper or Alacritty. 项目地址: https://gitcode.com/gh_mirrors/op/OpenInT…...

【实战】VSCode插件离线安装全攻略:从下载到部署

1. 为什么需要离线安装VSCode插件 作为一名在开发一线摸爬滚打多年的老码农&#xff0c;我遇到过太多因为网络问题导致插件安装失败的场景。比如去年在某大型制造企业的工厂MES系统升级项目中&#xff0c;开发环境完全隔离外网&#xff0c;但团队又急需使用GitLens和Python插件…...

从‘猫狗大战’到医疗影像:LRP(逐层相关性传播)如何帮医生看懂AI的‘诊断思路’?

从‘猫狗大战’到医疗影像&#xff1a;LRP如何成为医生与AI的翻译官 当一位放射科医生第一次看到AI系统标注的肺结节"恶性概率92%"时&#xff0c;他的反应不是赞叹&#xff0c;而是皱眉&#xff1a;"它凭什么这么判断&#xff1f;"这种场景正在全球各大医院…...

如何使用Kubernetes Python Client实现安全策略:准入Webhook完整指南

如何使用Kubernetes Python Client实现安全策略&#xff1a;准入Webhook完整指南 【免费下载链接】python Official Python client library for kubernetes 项目地址: https://gitcode.com/gh_mirrors/python1/python Kubernetes Python Client是官方提供的Python客户端…...