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

JS设计模式（一）单例模式

news 文章来源：https://blog.csdn.net/m0_73756108/article/details/140498332 2025/2/11 9:47:26

注释很详细，直接上代码

本文建立在已有JS面向对象基础的前提下，若无，请移步以下博客先行了解

JS面向对象（一）类与对象写法

特点和用途：
  • 全局访问点：通过单例模式可以在整个应用程序中访问同一个对象实例，而不要每次使用时都创建新的对象。
  • 节省资源：特别是在需要频繁创建和销毁对象时，单例模式可以减少内存和资源占用。
  • 数据共享：由于单例模式只有一个实例，可以确保数据在各个部分共享使用。

单例模式在开发中广泛应用，例如管理全局状态、配置信息、日志记录器等场景，确保整个应用程序中某个类只有一个实例是非常有用的

源码：

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body><script>class LoginForm {constructor() {this.state = "hide";}show() {if (this.state === "show") {alert("已经显示");return;}this.state = "show";console.log("登录框显示成功");}hide() {if (this.state === "hide") {alert("已经隐藏");return;}this.state = "hide";console.log("登录框隐藏成功");}}LoginForm.getInstance = (function () {let instance; //因为是闭包，这个标识可以存储在函数内部，所以这里可以保证实例的唯一性return function () {if (!instance) {instance = new LoginForm();}return instance;};})();let obj1 = LoginForm.getInstance();obj1.show();let obj2 = LoginForm.getInstance();//两次获取的实例是同一个obj2.hide();console.log(obj1 === obj2);//这里演示一下闭包的应用//--------------------------------------------------/*function myTest() {let sum = 0;return function add(num) {sum += num;console.log(sum);};}let add = myTest();add(1);add(2);let add2 = myTest();add2(5);add2(6);*/</script>
</html>

相关文章：

JS设计模式（一）单例模式

注释很详细&#xff0c;直接上代码 本文建立在已有JS面向对象基础的前提下&#xff0c;若无&#xff0c;请移步以下博客先行了解 JS面向对象&#xff08;一&#xff09;类与对象写法 特点和用途&#xff1a; 全局访问点&#xff1a;通过单例模式可以在整个应用程序中访问同一个…...

编程日记 2024/7/21 17:13:43

uniapp动态计算并设置元素高度

<template><view><scroll-view id"sv-box" :scroll-y"true" :style"{height:navHeightpx}"></scroll-view><view id"btn-box"><button>取消</button><button>确认</button><…...

编程日记 2024/7/21 17:11:41

直播架构如何设计核心节点和边缘节点

在直播架构中&#xff0c;核心节点和边缘节点的分工及主要服务是确保直播服务稳定、高效和可扩展的关键。以下是对这些节点的详细描述&#xff1a; 核心节点 核心节点通常位于数据中心&#xff0c;负责处理直播的主要逻辑和数据处理。其主要服务包括&#xff1a; 直播管理后…...

编程日记 2024/7/21 17:09:39

自动驾驶-预测概览

通过生成一条路径来预测一个物体的行为&#xff0c;在每一个时间段内&#xff0c;为每一辆汽车重新计算预测他们新生成的路径&#xff0c;这些预测路径为规划阶段做出决策提供了必要信息 预测路径有实时性的要求&#xff0c;预测模块能够学习新的行为。我们可以使用多源的数据…...

编程日记 2024/7/21 17:04:35

基于PSO算法优化PID参数的一些问题

目录 前言 Q1&#xff1a;惯性权重ω如何设置比较好&#xff1f;学习因子C1和C2如何设置&#xff1f; Q2&#xff1a;迭代速度边界设定一定能够遍历&#xff08;/覆盖&#xff09;整个PID参数二维空间范围吗&#xff1f;还是说需要与迭代次数相关&#xff1f;迭代次数越高&a…...

编程日记 2024/7/21 17:03:34

什么是决策树？

1. 什么是决策树&#xff1f; 决策树&#xff08;Decision Tree&#xff09;是一种常用的机器学习算法&#xff0c;用于解决分类和回归问题。它通过构建树结构来表示决策过程&#xff0c;分支节点表示特征选择&#xff0c;叶节点表示类别或回归值。 2. 决策树的组成部分 决策…...

编程日记 2024/7/21 16:59:28

ASP 快速参考

ASP 快速参考 概述 ASP&#xff08;Active Server Pages&#xff09;是一种由微软开发的服务器端脚本环境&#xff0c;用于动态网页设计和开发。它允许开发者创建和运行动态交互性网页&#xff0c;如访问数据库、发送电子邮件等。ASP页面通常以.asp为文件扩展名&#xff0c;并…...

编程日记 2024/7/21 16:57:26

(二)原生js案例之数码时钟计时

原生js实现的数字时间上下切换显示时间的效果&#xff0c;有参考相关设计&#xff0c;思路比较难&#xff0c;代码其实很简单 效果 代码实现 必要的样式 <style>* {padding: 0;margin: 0;}.content{/* text-align: center; */display: flex;align-items: center;justif…...

编程日记 2024/7/21 16:56:26

[CSS] 浮动布局的深入理解与应用

文章目录 浮动的简介元素浮动后的特点解决浮动产生的影响浮动后的影响解决浮动产生的影响 浮动相关属性实际应用示例示例1&#xff1a;图片与文字环绕示例2&#xff1a;多列布局示例3&#xff1a;响应式布局 总结 浮动布局是CSS中一种非常强大的布局方式&#xff0c;最初设计用…...

编程日记 2024/7/21 16:52:22

Linux云计算 |【第一阶段】ENGINEER-DAY2

主要内容&#xff1a; 磁盘空间管理fdisk、parted工具、开机自动挂载、文件系统、交换空间 KVM虚拟化 实操前骤&#xff1a; 1&#xff09;添加一块硬盘&#xff08;磁盘&#xff09;&#xff0c;需要关机才能进行操作&#xff0c;点击左下角【添加硬件】 2&#xff09;选择2…...

编程日记 2024/7/21 16:51:21

9.11和9.9哪个大？

没问题 文心一言 通义千问...

编程日记 2024/7/21 16:50:20

学懂C语言（十二）：C语言中的二进制原理及应用

目录 1. 二进制原理 1.1 什么是二进制&#xff1f; 1.2 如何在C语言中表示二进制&#xff1f; 2. 二进制的表示 2.1 二进制和其他进制的转换 2.2 C语言中的二进制表示 3. 二进制运算 3.1 位运算符 3.2 计算过程示例 4. 应用示例 4.1 使用位运算实现开关 5. 总结 C语…...

编程日记 2024/7/21 16:49:19

科研绘图系列：R语言雨云图（Raincloud plot）

介绍 雨云图（Raincloud plot）是一种数据可视化工具，它结合了多种数据展示方式，旨在提供对数据集的全面了解。雨云图通常包括以下几个部分： 密度图（Density plot）：表示数据的分布情况，密度图的曲线可以展示数据在不同数值区间的密度。箱线图（Box plot）：显示数据的中…...

编程日记 2024/7/21 16:48:17

优化教学流程和架构：构建高效学习环境的关键步骤

在教育领域&#xff0c;设计和优化教学流程和架构是提高学习效果和学生参与度的关键。本文将探讨如何通过合理的教学流程和有效的架构来构建一个高效的学习环境。 ### 1. 理解教学流程和架构的重要性 教学流程指的是教学活动的组织和顺序&#xff0c;而教学架构则是指支持教学…...

编程日记 2024/7/21 16:45:14

js | this 指向问题

https://juejin.cn/post/6844904083707396109 任何函数运行的时候&#xff0c;都会创建一个context对象&#xff0c;context对象有一个this对象&#xff0c;在运行的时候决定。任何函数都对应一个reference类结构体&#xff08;具体叫啥有点忘了&#xff09;&#xff0c;简单就…...

编程日记 2024/7/21 16:43:12

《昇思 25 天学习打卡营第 15 天 | 基于MindNLP+MusicGen生成自己的个性化音乐 》

《昇思 25 天学习打卡营第 15 天 | 基于MindNLPMusicGen生成自己的个性化音乐 》 活动地址&#xff1a;https://xihe.mindspore.cn/events/mindspore-training-camp 签名&#xff1a;Sam9029 MusicGen概述 MusicGen是由Meta AI的Jade Copet等人提出的一种基于单个语言模型&…...

编程日记 2024/7/21 16:38:04

Gitee 使用教程1-SSH 公钥设置

一、生成 SSH 公钥 1、打开终端&#xff08;Windows PowerShell 或 Git Bash&#xff09;&#xff0c;通过命令 ssh-keygen 生成 SSH Key&#xff1a; ssh-keygen -t ed25519 -C "Gitee SSH Key" 随后摁三次回车键&#xff08;Enter&#xff09; 2、查看生成的 SSH…...

编程日记 2024/7/21 16:37:03

理解Cookie、Session和Token

在现代Web开发中&#xff0c;用户身份认证和会话管理是至关重要的部分。理解Cookie、Session和Token的区别和应用场景&#xff0c;有助于我们设计出更加安全和高效的Web应用。本文将详细探讨这三者的工作原理、优缺点以及使用场景。 1. Cookie 1.1 什么是Cookie&#xff1f; …...

编程日记 2024/7/21 16:31:59

概率论原理精解【1】

文章目录 测度概述集类笛卡尔积定义例子 多集合的笛卡尔积定义计算方法注意事项 有限笛卡尔积的性质1. 定义2. 性质2.1 基数性质2.2 空集性质2.3 不满足交换律2.4 不满足结合律2.5 对并和交运算满足分配律 3. 示例4. 结论 参考链接 测度 概述 所谓测度&#xff0c;通俗的讲就…...

编程日记 2024/7/21 16:23:49

数据结构（二叉树-1）

文章目录 一、树 1.1 树的概念与结构 1.2 树的相关术语 1.3 树的表示 二、二叉树 2.1 二叉树的概念与结构 2.2特殊的二叉树 满二叉树 完全二叉树 2.3 二叉树的存储结构 三、实现顺序结构二叉树 3.1 堆的概念与结构 3.2 堆的实现 Heap.h Heap.c 默认初始化堆 堆的销毁 堆的插入 …...

编程日记 2024/7/21 16:22:47

巴黎奥运会倒计时 一个非常不错的倒计时提醒

巴黎奥运会还有几天就要开幕了&#xff0c;大家应该到处都可以看到巴黎奥运会的倒计时&#xff0c;不管是电视上&#xff0c;还是网络里&#xff0c;一搜索奥运会&#xff0c;就会看到。倒计时其实是一个我们在生活中很常用的一个方法&#xff0c;用来做事情的提醒&#xff0c;…...

编程日记 2024/7/21 16:21:46

【Python】使用库 -- 详解

库就是别人已经写好了的代码&#xff0c;可以让我们直接拿来用。 一个编程语言能不能流行起来&#xff0c;一方面取决于语法是否简单方便容易学习&#xff0c;一方面取决于生态是否完备。所谓的 “生态” 指的就是语言是否有足够丰富的库&#xff0c;来应对各种各样的场景。在…...

编程日记 2024/7/21 16:20:46

Web3D：WebGL为什么在渲染性能上输给了WebGPU。

WebGL已经成为了web3D的标配&#xff0c;市面上有N多基于webGL的3D引擎&#xff0c;WebGPU作为挑战者&#xff0c;在渲染性能上确实改过webGL一头&#xff0c;由于起步较晚&#xff0c;想通过这个优势加持&#xff0c;赶上并超越webGL仍需时日。 贝格前端工场为大家分享一下这…...

编程日记 2024/7/21 16:18:44

SpringBoot面试高频总结01

1. 什么是SpringBoot&#xff1f; SpringBoot是一个基于Spring框架的快速开发框架&#xff0c;它采用约定大于配置&#xff0c;自动装配的方式&#xff0c;可以快速地创建独立的&#xff0c;生产级别的&#xff0c;基于Spring的应用程序。 相比于传统的Spring框架&#xff0c;S…...

编程日记 2024/7/21 16:15:41

Linux 工作队列（Workqueue）：概念与实现

目录 一、工作队列的概念1.1 什么是工作队列1.2 为什么使用工作队列 二、工作队列的实现2.1 定义和初始化工作队列2.2 工作队列API 三、工作队列的应用3.1 延迟执行任务3.2 处理复杂的中断任务 四、工作队列的类型4.1 普通工作队列4.2 高优先级工作队列 五、总结 在Linux内核中…...

编程日记 2024/7/21 16:13:39

前端页面是如何禁止被查看源码、被下载，被爬取，以及破解方法

文章目录 1.了解禁止查看，爬取原理1.1.JS代码，屏蔽屏蔽键盘和鼠标右键1.2.查看源码时，通过JS控制浏览器窗口变化2.百度文库是如何防止抓包2.1.HTPPS2.2. 动态加载为什么看不到？如何查看动态加载的内容？3.禁止复制，如果解决3.1.禁止复制原理3.2.如何破解1.了解禁止查看，爬…...

编程日记 2024/7/21 16:05:31

51单片机嵌入式开发：14、STC89C52RC 之HX1838红外解码NEC+数码管+串口打印+LED显示

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 STC89C52RC 之HX1838红外解码NEC数码管串口打印LED显示 STC89C52RC 之HX1838红外解码NEC数码管串口打印LED显示1 概述2 硬件电路2.1 遥控器2.2 红外接收器电路2.3 STC89C52单…...

编程日记 2024/7/21 16:04:29

在不同环境中，Java应用程序和MySQL等是如何与Docker进行交互和操作的？

1. 本地开发环境 在本地开发环境中&#xff0c;可以使用Docker Compose来管理和运行Java应用程序容器和MySQL容器。通常&#xff0c;会创建一个docker-compose.yml文件&#xff0c;定义需要的服务及其配置。 以下是一个示例docker-compose.yml文件: version: 3 services:app…...

编程日记 2024/7/21 16:01:18

《DRL》P10-P15-损失函数-优化(梯度下降和误差的反向传播)

文章目录 损失函数交叉熵损失多类别分类任务概述真实标签的独热编码交叉熵损失函数 L p 范式 \mathcal{L}_{p}\text{ 范式} Lp​ 范式均方误差平均绝对误差 优化梯度下降和误差的反向传播 简介 本文介绍了神经网络中的损失函数及其优化方法。损失函数用于衡量模型预测值与真实值…...

编程日记 2024/7/21 15:59:17

Spring Boot项目的404是如何发生的

问题 在日常开发中&#xff0c;假如我们访问一个Sping容器中并不存在的路径&#xff0c;通常会返回404的报错&#xff0c;具体原因是什么呢&#xff1f; 结论 错误的访问会调用两次DispatcherServlet&#xff1a;第一次调用无法找到对应路径时&#xff0c;会给Response设置一个…...

编程日记 2024/7/21 15:58:16

简约大气网站欣赏/如何让新网站被收录

cookie&#xff0c;localStorage&#xff0c;sessionStorage 相同点&#xff1a;cookie&#xff0c;localStorage&#xff0c;sessionStorage都是在客户端保存数据的&#xff0c;存储数据的类型&#xff1a;都是字符串。 不同点&#xff1a; 1、生命周期&#xff1a; 1&…...

编程日记 2025/2/11 9:41:03

哪里有做区块链网站的/seo外链代发

由于专业方向&#xff0c;最近开始学习opencv&#xff0c;打算以《学习opencv》一书为纲&#xff0c;一周学习一章至两章&#xff0c;特此记录。版本信息 ubuntu 14.04 QT 5.7.1 opencv3.1 加载图像并显示 QT中貌似不能在CMakeLists.txt自动添加opencv的链接指令,所以我们手动…...

编程日记 2025/2/11 9:00:51

罗湖草铺附近做网站/百度百度一下官网

1、增加新功能&#xff1a; ①同时支持本书使用的S3C2440和S3C2410开发板 ②支持串口xmodem协议 ③支持网卡芯片CS8900 ④支持NAND Flash 读写 ⑤支持烧写yaffs文件系统映象 2、通过读取GSTATUS1寄存器的值可以区分S3C2410和S3C2440 0x32410000表示S3C2410 0x32410002表示S3C24…...

编程日记 2025/2/11 5:08:25

论坛网站文本抓取怎么做/seo网络排名优化技巧

FusionCharts目前已更新至v3.10.1版本>>点击了解FusionCharts v3.10.1更新详情 Fusioncharts的提示工具就是当鼠标悬停在某个特定的数据点上时显示的信息框&#xff0c;它显示一些有价值的信息&#xff0c;例如&#xff1a; 在单一系列图表中&#xff0c;它显示数据列的名…...

编程日记 2025/2/11 3:53:02

wordpress插件c/网站推广方案有哪些

目录 LVM 逻辑卷管理 LVM 逻辑卷简介 建立 LVM 的步骤 物理卷管理 硬盘分区 建立物理卷 查看物理卷 删除物理卷 卷组管理 建立卷组 查看卷组 增加卷组容量 减小卷组容量 删除卷组 逻辑卷管理 建立逻辑卷 查看逻辑卷 调整逻辑卷大小 删除逻辑卷 LVM 逻辑卷管…...

编程日记 2025/2/11 2:53:44

重庆做网站代运营/外链提交

文章目录数据库添加索引方式1.添加PRIMARY KEY(主键索引)2.添加UNIQUE(唯一索引)3.添加普通索引4.添加全文索引5.添加多列索引数据库添加索引方式 1.添加PRIMARY KEY(主键索引) alter table table_name add primary key(column); 2.添加UNIQUE(唯一索引) alter table table…...

编程日记 2025/2/11 0:07:34