设计模式 — — 单例模式

一、是什么

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

二、实现

// 单例构造函数
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.hqwc.cn/news/537205.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【高效开发工具系列】Java读取Html

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

Ubuntu 14.04:安装 PaddleOCR 2.3

目录 一、说明 1.1 如何选择版本 1.2 查看 github 中的 PaddleOCR 版本 二、安装 2.1 安装前环境准备 2.2 下载包 2.3 解压 2.4 安装依赖库 异常处理:Read timed out. 2.5 下载推理模型:inference 2.5.1 模型存放位置 2.5.2 模型下载链接 2.5.…

es 聚合操作(一)

前言 Elasticsearch除搜索以外,提供了针对ES 数据进行统计分析的功能。聚合(aggregations)可以让我们极其方便的实现对数据的统计、分析、运算。例如: 衣服品牌的受欢迎程度这些衣服的平均价格、最高价格、最低价格这些衣服的每天、每月销量如何 使用…

Rust 构建开源 Pingora 框架可以与nginx媲美

一、概述 Cloudflare 为何弃用 Nginx,选择使用 Rust 重新构建新的代理 Pingora 框架。Cloudflare 成立于2010年,是一家领先的云服务提供商,专注于内容分发网络(CDN)和分布式域名解析。它提供一系列安全和性能优化服务…

xcode15,个推推送SDK闪退问题处理办法

个推iOS推送SDK最新版本 优化了xcode15部分场景下崩溃问题,以及回执上传问题,近期您的应用有发版计划,建议更新SDK: 1)GTSDK更新到3.0.5.0以及以上版本; 2)GTCommonSDK更新到3.1.0.0及以上版本…

【深度学习目标检测】二十三、基于深度学习的行人检测计数系统-含数据集、GUI和源码(python,yolov8)

行人检测计数系统是一种重要的智能交通监控系统,它能够通过图像处理技术对行人进行实时检测、跟踪和计数,为城市交通规划、人流控制和安全管理提供重要数据支持。本系统基于先进的YOLOv8目标检测算法和PyQt5图形界面框架开发,具有高效、准确、…

Linux 网络套接字编程基础

端口号 我们在上一篇文章中以打电话的例子得出结论:在进行网络通信的时候,不是我们的两台机器在进行通信,本质上是应用层在进行通信。 为什么这么说呢? 网络协议的下三层,解决的是数据安全可靠地发送到远端机器。这…

BUU [FBCTF2019]RCEService

BUU [FBCTF2019]RCEService 开题&#xff0c;要求以json格式输入命令。 无任何信息泄露&#xff0c;源码如下&#xff1a; <?phpputenv(PATH/home/rceservice/jail);if (isset($_REQUEST[cmd])) {$json $_REQUEST[cmd];if (!is_string($json)) {echo Hacking attempt de…

开源导出html表格项目-easyHtml

开源导出html表格项目-easyHtml 背景介绍 背景 项目的由来&#xff0c;在面试的过程中&#xff0c;发现这个需求&#xff08;导出html表格&#xff09;比较常见&#xff0c;同时也引起我的兴趣&#xff0c;所以就有了开源项目easyHtml第一个版本 介绍 功能 支持自定义表格标…

win11 ubuntu子系统 开代理 调试 openai 接口

我的是laravel项目&#xff0c;步骤如下 步骤1&#xff1a;配置WSL以使用代理 首先&#xff0c;确保WSL中的所有请求都通过你的代理服务器。你可以通过在WSL的shell配置文件&#xff08;如~/.bashrc或~/.zshrc&#xff09;中设置环境变量来实现。打开终端&#xff0c;编辑对应…

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

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

使用Thymeleaf-没有js的html模板导出为pdf

html模板 <!DOCTYPE html> <html xmlns:th"http://www.thymeleaf.org"><head><title>PDF Template</title> </head> <body> <h1>User Information</h1> <p>Name: <span th:text"${user.name}&…