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

【JSOO】设计模式

news 2026/3/25 22:39:39

  • 单例模式
  • 工厂模式
  • 状态模式
  • 观察者模式
  • 桥接模式

设计模式（是一种通过经验中总结出来的经过反复验证能够解决一类通用问题的可以反复重用的就可称它为模式，否则只能称为功能模块）；模式：把解决问题的方法抽取出来，形成一种通用范例

单例模式

单例模式（只需要一个对象产生，不需要反复产生多个对象）

<head><link rel="stylesheet" href="3.util.css">
</head>
<body><button onclick="test()">弹出遮罩层</button><script src="3.util.js"></script><script>let myObj={};//json数据就是依照单例模式的概念产生的数据模式let obj={name:"月月",age:24,method1:{f1(){return "f1";},f2(){return "f2";}}}//弹出遮罩层案例function test() {/*let div=createDiv(); //返回的对象div.show();*/createDiv();}</script>
</body>

3.util.js文件

/*let createDiv=function () {let div=document.createElement("div");div.className="layer";document.body.appendChild(div); // 放到页面显示出来let show=function () {div.style.display="block";document.body.style.overflow="hidden"}return {show,}//应该只create一次，不然每次点击都创建div，可能会造成反复叠加
}*/// 正确写法
let createDiv=(function () {let div;return function () {if(div==undefined){div=document.createElement("div");div.className="layer";document.body.appendChild(div)}let show=function () {div.style.display="block";document.body.style.overflow="hidden"}show();}
})()

3.util.css文件

body{height: 1500px;
}
.layer{position: absolute;top:30px;left:0;width: 100%;height: 100%;background-color: black;opacity: 0.3;display: none;
}

效果
在这里插入图片描述
示例:

/*野兽约美女，主动微信联系1.需要两个对象，美女+野兽2.需要通过微信3.先看美女有没有微信，如果有微信就直接通过微信联系，如果没有就先安装微信4.两个单例之间开始通信
*///野兽
let yeShou={callMeiNv:function (msg) {let Mn=meiNv.getMessage(msg);alert(Mn.weChar)}
}//美女
let meiNv=(function () { //meiNv={}let wxApp=function(message) { //微信构造函数this.weChar=message}let weChar;let info={ //美女信息getMessage:function (message) {console.log(message)if(!weChar){ //没有微信weChar=new wxApp(message)}return weChar; //对象，wxmini.wxmini}}return info;
})()yeShou.callMeiNv("一起吃饭吗？")

工厂模式

//类似于做架构（只需要调函数传参数）
function createPerson() {function Person() {//一定会得到人，但是是个什么样的人，不确定（弊端是不留接口的话Person()不能扩展）}let a=new Person();return a;
}
// new Person(); 不可用，因为Person()在createPerson()中，改不到
createPerson();function Plane() {}
Plane.prototype.speed=30; //可随意更改模板//原型模式
function student() {}
student.prototype.name="月亮";
student.prototype.work=function () {}//构造函数
function myStudent(name) {this.name=name;this.work=function () {}
}
console.log(new myStudent("月月")) //有constructor属性/* 原型+构造（工作中使用）*/
function emp(name) {this.name=name;
}
// emp.prototype.work=function () { 
// 
// } 有constructor属性emp.prototype={work(){},study(){},//解决没有constructor属性（自己加上去）constructor:emp
}
console.log(new emp("月亮")) //没有constructor属性class Demo{constructor() {//属性}//方法
}

状态模式

<button onclick="myMove('jump')">跳</button>
<button onclick="myMove('run')">跑</button>
<button onclick="myMove('walk')">走</button><script>function myMove(a) {obj[a]();}let obj={jump(){console.log("跳")},run:function () {console.log("跑")},walk(){console.log("走")}}/*let obj={method1(){console.log("method1")},method2(){console.log("method2")},method3(){console.log("method3")},}let a=1;if(a==1){obj.method1()}else if(a==2){obj.method2()}else if (a==3){obj.method3()}let a="method1";obj[a]();*/
</script>

