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

JavaScript 中的单例模式

单例模式在 JavaScript 中是一种确保类只有一个实例,并提供全局访问点的方式。由于 JavaScript 的语言特性(如对象字面量、模块系统等),实现单例有多种方式。

常见实现方式

1. 对象字面量(最简单的单例)

const singleton = {property: "value",method: function() {console.log("I am a method");}
};// 使用
singleton.method();

特点

  • 对象字面量本身就是单例

  • 无法延迟初始化

  • 不能私有化成员

2. 闭包实现(带私有成员)

const Singleton = (function() {// 私有变量let instance;function init() {// 私有方法和属性const privateVar = "I am private";const privateRandom = Math.random();return {// 公共方法publicMethod: function() {console.log("Public can see me");},// 公共属性publicProperty: "I am public",// 访问私有变量的方法getPrivateVar: function() {return privateVar;},getRandomNumber: function() {return privateRandom;}};}return {getInstance: function() {if (!instance) {instance = init();}return instance;}};
})();// 使用
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();console.log(instance1 === instance2); // true
console.log(instance1.getRandomNumber() === instance2.getRandomNumber()); // true

特点

  • 真正的单例实现

  • 可以包含私有成员

  • 延迟初始化

  • 线程安全(JS是单线程)

3. ES6 Class 实现

class Singleton {constructor() {if (!Singleton.instance) {this._data = [];Singleton.instance = this;}return Singleton.instance;}add(item) {this._data.push(item);}get(id) {return this._data.find(item => item.id === id);}
}// 使用
const instance1 = new Singleton();
const instance2 = new Singleton();instance1.add({ id: 1, name: "test" });
console.log(instance2.get(1)); // { id: 1, name: "test" }
console.log(instance1 === instance2); // true

4. 模块模式(现代JS常用方式)

// singleton.js
let instance = null;
let data = []; // 私有变量export default class Singleton {constructor() {if (!instance) {instance = this;}return instance;}add(item) {data.push(item);}get(id) {return data.find(item => item.id === id);}getAll() {return [...data];}
}// 使用
import Singleton from './singleton.js';const instance1 = new Singleton();
const instance2 = new Singleton();instance1.add({ id: 1, name: "Item 1" });
console.log(instance2.getAll()); // [{ id: 1, name: "Item 1" }]

