设计模式 — — 单例模式

news2024/11/19 7:49:29

一、是什么

单例模式只会在全局作用域下创建一次实例对象,让所有需要调用的地方都共享这一单例对象

二、实现

// 单例构造函数
function CreateSingleton (name) {
    this.name = name;
    this.getName();
};

// 获取实例的名字
CreateSingleton.prototype.getName = function() {
    console.log(this.name)
};
// 单例对象
const Singleton = (function(){
    var instance;
    return function (name) {
        if(!instance) {
            instance = new CreateSingleton(name);
        }
        return instance;
    }
})();

// 创建实例对象1
const a = new Singleton('a');
// 创建实例对象2
const b = new Singleton('b');

console.log(a===b); // true

三、使用场景

页面存在一个模态框的时候,只有用户点击的时候才会创建,而不是加载完成之后再创建弹窗和隐藏,并且保证弹窗全局只有一个

const getSingle = function( fn ){
  let result;
  return function(){
    return result || ( result = fn .apply(this, arguments ) );
  }
}; 
const createLoginLayer = function(){
  var div = document.createElement( 'div' );
  div.innerHTML = '我是浮窗';
  div.style.display = 'none';
  document.body.appendChild( div );
  return div;
}; 

const createSingleLoginLayer = getSingle( createLoginLayer ); 

document.getElementById( 'loginBtn' ).onclick = function(){
  var loginLayer = createSingleLoginLayer();
  loginLayer.style.display = 'block';
};

Vuex、redux全局态管理库也应用单例模式的思想

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

第三方库都是单例模式,多次引用只会使用同一个对象,如jquery、lodash、moment

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1514646.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

torch.backends.cudnn.benchmark 作用

相关参数 torch.backends.cudnn.enabled torch.backends.cudnn.benchmark torch.backends.cudnn.deterministictorch.backends.cudnn.benchmark True:将会让程序在开始时花费一点额外时间,为整个网络的每个卷积层搜索最适合它的卷积实现算法&#xff0c…

2024最新修复版独立付费进群系统源码全开源

1、修复SQL表 2、修复支付文件 3、修复支付图标不显示 4、修复定位、分销逻辑、抽成逻辑 5、新增支持源支付、易支付的支付接口 6、修复官方微信、支付宝支付接口文件 本来早就可以完工的,被99ai群里的几个傻逼耽搁了,做好自己就行了,这…

腾讯云轻量服务器地域怎么选择?上海/北京/广州哪个合适?

腾讯云轻量应用服务器地域如何选择?地域就近选择,北方选北京地域、南方选广州地域,华东地区选上海地域。广州上海北京地域有什么区别?哪个好?区别就是城市地理位置不同,其他的差不多,不区分好坏…

【Oracle】ORA-00936: 缺失表达式

ORA-00936: 缺失表达式 in 后面 拼接参数无数据会引起 ORA-00936: 缺失表达式。 若from前存在逗号,语法不规范会引起 ORA-00936: 缺失表达式。 数据类型不匹配,若在日期的选择上,要求输入字符串型(varchar2)&#xff0…

为什么 VSCode 不用 Qt 而要用 Electron?

为什么 VSCode 不用 Qt 而要用 Electron? 在开始前我有一些资料,是我根据网友给的问题精心整理了一份「Qt 的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大家!!&am…

SSA-LSTM多输入回归预测 | 樽海鞘优化算法-长短期神经网络 | Matlab

目录 一、程序及算法内容介绍: 基本内容: 亮点与优势: 二、实际运行效果: 三、算法介绍: 四、完整程序下载: 一、程序及算法内容介绍: 基本内容: 本代码基于Matlab平台编译&am…

【C语言】字符串函数上