观察者模式

<div id="box">观察者模式</div><script>document.getElementById("box").addEventListener("click", function () {alert("hello 世界")})//vue---Object.defineProperty()   参考：js笔记中的数据双向绑定原理/*观察者模式，属于行为模式的一种，定义了一对多的依赖关系，让多个观察者同时监听一个主题对象，这个主题对象在状态发生变化的时候，会通知所有的观察者，使他们自动更新。和观察者模式很像的：发布订阅模式*/
</script>

桥接模式

桥接方式：降低代码耦合度

<!--
<input type="button" value="300x300" id="inp1" οnclick="changeSize(this)">
<input type="button" value="500x500" id="inp2" οnclick="changeSize(this)">
<input type="button" value="700x700" id="inp3" οnclick="changeSize(this)">
--><input type="button" value="300x300" id="inp1">
<input type="button" value="500x500" id="inp2">
<input type="button" value="700x700" id="inp3"><div><img src="duorou.jpg" alt="">
</div><script>//普通方式:/*function changeSize(obj) {let btnValue=obj.value;btnValue=btnValue.split("x")console.log(btnValue)let size={width:btnValue[0],height:btnValue[1]}let imgObj=document.getElementsByTagName("img")[0];imgObj.style.width=size.width+"px";imgObj.style.height=size.height+"px";}*///桥接方式：降低代码耦合度let changeSize=function (btnValue) {let bValue=btnValue.split("x");let size={width:bValue[0],height:bValue[1]}let imgObj=document.getElementsByTagName("img")[0];imgObj.style.width=size.width+"px";imgObj.style.height=size.height+"px";}// changeSize("100x100") 每一段都可以单独执行//桥let changeSizeBridge=function (e) {let val=e.target;console.log(val.value);changeSize(val.value)}//绑定事件function addEvent(eleObj,eName,eMethod) { //3个参数：元素对象，事件名称，方法let obj=document.getElementById(eleObj); //找到页面的节点if("click"==eName){obj.onclick=function () {eMethod(event)}}}addEvent("inp1","click",changeSizeBridge)addEvent("inp2","click",changeSizeBridge)addEvent("inp3","click",changeSizeBridge)</script>

相关文章：

【JSOO】设计模式

单例模式工厂模式状态模式观察者模式桥接模式 设计模式&#xff08;是一种通过经验中总结出来的经过反复验证能够解决一类通用问题的可以反复重用的就可称它为模式&#xff0c;否则只能称为功能模块&#xff09;&#xff1b;模式&#xff1a;把解决问题的方法抽取出来&#xff…...

编程日记 2024/11/18 22:01:57

本草纲目数字化：Spring Boot在中药实验管理中的应用

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理中药实验管理系统的相关信息成为必然。开发…...

编程日记 2024/11/18 21:59:55

java八股-jvm入门-程序计数器，堆，元空间，虚拟机栈，本地方法栈，类加载器，双亲委派，类加载执行过程

