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第一个小程序-进度条
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一、回车和换行 二、行缓冲区概念 三、倒计时 四、进度条代码 版本一: 编辑 版本二: 总结 前言 世上有两种耀眼的光芒,一…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
VB.net复制Ntag213卡写入UID
本示例使用的发卡器:https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)
概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
Python如何给视频添加音频和字幕
在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX(不访问内存)XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
智能仓储的未来:自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”,物流的终极形态正在诞生 想象这样的场景: 凌晨3点,某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径;AI视觉系统在0.1秒内扫描包裹信息;数字孪生平台正模拟次日峰值流量压力…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器(ADC),支持8kHz~96kHz采样率,集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器,适用于高保真音频采集场景。 2. 核心特性 高精度:24位分辨率,…...