👑个人主页:啊Q闻 🎇收录专栏:《C语言》 🎉道阻且长,行则将至 前言 这篇博客是字符串函数上篇,主要是关于长度不受限制的字符串函数(strlen,strcpy,strcat,strcm…

React路由结合Material UI的ListItemButton组件完成导航示例

React路由结合Material UI的ListItemButton组件完成导航示例 1、创建菜单列表NavigationList.jsx2、App.js 1、创建菜单列表NavigationList.jsx import React from react; import { ListItemButton, ListItemText, List } from mui/material; import { NavLink as RouterLink …

【GIT】使用Vscode同步git仓库,错误和解决方法记录

这里写目录标题 命令行操作仓库常见命令1 报错“在签出前,请清理存储库工作树。”2 报错“fatal: unable to access https://github.com/...: OpenSSL SSL_read: Connection was reset, errno 10054”3 报错“fatal: bad boolean config value “false” for http.s…

(黑马出品_高级篇_01)SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式

(黑马出品_高级篇_01)SpringCloudRabbitMQDockerRedis搜索分布式 微服务技术——保护 今日目标1.初识Sentinel1.1.雪崩问题及解决方案1.2.服务保护技术对比1.3.Sentinel介绍和安装1.3.1.初识Sentinel1.3.2.安装Sentinel 1.…

Purple Pi OH鸿蒙开发板7天入门OpenHarmony开源鸿蒙教程【六】

今天我们来从OpenHarmony简介、环境搭建、创建第一个OpenHarmony项目等方面开始OpenHarmony应用开发的第一步。 一. OpenHarmony简介 OpenHarmony 是由开放原子开源基金会(OpenAtom Foundation)孵化及运营的开源项目,目标是面向全场景、全连接、全智能…

今天我们来学习一下关于MySQL数据库

目录 前言: 1.MySQL定义: 1.1基础概念: 1.1.1数据库(Database): 1.1.2表(Table): 1.1.3记录(Record)与字段(Field): …

jenkins + gitea 自动化部署Docker项目(vue + .NET Core)

废话不多说,服务先安装好Jenkins 和 gitea 理论上 gitlab 一样的实现流程 Jenkins 配置: 第一步装插件 安装 Generic Event 安装 gitea 相关插件 创建一个任务 设置 git 根据自己git 的认证填写对应的认证方式 构建环境记得勾选这个,会清…

pytorch模型转onnx格式,编写符号函数实现torch算子接口和onnx算子的映射,新建简单算子--模型部署记录整理

对于深度学习模型来说,模型部署指让训练好的模型在特定环境中运行的过程。相比于软件部署,模型部署会面临更多的难题: 运行模型所需的环境难以配置。深度学习模型通常是由一些框架编写,比如 PyTorch、TensorFlow。由于框架规模、依…

rt-thread之sal+lwip的tcp客户端示例记录(接收非阻塞)

示例记录 #include "lwip_test.h" #include "lwip/sockets.h" #include "netdev.h"#define DBG_ENABLE #define DBG_TAG "lwip.tst" #define DBG_LVL DBG_LOG#include <rtdbg.h>#define SERVER_PORT 8080 #define SERVER_HOST …

《ElementPlus 与 ElementUI 差异集合》icon 图标使用(包含:el-button,el-input和el-dropdown 差异对比)

安装 注意 ElementPlus 的 Icon 图标 要额外安装插件 element-plus/icons-vue. npm install element-plus/icons-vue注册 全局注册 定义一个文件 element-icon.js &#xff0c;注意代码第 6 行。加上了前缀 ElIcon &#xff0c;避免组件命名重复&#xff0c;且易于理解为 e…

还是了解下吧,大语言模型调研汇总

大语言模型调研汇总 一. Basic Language ModelT5GPT-3LaMDAJurassic-1MT-NLGGopherChinchillaPaLMU-PaLMOPTLLaMABLOOMGLM-130BERNIE 3.0 Titan 二. Instruction-Finetuned Language ModelT0FLANFlan-LMBLOOMZ & mT0GPT-3.5ChatGPTGPT-4AlpacaChatGLMERNIE BotBard 自从Cha…

如何创建Gitflow图表

如何创建Gitflow图表 drawio是一款强大的图表绘制软件&#xff0c;支持在线云端版本以及windows, macOS, linux安装版。 如果想在线直接使用&#xff0c;则直接输入网址drawon.cn或者使用drawon(桌案), drawon.cn内部完整的集成了drawio的所有功能&#xff0c;并实现了云端存储…

【关注】国内外经典大模型(ChatGPT、LLaMA、Gemini、DALL·E、Midjourney、文心一言、千问等

以ChatGPT、LLaMA、Gemini、DALLE、Midjourney、Stable Diffusion、星火大模型、文心一言、千问为代表AI大语言模型带来了新一波人工智能浪潮&#xff0c;可以面向科研选题、思维导图、数据清洗、统计分析、高级编程、代码调试、算法学习、论文检索、写作、翻译、润色、文献辅助…

Django官网项目 五

Writing your first Django app, part 5 | Django documentation | Django 自动测试介绍 何为自动测试 测试有系统自动完成。你只需要一次性的编写测试代码&#xff0c;当程序代码变更后&#xff0c;不需要对原来的测试人工再重新测试一遍。系统可以自动运行原来编写的测试代…