文章目录 PC Register堆虚拟机栈方法区(Metaspace元空间双亲委派机制类加载器 类装载的执行过程 PC Register 程序计数器&#xff08;Program Counter Register&#xff09;是 Java 虚拟机&#xff08;JVM&#xff09;中的一个组件&#xff0c;它在 JVM 的内存模型中扮演着非常…...

编程日记 2024/11/18 21:58:53

重构Action-cli前端脚手架

一、概述 最近一年&#xff0c;为了满足公司业务开发&#xff0c;解决重复搭建项目繁琐过程&#xff0c;自己开发了一个前端脚手架&#xff0c;并发布到npm。随着时间的推移&#xff0c;发现之前的版本存在很多问题&#xff0c;有些功能做不到位&#xff0c;而且代码也不是很规…...

编程日记 2024/11/18 21:57:52

华为USG5500防火墙配置NAT

实验要求&#xff1a; 1.按照拓扑图部署网络环境&#xff0c;使用USG5500防火墙&#xff0c;将防火墙接口加入相应的区域&#xff0c;添加区域访问规则使内网trust区域可以访问DMZ区域的web服务器和untrust区域的web服务器。 2.在防火墙上配置easy-ip&#xff0c;使trust区域…...

编程日记 2024/11/18 21:54:49

【大数据学习 | HBASE高级】hive操作hbase

一般在查询hbase的数据的时候我们可以直接使用hbase的命令行或者是api进行查询就行了&#xff0c;但是在日常的计算过程中我们一般都不是为了查询&#xff0c;都是在查询的基础上进行二次计算&#xff0c;所以使用hbase的命令是没有办法进行数据计算的&#xff0c;并且对于hbas…...

编程日记 2024/11/18 21:53:48

集群聊天服务器(9)一对一聊天功能

目录 一对一聊天离线消息服务器异常处理 一对一聊天 先新添一个消息码 在业务层增加该业务 没有绑定事件处理器的话消息会派发不出去 聊天其实是服务器做一个中转 现在同时登录两个账号 收到了聊天信息 再回复一下 离线消息 声明中提供接口和方法 张三对离线的李…...

编程日记 2024/11/18 21:49:39

《FreeRTOS列表和列表项篇》

FreeRTOS列表和列表项 1. 什么是列表和列表项&#xff1f;1.1 列表list1.2 列表项list item 2. 列表和列表项的初始化2.1 列表的初始化2.2 列表项的初始化 3. 列表项的插入4. 列表项末尾插入5. 列表项的删除6. 列表的遍历 列表和列表项是FreeRTOS的一个数据结构&#xff0c;是F…...

编程日记 2024/11/18 21:48:36

C++:哈希拓展-位图

目录 一.问题导入 二.什么是位图? 2.1如何确定目标数在哪个比特位? 2.2如何存放高低位 2.3位图模拟代码实现 2.3.1如何标记一个数 2.3.2如何重置标记 2.3.3如何检查一个数是否被标记 整体代码实现 标准库的Bitset 库中的bitset的缺陷 简单应用 一.问题导入 这道…...

编程日记 2024/11/18 21:47:34

【数据结构与算法】查找

文章目录 一.查找二.线性结构的查找2.1顺序查找2.2折半查找2.3分块查找 三.树型结构的查找3.1二叉排序树1.定义2.二叉排序树的常见操作3.性能分析 3.2平衡二叉树1.定义2.平衡二叉树的常见操作3.性能分析 3.3B树1.定义2.B树的相关操作 3.4B树1.定义2.B树与B树的比较 四.散列表1.…...

编程日记 2024/11/18 21:42:29

从零开始学习 sg200x 多核开发之 milkv-duo256 编译运行 sophpi

sophpi 是 算能官方针对 sg200x 系列的 SDK 仓库 https://github.com/sophgo/sophpi &#xff0c;支持 cv180x、cv81x、sg200x 系列的芯片。 SG2002 简介 SG2002 是面向边缘智能监控 IP 摄像机、智能猫眼门锁、可视门铃、居家智能等多项产品领域而推出的高性能、低功耗芯片&a…...

编程日记 2024/11/18 21:37:22

LLM - 使用 LLaMA-Factory 微调大模型 Qwen2-VL SFT(LoRA) 图像数据集 教程 (2)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/143725947 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 LLaMA-…...

编程日记 2024/11/18 21:36:21

基于STM32设计的大棚育苗管理系统(4G+华为云IOT)_265

文章目录 一、前言1.1 项目介绍【1】项目开发背景【2】设计实现的功能【3】项目硬件模块组成【4】设计意义【5】国内外研究现状【6】摘要1.2 设计思路1.3 系统功能总结1.4 开发工具的选择【1】设备端开发【2】上位机开发1.5 参考文献1.6 系统框架图1.7 系统原理图1.8 实物图1.9…...

编程日记 2024/11/18 21:35:19

深入浅出《钉钉AI》产品体验报告

1. 引言 随着人工智能技术的迅猛发展&#xff0c;企业协同办公领域迎来了新的变革。钉钉作为阿里巴巴集团旗下的企业级通讯与协同办公平台&#xff0c;推出了钉钉AI助理&#xff0c;旨在提高工作效率&#xff0c;优化用户体验。本报告将对钉钉AI助理进行全面的产品体验分析&am…...

编程日记 2024/11/18 21:34:14

2020年计挑赛往届真题（C++）

因为17号要开赛了&#xff0c;甚至是用云端编辑器&#xff0c;debuff拉满&#xff0c;只能临时抱佛脚了 各个选择题的选择项我就不标出来了&#xff0c;默认ABCD排&#xff0c;手打太麻烦了 目录 单选题&#xff1a; 1.阅读以下语句:double m0;for(int i3;i>0;i--)m1/i;…...

编程日记 2024/11/18 21:29:08

ES6进阶知识二

一、promise方法的案例 Promise对象通过new Promise()语法创建&#xff0c;它接受一个函数作为参数&#xff0c;该函数接受两个参数&#xff1a;resolve和reject。resolve表示异步操作成功&#xff0c;reject表示异步操作失败。 案例&#xff1a;异步加载图片 const loadIma…...

编程日记 2024/11/18 21:27:06

大语言模型通用能力排行榜（2024年10月8日更新)

