当前位置: 首页 > 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 默认初始化堆 堆的销毁 堆的插入 …...

造相-Z-Image-Turbo 在计算机网络教学中的应用:可视化展示协议交互角色

造相-Z-Image-Turbo&#xff1a;让计算机网络协议“活”起来的教学新助手 每次讲到TCP三次握手、HTTP请求响应这些概念&#xff0c;看着台下学生迷茫的眼神&#xff0c;你是不是也感到头疼&#xff1f;协议栈、数据包、端口号&#xff0c;这些抽象的名词和冰冷的箭头图&#x…...

Baseweb表单文件上传组件:从基础到拖拽上传的完整指南

Baseweb表单文件上传组件&#xff1a;从基础到拖拽上传的完整指南 【免费下载链接】baseweb A React Component library implementing the Base design language 项目地址: https://gitcode.com/gh_mirrors/ba/baseweb Baseweb是一个基于React的企业级UI组件库&#xff…...

如何扩展 mongo-express:自定义功能开发终极指南 [特殊字符]

如何扩展 mongo-express&#xff1a;自定义功能开发终极指南 &#x1f680; 【免费下载链接】mongo-express 项目地址: https://gitcode.com/gh_mirrors/mon/mongo-express mongo-express 是一个强大的基于 Web 的 MongoDB 管理界面&#xff0c;为开发者和数据库管理员…...

零服务器生产环境监控与日志管理终极指南:保障Web应用稳定运行的10个关键策略

零服务器生产环境监控与日志管理终极指南&#xff1a;保障Web应用稳定运行的10个关键策略 【免费下载链接】zero Zero is a web server to simplify web development. 项目地址: https://gitcode.com/gh_mirrors/ze/zero Zero Server是一款革命性的Web服务器&#xff0c…...

本科生必看!全学科适配AI论文神器——千笔·专业降AI率智能体

论文写作&#xff0c;是每个本科生绕不开的挑战。选题难、框架乱、查重高、格式错……这些问题是否让你焦头烂额&#xff1f;别再独自挣扎&#xff0c;千笔AI——全学科适配的智能论文助手&#xff0c;正在为无数学生带来高效、专业的写作体验。千笔AI(官网直达入口) &#xff…...

如何用Python脚本轻松抢到热门演唱会门票?大麦网自动抢票终极指南

如何用Python脚本轻松抢到热门演唱会门票&#xff1f;大麦网自动抢票终极指南 【免费下载链接】Automatic_ticket_purchase 大麦网抢票脚本 项目地址: https://gitcode.com/GitHub_Trending/au/Automatic_ticket_purchase 你是否曾经为抢不到心仪演唱会门票而烦恼&#…...

Chatbot网页版性能优化实战:从架构设计到并发处理

1. 性能瓶颈&#xff1a;当用户激增时&#xff0c;Chatbot网页版发生了什么&#xff1f; 想象一下&#xff0c;一个原本运行平稳的Chatbot网页版&#xff0c;在营销活动或流量高峰期间&#xff0c;用户量从数百激增至数万。此时&#xff0c;系统往往会表现出以下典型症状&…...

C++模板编程:从函数到类的实现原理

1. C模板编程深度解析&#xff1a;从函数模板到类模板的实现原理1.1 模板编程的必要性在C开发中&#xff0c;经常会遇到需要处理不同数据类型但逻辑相同的场景。以二维坐标点类为例&#xff0c;传统实现方式需要为每种数据类型创建独立的类&#xff1a;// 浮点型坐标点类 class…...

推挽电路与图腾柱结构技术解析与应用

图腾柱与互补推挽电路的技术解析1. 推挽电路基础概念1.1 推挽电路基本原理推挽电路(Push-Pull)是一种功率放大电路结构&#xff0c;其核心设计思想是通过两个互补工作的晶体管交替导通&#xff0c;实现对输入信号的功率放大。典型推挽电路具有以下两个关键特性&#xff1a;强大…...

3D Slicer隐藏技巧:这样玩转医学影像分割与3D建模(含DICOM处理)

3D Slicer隐藏技巧&#xff1a;这样玩转医学影像分割与3D建模&#xff08;含DICOM处理&#xff09; 在医学影像分析和三维建模领域&#xff0c;3D Slicer作为一款开源工具已经赢得了专业用户的广泛认可。但对于那些已经掌握基础操作的用户来说&#xff0c;如何真正发挥这款软件…...