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

JS设计模式(一)单例模式

注释很详细,直接上代码

本文建立在已有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;通过单例模式可以在整个应用程序中访问同一个…...

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

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

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

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

自动驾驶-预测概览

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

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

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

什么是决策树?

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

ASP 快速参考

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

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

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

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

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

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

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

9.11和9.9哪个大?

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

学懂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语…...

科研绘图系列:R语言雨云图(Raincloud plot)

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

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

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

js | this 指向问题

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

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

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

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…...

理解Cookie、Session和Token

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

概率论原理精解【1】

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

数据结构(二叉树-1)

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

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

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

【Python】使用库 -- 详解

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

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

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

SpringBoot面试高频总结01

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

Linux 工作队列(Workqueue):概念与实现

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

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

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

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单…...

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

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

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

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

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

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

织梦手机网站免费模板/东莞网络营销推广专业

这种大整数类型编译器的gcc是不支持的&#xff0c;比如在codeblocks 16.01/Dev C是无法编译的&#xff0c;但是提交到大部分OJ上是可以编译且能用的。C/C标准。IO是不认识__int128这种数据类型的&#xff0c;自己实现输入和输出&#xff0c;其他的运算&#xff0c;与int没有什么…...

wordpress 更换模板/鹤壁搜索引擎优化

1.java.lang.Object类的说明: 1.Object类是所Java类的根父类 2.如果在类的声明中未使用extends关键字指明其父类,则默认父类为java.lang.Object类 3.Object类中的功能(属性、方法)就具通用性。 属性:无 方法:equals() / toString() / getClass() /hashCode() / clone() …...

网站备案繁琐工作/搜索引擎网页

MySQL Cluster 是一种技术&#xff0c;该技术允许在无共享的系统中部署“内存中”数据库的 Cluster 。通过无共享体系结构&#xff0c;系统能够使用廉价的硬件&#xff0c;而且对软硬件无特殊要求。此外&#xff0c;由于每个组件有自己的内存和磁盘&#xff0c;不存在单点故障。…...

网站空间与服务器的区别/实体店怎么引流推广

流量控制 流量限制 (rate-limiting)&#xff0c;它可以用来限制客户端在指定时间内 HTTP 请求的数量。请求可以是GET 请求&#xff0c;也可以是登录表单的 POST 请求。流量限制可以用作安全目的&#xff0c;如减慢暴力密码破解速率等。通过将传入请求的速率限制为真实用户的典型…...

wordpress一键分享代码/百度指数属于行业趋势及人群

string.Format("{0:0##.#0},14")"014.00"转载于:https://www.cnblogs.com/craig/archive/2010/04/14/1712002.html...

做情诗网站/快速开发平台

用法一&#xff1a; 在开发应用程序的时候&#xff0c;经常会遇到这样的情况&#xff0c;会在运行时动态根据条件来决定显示哪个View或某个布局。那么最通常的想法就是把可能用到的View都写在上面&#xff0c;先把它们的可见性都设为View.GONE&#xff0c;然后在代码中动态的更…...