数据来源SuperCLUE 榜单数据为通用能力排行榜 排名 模型名称 机构 总分 理科 文科 Hard 使用方式 发布日期 - o1-preview OpenAI 75.85 86.07 76.6 64.89 API 2024年11月8日 - Claude 3.5 Sonnet&#xff08;20241022&#xff09; Anthropic 70.88 82.4…...

编程日记 2024/11/18 21:26:05

第六节、Docker 方式部署指南 github 上项目 mkdocs-material

一、简介 MkDocs 可以同时编译多个 markdown 文件，形成书籍一样的文件。有多种主题供你选择，很适合项目使用。 MkDocs 是快速，简单和华丽的静态网站生成器，可以构建项目文档。文档源文件在 Markdown 编写，使用单个 YAML 配置文件配置。 MkDocs—markdown项目文档工具，…...

编程日记 2024/11/18 21:24:03

【MySQL】MySQL中的函数之JSON_REPLACE

在 MySQL 中&#xff0c;JSON_REPLACE() 函数用于在 JSON 文档中替换现有的值。如果指定的路径不存在&#xff0c;则 JSON_REPLACE() 不会修改 JSON 文档。如果需要添加新的键值对&#xff0c;可以使用 JSON_SET() 函数。 基本语法 JSON_REPLACE(json_doc, path, val[, path,…...

编程日记 2024/11/18 21:23:01

【大数据学习 | HBASE高级】hbase的API操作

首先引入hbase的依赖 <dependencies><dependency><groupId>org.apache.hbase</groupId><artifactId>hbase-server</artifactId><version>2.4.13</version></dependency><dependency><groupId>org.slf4j<…...

编程日记 2024/11/18 21:18:56

EBioMedicine（IF=10.8）英国伦敦国王学院等团队：融合CT深度学习、CT放射组学与外周血免疫特征在症状患者队列中诊断肺癌的研究

01文献学习今天分享的文献是由英国伦敦国王学院综合癌症中心、英国伦敦大学学院等团队于2026年2月在《eBioMedicine》&#xff08;中科院1区top&#xff0c;IF10.8&#xff09;上发表的研究“Fusing data from CT deep learning, CT radiomics and peripheral blood immune pro…...

编程新知 2026/3/25 21:32:38

SDMatte镜像国产化适配：昇腾/海光平台移植可行性评估

SDMatte镜像国产化适配&#xff1a;昇腾/海光平台移植可行性评估 1. 项目背景与技术特点 SDMatte是一款专注于高质量图像抠图的AI模型&#xff0c;特别擅长处理复杂边缘和半透明物体的提取任务。该模型在电商、设计、内容创作等领域具有广泛应用价值&#xff0c;能够高效完成…...

编程新知 2026/3/25 20:58:00