实际应用场景

  1. 全局状态管理

    // 类似Redux的store就是单例
    const store = {state: { count: 0 },increment() {this.state.count++;}
    };
  2. 对话框/模态框管理

    const Modal = (function() {let instance;function createModal() {const modal = document.createElement('div');// 初始化模态框...return {open: () => modal.style.display = 'block',close: () => modal.style.display = 'none'};}return {getInstance: function() {if (!instance) {instance = createModal();}return instance;}};
    })();
  3. 缓存系统

    const Cache = {data: {},set(key, value) {this.data[key] = value;},get(key) {return this.data[key];},clear() {this.data = {};}
    };

注意事项

  1. 模块系统本身就是单例:在现代JavaScript中,ES6模块默认就是单例

    // logger.js
    export default {log(message) {console.log(message);}
    }// 无论多少次import,得到的都是同一个对象
  2. 测试困难:单例可能导致测试困难,因为状态是共享的

  3. 全局污染:过度使用单例可能导致命名冲突和难以追踪的依赖关系

  4. Node.js中的单例:在Node.js中,模块缓存确保require多次返回同一个实例

JavaScript中的单例模式相比传统面向对象语言更灵活,可以根据具体需求选择适合的实现方式。

相关文章:

JavaScript 中的单例模式

单例模式在 JavaScript 中是一种确保类只有一个实例,并提供全局访问点的方式。由于 JavaScript 的语言特性(如对象字面量、模块系统等),实现单例有多种方式。 常见实现方式 1. 对象字面量(最简单的单例) …...

深度学习基石:神经网络核心知识全解析(一)

神经网络核心知识全解析 一、神经网络概述 神经网络作为机器学习领域的关键算法,在现代生活中发挥着重要作用,广泛应用于图像识别、语音处理、智能推荐等诸多领域,深刻影响着人们的日常生活。它通过模拟人类大脑神经系统的结构和功能&#…...

java的反编译命令

1. javap -c: 显示方法中的字节码 2. javap -p: 显示所有访问级别,包括private 3. Javap -v: verbose模式,全信息,输出的内容包括: 类的访问标志(access_flags) 类名、父类、接口 …...

影刀填写输入框(web) 时出错: Can not convert Array to String

环境: 影刀5.26.24 Win10专业版 问题描述: [错误来源]行12: 填写输入框(web) 执行 填写输入框(web) 时出错: Can not convert Array to String. 解决方案: 1. 检查变量内容 在填写输入框之前,打印BT和NR变量的值&#xff…...

词语关系图谱模型

参数配置说明 sentences, # 分词后的语料(列表嵌套列表) vector_size100, # 每个词的向量维度 window5, # 词与上下文之间的最大距离(滑动窗口大小) min_count5, # 忽略出现次数小于5的…...

《C++ 模板:泛型编程的核心》

C模板详解 模板是C中实现泛型编程的重要特性&#xff0c;它允许你编写与数据类型无关的代码。模板可以分为函数模板和类模板两种。 1. 函数模板 函数模板允许你定义一个可以处理多种数据类型的函数。 基本语法 template <typename T> T functionName(T parameter1, T…...

HTTP的请求消息Request和响应消息Response

一&#xff1a;介绍 &#xff08;1&#xff09;定义 service方法里的两个参数 &#xff08;2)过程 Request:获取请求数据 浏览器发送http请求数据&#xff08;字符串&#xff09;&#xff0c;字符串被tomcat解析&#xff0c;解析后tomcat会将请求数据放入request对象 Response:…...

解决Python与Java交互乱码问题:从编码角度优化数据流

在现代软件开发中&#xff0c;跨语言系统的集成已经成为日常工作的一部分。特别是当Python和Java之间进行交互时&#xff0c;编码问题往往会成为导致数据传输错误、乱码以及难以调试的主要原因之一。 你是否曾遇到过这种情境&#xff1a;Python脚本通过标准输出返回了正确的数…...

DES、3DES、SM4 加密算法简介

1. DES&#xff08;Data Encryption Standard&#xff09; 设计时间&#xff1a;1975 年&#xff08;IBM 开发&#xff0c;1977 年被 NIST 采纳为美国联邦标准&#xff09;。 密钥长度&#xff1a;64 位&#xff08;实际有效 56 位 8 位校验&#xff09;。 分组长度&#xf…...

C++异步操作 - future async package_task promise

异步 异步编程是一种程序设计范式&#xff0c;​​允许任务在等待耗时操作&#xff08;如I/O、网络请求&#xff09;时暂停执行&#xff0c;转而处理其他任务&#xff0c;待操作完成后自动恢复​​。其核心目标是​​避免阻塞主线程​​&#xff0c;提升程序的并发性和响应速度…...

Feign 深度解析:Java 声明式 HTTP 客户端的终极指南

Feign 深度解析&#xff1a;Java 声明式 HTTP 客户端的终极指南 Feign 是由 Netflix 开源的 ​声明式 HTTP 客户端&#xff0c;后成为 Spring Cloud 生态的核心组件&#xff08;现由 OpenFeign 维护&#xff09;。它通过注解和接口定义简化了服务间 RESTful 通信&#xff0c;并…...

08前端项目----升序/降序

升序/降序 vue实现升序/降序服务器处理 vue实现升序/降序 用vue实现升序/降序&#xff0c;以及css绘制三角形 <div class"sui-navbar"><div class"navbar-inner filter"><ul class"sui-nav"><li class"active"&g…...

用Java实现简易区块链:从零开始的探索

&#x1f4e2; 友情提示&#xff1a; 本文由银河易创AI&#xff08;https://ai.eaigx.com&#xff09;平台gpt-4o-mini模型辅助创作完成&#xff0c;旨在提供灵感参考与技术分享&#xff0c;文中关键数据、代码与结论建议通过官方渠道验证。 区块链技术作为近年来的热门话题&am…...

JavaScript 渲染内容爬取实践:Puppeteer 进阶技巧

进一步探讨如何使用 Puppeteer 进行动态网页爬取&#xff0c;特别是如何等待页面元素加载完成、处理无限滚动加载、单页应用的路由变化以及监听接口等常见场景。 一、等待页面元素加载完成 在爬取动态网页时&#xff0c;确保页面元素完全加载是获取完整数据的关键。Puppeteer…...

数据结构——栈以及相应的操作

栈(Stack) 在维基百科中是这样定义的&#xff1a; 堆栈(stack) 又称为栈或堆叠&#xff0c;是计算机科学中的一种抽象资料类型&#xff0c;只允许在有序的线性资料集合中的一端&#xff08;称为堆栈顶端&#xff0c;top&#xff09;进行加入数据&#xff08;push&#xff09;和…...

SVG 与 VSCode:高效设计与开发的完美结合

SVG 与 VSCode:高效设计与开发的完美结合 引言 随着互联网技术的飞速发展,网页设计已经成为了一个重要的领域。SVG(可缩放矢量图形)作为一种矢量图形格式,因其独特的优势,在网页设计中得到了广泛应用。而VSCode(Visual Studio Code)作为一款功能强大的代码编辑器,同…...

如何应对政策变化导致的项目风险

应对政策变化导致的项目风险&#xff0c;核心在于&#xff1a;加强政策研判机制、建立动态应对流程、构建合规应急预案、强化跨部门联动、提升项目柔性与调整能力。其中&#xff0c;加强政策研判机制 是所有防范工作中的“前哨哨兵”&#xff0c;可以让项目团队在政策风向转变之…...

ASP.Net Web Api如何更改URL

1.找到appsettings.json 修改如下&#xff1a; 主要为urls的修改填本机私有地址即可 {"Logging": {"LogLevel": {"Default": "Information","Microsoft.AspNetCore": "Warning"}},"AllowedHosts": &q…...

在 Vue 3 中将拆分后的数组合并回原数组

接上文Vue 3 中按照某个字段将数组分成多个数组_vue3怎么进行数组对象--分割对象-CSDN博客 方法一&#xff1a;使用 flat() 方法 // 假设这是拆分后的多维数组 const splitArrays [[{id: 1, category: A}, {id: 3, category: A}],[{id: 2, category: B}, {id: 5, category: …...

【HTTPS协议原理】数据加密、如何防止中间人攻击、证书和签名、HTTPS完整工作流程

⭐️个人主页&#xff1a;小羊 ⭐️所属专栏&#xff1a;Linux网络 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 数据加密常见的加密方式数据摘要方案一&#xff1a;仅使用对称加密方案二&#xff1a;仅使用非对称加密方案三&#xff1a;双…...

Java中链表的深入了解及实现

一、链表 1.链表的概念 1.1链表是⼀种物理存储结构上⾮连续存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的引⽤链接次序实现的 实际中链表的结构⾮常多样&#xff0c;以下情况组合起来就有8种链表结构&#xff1a; 2.链表的实现 1.⽆头单向⾮循环链表实现 链表中的…...

【武汉理工大学第四届ACM校赛】copy

copy 题目描述代码代码解释&#xff1a; 链接&#xff1a;https://ac.nowcoder.com/acm/contest/108683/E 题目描述 小s苦于在不同的窗口之间复制粘贴&#xff0c; 于是他突发奇想&#xff0c;把所有要复制的内容都复制到了一个剪贴板中&#xff0c;但他突然发现由于他复制的…...

植物大战僵尸杂交版v3.6最新版本(附下载链接)

B站游戏作者潜艇伟伟迷于4月19日更新了植物大战僵尸杂交版3.6版本&#xff01;&#xff01;&#xff01;&#xff0c;有b站账户的记得要给作者三连关注一下呀&#xff01; 不多废话下载链接放上&#xff1a; 夸克网盘链接&#xff1a;&#xff1a;https://pan.quark.cn/s/1af9b…...

【Ansible】批量管理 Windows自动化运维

一&#xff0c;前期准备 1&#xff0c;控制端&#xff08;Linux&#xff09;的要求 Ansible可以在安装了Python 2&#xff08;2.7版&#xff09;或Python 3&#xff08;3.5及更高版本&#xff09;的任何机器上运行。控制端计算机不支持Windows。 2&#xff0c;客户端&#x…...

【源码】【Java并发】【ThreadLocal】适合中学者体质的ThreadLocal源码阅读

&#x1f44b;hi&#xff0c;我不是一名外包公司的员工&#xff0c;也不会偷吃茶水间的零食&#xff0c;我的梦想是能写高端CRUD &#x1f525; 2025本人正在沉淀中… 博客更新速度 &#x1f44d; 欢迎点赞、收藏、关注&#xff0c;跟上我的更新节奏 &#x1f4da;欢迎订阅专栏…...

背包问题模板

文章目录 01背包题意思路代码优化 完全背包题意思路代码优化 多重背包题意思路代码优化 分组背包题意思路代码 01背包 特点&#xff1a;每件物品最多只能用一次 01背包问题 题意 给出每件物品的体积v,价值w,求解能装入背包的的物品的最大价值&#xff0c;并且每件物品只能选一…...

Redis 处理读请求

在前文“Redis 接收连接”中&#xff0c;Redis 将接收的客户端连接加入了 epoll 中监听&#xff0c;同时还设置了读事件处理器 connSocketEventHandler。 假设现在客户端向 Redis 发来一条 set key value 命令。 事件循环 aeProcessEvents 在事件循环 aeProcessEvents 中会调…...

Sentinel源码—8.限流算法和设计模式总结二

大纲 1.关于限流的概述 2.高并发下的四大限流算法原理及实现 3.Sentinel使用的设计模式总结 3.Sentinel使用的设计模式总结 (1)责任链模式 (2)监听器模式 (3)适配器模式 (4)模版方法模式 (5)策略模式 (6)观察者模式 (1)责任链模式 一.责任链接口ProcessorSlot 二.责…...

VulnHub-DarkHole_1靶机渗透教程

VulnHub-DarkHole_1靶机渗透教程 1.靶机部署 [Onepanda] Mik1ysomething 靶机下载&#xff1a;https://download.vulnhub.com/darkhole/DarkHole.zip 直接使用VMware打开就行 导入成功&#xff0c;打开虚拟机&#xff0c;到此虚拟机部署完成&#xff01; 注意&#xff1a…...

Keil MDK‑5 中使用 GNU ARM GCC 的 -Wno-* 选项屏蔽编译警告

在项目编译过程中&#xff0c;我们常常会遇到许多警告提示&#xff1b;而在有些情况下&#xff0c;当我们已经了解这些警告的原因时&#xff0c;可以选择忽略它们&#xff0c;从而减少干扰&#xff0c;集中精力修复其他更重要的问题。 一、添加屏蔽警告的编译选项 &#xff08…...