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-多媒体与嵌入 查看更多学习笔记:GitHub:LoveEmiliaForever MDN中文官网 HTML-中的图片 将图片放入网页 可以使用<img/>来将图片嵌入网页,它是一个空元素,最少只需src属性即可工作 <img src"图片链接"…...
openJudge | 距离排序 C语言
总时间限制: 1000ms 内存限制: 65536kB 描述 给出三维空间中的n个点(不超过10个),求出n个点两两之间的距离,并按距离由大到小依次输出两个点的坐标及它们之间的距离。 输入 输入包括两行,第一行包含一个整数n表示点的个数,第二…...
【教程】MySQL数据库学习笔记(三)——数据定义语言DDL(持续更新)
写在前面: 如果文章对你有帮助,记得点赞关注加收藏一波,利于以后需要的时候复习,多谢支持! 【MySQL数据库学习】系列文章 第一章 《认识与环境搭建》 第二章 《数据类型》 第三章 《数据定义语言DDL》 文章目录 【MyS…...
[leetcode]买卖股票的最佳时机 (动态规划)
121. 买卖股票的最佳时机 给定一个数组 prices ,它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票,并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从…...
隐函数的求导【高数笔记】
1. 什么是隐函数? 2. 隐函数的做题步骤? 3. 隐函数中的复合函数求解法,与求导中复合函数求解法有什么不同? 4. 隐函数求导的过程中需要注意什么?...
SG3225EEN晶体振荡器规格书
SG3225EEN 晶振是EPSON/爱普生的一款额定频率25 MHz至500 MHz的石英晶体振荡器,6脚贴片,LV-PECL输出,3225封装常规有源晶振,具有小尺寸,轻薄型,高稳定性,低相位抖动,低电源电压&…...
ESP8266 常用AT指令
一、ESP8266的AT指令要点、常见错误 AT指令要大写;以"\r\n"作结尾;串口通信,115200-None-8-1;支持2.4G频段,不支持5G频段 (如果用手机创建热点,注意选择2.4G)不支持中文的wifi名称工作模式,上电…...
esbuild 构建工具为什么很快?
esbuild 构建工具之所以很快,主要有以下几个原因: Go语言编写:esbuild 是用 Go 语言编写的,Go 语言以其高效的并发模型和编译速度而闻名。与一些其他构建工具相比,Go 语言在并发处理和内存管理方面表现出色,…...
解决vscode报错,在赋值前使用了变量“XXX“
问题:如图所示 解决方法: 法一: 补全函数使其完整 法二: 使用断言...
python自动定时任务schedule库的使用方法
当你需要在 Python 中定期执行任务时,schedule 库是一个非常实用的工具。它可以帮助你自动化定时任务。以下是一些使用示例: 基本使用: import schedule import timedef job():print("Im working...")schedule.every(10).minutes.d…...
用机器学习方法重构期货商品板块
用机器学习方法重构期货商品板块 阿岛格 参考专栏:低门槛搭建个人量化平台 https://www.zhihu.com/column/c_1441014235068944386 摘 要 金融市场商品期货的板块分类,通常根据不同交易所、监管机构和证券商标准,按照期货标的属性、或产业链关系等进行分类,各自分类略有差…...
51单片机项目(29)——基于51单片机的避障跟随小车
1.功能设计 按键模式:按下按键,小车可以前后左右地运动 自动模式:根据红外传感器的状态,自行决定运动状态。检测到前方有物体时,车子移动,起到一个跟随的效果。 演示视频如下: 51单片机智能避障…...
人工智能学习与实训笔记(六):百度飞桨套件使用方法
目录 八、百度飞桨套件使用 8.1 飞桨预训练模型套件PaddleHub 8.1.1 一些本机CPU可运行的飞桨预训练简单模型(亲测可用) 8.1.1.1 人脸检测模型 8.1.1.2 中文分词模型 8.1.2 预训练模型Fine-tune 8.2 飞桨开发套件 8.2.1 PaddleSeg - 图像分割 8…...
Linux第一个小程序-进度条
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一、回车和换行 二、行缓冲区概念 三、倒计时 四、进度条代码 版本一: 编辑 版本二: 总结 前言 世上有两种耀眼的光芒,一…...
别再死记硬背了!用Synopsys DC和ICC搞懂数字IC设计全流程(附避坑清单)
数字IC设计实战:从Synopsys工具链透视高效学习路径 刚接触数字IC设计的工程师常陷入一个怪圈:背了大量DC和ICC命令,面对真实项目却无从下手。这就像背熟了菜谱却做不出佳肴——问题不在于记忆容量,而在于理解烹饪原理和规避操作误…...
Eclipse Paho Android连接管理:自动重连与离线消息缓冲的完整实现指南
Eclipse Paho Android连接管理:自动重连与离线消息缓冲的完整实现指南 【免费下载链接】paho.mqtt.android Eclipse Paho是一个开源的物联网消息代理库。它支持多种协议,包括MQTT、AMQP和HTTP,并提供各种语言的客户端库。Paho适用于需要在物联…...
从TJA1050到SIT1050T:手把手教你搞定CAN收发器外围电路与PCB布局避坑
从TJA1050到SIT1050T:手把手教你搞定CAN收发器外围电路与PCB布局避坑 在汽车电子和工业控制领域,CAN总线因其出色的抗干扰能力和可靠性成为首选通信协议。但许多工程师在设计CAN收发器外围电路时,常因忽视数据手册中的关键细节而导致通信不稳…...
如何轻松突破Cursor试用限制:免费高效的终极解决方案
如何轻松突破Cursor试用限制:免费高效的终极解决方案 【免费下载链接】go-cursor-help 解决Cursor在免费订阅期间出现以下提示的问题: Youve reached your trial request limit. / Too many free trial accounts used on this machine. Please upgrade to pro. We h…...
Python结合OCR技术实现高效发票信息提取与自动化处理
1. 为什么需要自动提取发票信息? 每次月底整理报销单据的时候,你是不是也经常对着堆积如山的发票发愁?一张张手动录入发票号码、金额、开票日期,不仅效率低下还容易出错。我去年在一家电商公司做财务系统优化时,发现财…...
告别手动配置:用STM32CubeMX和Arduino库玩转ADS1115与STM32 ADC
告别手动配置:用STM32CubeMX和Arduino库玩转ADS1115与STM32 ADC 在嵌入式开发的世界里,ADC(模数转换器)就像一位不知疲倦的翻译官,将模拟世界的连续信号转换为数字世界能理解的离散数值。然而,传统的寄存器…...
DDD 领域驱动设计实战:从理论到代码
DDD 领域驱动设计实战:从理论到代码别叫我大神,叫我 Alex 就好。DDD 不是银弹,但它是处理复杂业务逻辑的利器。一、DDD 核心概念 1.1 分层架构 ┌─────────────────────────────────────────┐ │ …...
93%记忆精度的颠覆性突破:智能记忆系统如何重构AI认知能力
93%记忆精度的颠覆性突破:智能记忆系统如何重构AI认知能力 【免费下载链接】EverOS EverMemOS is an open-source, enterprise-grade intelligent memory system. Our mission is to build AI memory that never forgets, making every conversation built on previ…...
Win11下用VMware16安装UOS服务器版全流程(附镜像+序列号)
Win11环境下VMware 16安装UOS服务器版实战指南 在数字化转型浪潮中,国产操作系统正逐步成为企业IT基础设施的新选择。统信UOS作为国内领先的服务器操作系统,凭借其稳定性与安全性,正在金融、政务等领域获得广泛应用。本文将手把手指导Windows…...
Torch-Pruning高效剪枝实战:解决BERT模型部署中的计算资源瓶颈问题
Torch-Pruning高效剪枝实战:解决BERT模型部署中的计算资源瓶颈问题 【免费下载链接】Torch-Pruning [CVPR 2023] Towards Any Structural Pruning; LLMs / Diffusion / Transformers / YOLOv8 / CNNs 项目地址: https://gitcode.com/gh_mirrors/to/Torch-Pruning …...
