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第一个小程序-进度条
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一、回车和换行 二、行缓冲区概念 三、倒计时 四、进度条代码 版本一: 编辑 版本二: 总结 前言 世上有两种耀眼的光芒,一…...
23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
(二)TensorRT-LLM | 模型导出(v0.20.0rc3)
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述,后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作,其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师,让萌系Otto机器人🔥玩出智能新花样!开整!” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制(TuyaAI…...
Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中,提示一个依赖外部头文件的cpp源文件需要同步,点…...
JVM虚拟机:内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...
搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1)准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2)服务端安装软件:bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...
android13 app的触摸问题定位分析流程
一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...
xmind转换为markdown
文章目录 解锁思维导图新姿势:将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件(ZIP处理)2.解析JSON数据结构3:递归转换树形结构4:Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...