从SPP到ASPP：一文读懂语义分割中的多尺度特征提取技术

从SPP到ASPP&#xff1a;解码语义分割中的多尺度特征提取技术演进 在计算机视觉领域&#xff0c;语义分割任务要求模型对图像中的每个像素进行分类&#xff0c;这需要算法能够同时理解局部细节和全局上下文。传统卷积神经网络(CNN)在处理这一挑战时面临一个根本性矛盾&#xff…...

编程新知 2026/3/25 20:21:47

Python爬虫实战：避开巨潮资讯网反爬，稳定获取上市公司年报PDF下载地址

Python爬虫实战&#xff1a;突破动态加载限制获取上市公司年报PDF链接 财经数据爬取一直是数据分析师和量化投资者的刚需&#xff0c;但许多金融信息平台都采用了动态加载技术来保护数据。最近在开发者社区看到不少关于巨潮资讯网爬取失败的求助帖——明明用Requests库能抓到HT…...

编程新知 2026/3/25 19:53:33

Nanobot知识图谱：Neo4j数据库集成指南

Nanobot知识图谱&#xff1a;Neo4j数据库集成指南 1. 引言 想象一下&#xff0c;你的AI助手不仅能回答简单问题&#xff0c;还能理解复杂的关系网络——比如公司内部的汇报关系、产品之间的关联性&#xff0c;甚至是学术文献中的引用关系。这就是知识图谱的魅力所在。 在实际…...

编程新知 2026/3/25 19:25:29

5分钟搞定输入法词库转换：深蓝词库转换工具全攻略

5分钟搞定输入法词库转换&#xff1a;深蓝词库转换工具全攻略 【免费下载链接】imewlconverter ”深蓝词库转换“ 一款开源免费的输入法词库转换程序 项目地址: https://gitcode.com/gh_mirrors/im/imewlconverter 还在为输入法词库迁移发愁&#xff1f;试试这款免费神器…...

编程新知 2026/3/25 17:31:02

FPGA复位策略全流程验证：从RTL到实现后的仿真与电路解析

1. FPGA复位策略的重要性与验证流程 在FPGA设计中&#xff0c;复位策略就像建筑的地基&#xff0c;看起来不起眼却决定了整个系统的稳定性。我遇到过不少项目&#xff0c;功能仿真一切正常&#xff0c;但上板后随机出现异常&#xff0c;最后排查发现都是复位信号处理不当导致的…...

编程新知 2026/3/25 17:02:54

Wan2.2-I2V-A14B多模态应用：图文描述→视频→自动配背景音乐（FFmpeg集成）

Wan2.2-I2V-A14B多模态应用&#xff1a;图文描述→视频→自动配背景音乐&#xff08;FFmpeg集成&#xff09; 1. 镜像概述与核心能力 Wan2.2-I2V-A14B是一款专为文生视频任务优化的多模态模型&#xff0c;能够将文字描述直接转换为高质量视频内容。本镜像针对RTX 4090D 24GB显…...

编程新知 2026/3/25 16:56:50

mbed-Freescale：Kinetis MCU高速ADC硬件加速库

1. 项目概述mbed-Freescale是一个面向飞思卡尔&#xff08;Freescale&#xff0c;现为NXP Semiconductors&#xff09;微控制器平台的 mbed OS 兼容库实现&#xff0c;其核心设计目标并非泛化支持全系列 Freescale MCU&#xff0c;而是聚焦于高性能模拟信号采集场景下的硬件加速…...

编程新知 2026/3/25 16:46:48

基于开源框架的问答客服智能体本地搭建实战：从选型到生产环境部署

痛点分析&#xff1a;为何选择本地化部署&#xff1f; 在数字化转型浪潮中&#xff0c;智能客服系统已成为企业与用户沟通的关键桥梁。然而&#xff0c;依赖大型云服务商提供的智能客服API&#xff0c;虽然起步便捷&#xff0c;但在规模化应用中逐渐暴露出诸多痛点。 首先&…...

编程新知 2026/3/25 16:42:47