【js进阶】设计模式之单例模式的几种声明方式

单例模式,简言之就是一个类无论实例化多少次,最终都是同一个对象

原生js的几个辅助方式的实现

  • 手写forEch,map,filter
Array.prototype.MyForEach = function (callback) {for (let i = 0; i < this.length; i++) {callback(this[i], i, this);}
};const arr = [1, 2, 3];
arr.MyForEach((item, index, arr) => {console.log(item);console.log(index);console.log(arr);
});Array.prototype.MyFilter = function (callback) {const result = [];for (let i = 0; i < this.length; i++) {if (callback(this[i], i, this)) {result.push(this[i]);}}return result;
};const arr2 = [1, 2, 3, 5, 6, 7];
console.log(arr2.MyFilter((item) => item > 3));
console.log(arr2.MyFilter((item) => item < 5));Array.prototype.MyMap = function (callback) {const result = [];for (let i = 0; i < this.length; i++) {result.push(callback(this[i], i, this));}return result;
};console.log(arr2.MyMap((item) => item * 2));

在这里插入图片描述

基础单例模式

// 单体模式,
var SingleTon = {a1: true,a2: 10,method1() {console.log('单体模式1');},method2() {console.log('单体模式2');},
};SingleTon.a1 = false;
let total = SingleTon.a2 + 5;
let result = SingleTon.method1();// 全局命名空间
let GiantCorp = {};
GiantCorp.Common = {};
GiantCorp.ErrorCodes = {};
GiantCorp.PahgeHandler = {};// 私有成员,一是相互约定用下划线标注
GiantCorp.DataParse = {// 私有属性_name: '张三',// 私有方法_getName() {return this._name;},// 公有方法getUsername(nickname) {return this._getName() + nickname;},
};

改进版单例

let MyNamespace = {};
// 使用闭包封装私有变量
MyNamespace.SingleTon = (function () {let arr = ['张三', '李四', '王五'];return {name: '续航',age: 18,getName() {return this.name;},getAge() {return this.age;},getAllUserName() {return arr.join(',');},};
})();console.log(MyNamespace.SingleTon.getName());
console.log(MyNamespace.SingleTon.getAge());
console.log(MyNamespace.SingleTon.getAllUserName());

高阶版单例

// 惰性单体
let MyNamespace = {};
// 使用闭包封装私有变量
MyNamespace.SingleTon = (function () {let singleTon = null;function constructor() {let arr = ['张三', '李四', '王五'];return {name: '续航',age: 18,getName() {return this.name;},getAge() {return this.age;},getAllUserName() {return arr.join(',');},};}return {getInstance() {if (!singleTon) {singleTon = constructor(); // 创建实例对象,并将其赋值给私有变量}return singleTon; // 返回实例对象(单例模式)},};
})();
console.log(MyNamespace.SingleTon.getInstance().getName());
console.log(MyNamespace.SingleTon.getInstance().getAllUserName());

案例

let simpleXhrFactory = (function () {let standard = {createXHRObject() {return new XMLHttpRequest();},};let activexOld = {createXHRObject() {return new ActiveXObject('Microsoft.XMLHTTP');},};let activeXNew = {createXHRObject() {return new ActiveXObject('MSXML2.XMLHTTP');},};let xhr = null;try {xhr = standard.createXHRObject();return xhr;} catch (e) {try {xhr = activeXNew.createXHRObject();return xhr;} catch (e) {try {xhr = activeXOld.createXHRObject();} catch (error) {throw new Error('不支持的浏览器');}}}return xhr;
})();

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

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

相关文章

专题 - STM32

基础 基础知识 STM所有产品线&#xff08;列举型号&#xff09;&#xff1a; STM产品的3内核架构&#xff08;列举ARM芯片架构&#xff09;&#xff1a; STM32的3开发方式&#xff1a; STM32的5开发工具和套件&#xff1a; 若要在电脑上直接硬件级调试STM32设备&#xff0c;则…

-bash: /java: cannot execute binary file

在linux安装jdk报错 -bash: /java: cannot execute binary file 原因是jdk安装包和linux的不一致 程序员的面试宝典&#xff0c;一个免费的刷题平台

【MySQL】使用C语言链接

&#x1f308; 个人主页&#xff1a;Zfox_ &#x1f525; 系列专栏&#xff1a;MySQL 目录 一&#xff1a;&#x1f525; MySQL connect &#x1f98b; Connector / C 使用&#x1f98b; mysql 接口介绍&#x1f98b; 完整代码样例 二&#xff1a;&#x1f525; 共勉 一&#…

平滑算法 效果比较

目录 高斯平滑 效果对比 移动平均效果比较: 高斯平滑 效果对比 右边两个参数是1.5 2 代码: smooth_demo.py import numpy as np import cv2 from scipy.ndimage import gaussian_filter1ddef gaussian_smooth_array(arr, sigma):smoothed_arr = gaussian_filter1d(arr, s…

通过ssh连接debian

使用方法 ssh usernameipaddress [inputpasswd]root用户默认无法由ssh连接&#xff0c; 可以通过修改配置 sudo vim /etc/ssh/sshd_config去掉PermitRootLogin前的‘#’,并修改为 PermitRootLogin yes 重启sshd服务 sudo systemctl restart sshd参考 https://linuxconfig.or…

Outlook 无网络连接[2604] 错误解决办法

Outlook 是微软公司开发的一款广泛使用的电子邮件客户端&#xff0c;广泛应用于个人用户和企业办公环境中。然而&#xff0c;许多用户在使用 Outlook 时可能会遇到“无网络连接”或者“错误代码 [2604]”等问题。这个错误通常会导致 Outlook 无法正常连接到邮件服务器&#xff…

.NET 9.0 的 Blazor Web App 项目中 Hash 变换(MD5、Pbkdf2) 使用备忘

一、生成 string 对应的 MD5 码 /// <summary>/// 生成 string 对应的 MD5 码/// </summary>/// <param name"str">需要转换的字符串 string&#xff1a;用于登录认证时&#xff0c;str username 线下传递的key DateTime.Now.Ticks.ToString() …

“UniApp的音频播放——点击视频进入空白+解决视频播放器切换视频时一直加载的问题”——video.js、video-js.css

今天&#xff0c;又解决了一个单子“UniApp的音频播放——点击视频进入空白解决视频播放器切换视频时一直加载的问题” 一、问题描述 在开发一个基于 video.js 的视频播放器时&#xff0c;用户通过上下滑动切换视频时&#xff0c;视频一直处于加载状态&#xff0c;无法正常播放…

P3数据结构、数据类型、数字编码、字符编码:保姆级图文详解

文章目录 前言1、数据结构分类1.1、逻辑结构&#xff1a;线性与非线性1.2、物理结构&#xff1a;连续与分散1.3、数据结构的实现方式1.4、数据结构的选择依据 2、基本数据类型2.1、定义与分类2.2、存储形式 3、数字编码3.1、原码、反码与补码3.2、浮点数编码3.3、整数与浮点数区…

【JavaScript】基础内容,HTML如何引用JavaScript, JS 常用的数据类型

HTML 嵌入 Javascript 的方式 引入外部 js 文件 <head> <script Language "javaScript" src"index.js"/> </head>内部声明 <head> <script language"javascript">function hello(){alert("hello word&qu…

解密AIGC三大核心算法:GAN、Transformer、Diffusion Models原理与应用

在当今数字化时代&#xff0c;人工智能生成内容&#xff08;AIGC&#xff09;技术正以前所未有的速度改变着我们的生活和工作方式。从创意无限的文本生成&#xff0c;到栩栩如生的图像创作&#xff0c;再到动听的音乐旋律&#xff0c;AIGC的魔力无处不在。而这一切的背后&#…

Web前端------HTML表格

一.表格标签介绍 表格&#xff0c;类似操作的软件excel一样&#xff0c;通过规范的行列方式展示数据的一种视图&#xff01; 网页中&#xff08;初级开发&#xff09;&#xff0c;对于这种规范的数据&#xff0c;使用表格标签最方便的&#xff1b; 实际开发&#xff08;高级开…

关于AWS网络架构的思考

目录&#xff1a; AWS概述 EMR Serverless AWS VPC及其网络 关于AWS网络架构的思考 在AWS K8S中部署的业务&#xff0c;有不同的流量路径。 流量进入 客户端请求 普通的客户端流量流向从前到后是: 客户端公司网关(endpoint)业务的Endpoint ServiceLoad Balancers(监听80和…

玩转随机数:用 JavaScript 掌控不可预测的魔力!

玩转随机数&#xff1a;用 JavaScript 掌控不可预测的魔力&#xff01; 当计算机遇上“随机”&#xff0c;我们能做什么&#xff1f; 你曾想过在生活中拥有“超能力”吗&#xff1f;比如&#xff0c;可以预测下一个天气变化&#xff0c;或是猜中下一个彩票号码&#xff1f;虽…

ThreeJs功能演示——几何体操作导入导出

1、内部创建几何体导出编辑能力 1&#xff09;支持内部创建的面、正方体、球体 内部创建物体时&#xff0c;如果是三维物体&#xff0c;要创建集合形状geometry&#xff0c;和对应的材质material。再一起创建一个三维物体。 // 存储创建的几何体列表const geometries [];cre…

nginx 配置域名前缀访问 react 项目

说明一下&#xff1a;我是使用域名转发访问的&#xff0c;访问流程如下&#xff1a; 浏览器 》 服务器1 》 服务器2 由于服务器1已经为 https 的访问方式做了 ssl 证书等相关配置&#xff0c;然后转发到服务器2&#xff0c; 所以在服务器2中不需要再配置 ssl 证书相关的东西了&…

thinkphp8.0 likeadmin 框架添加API 文档自动生成工具 apidoc支持

Apidoc 是一个便捷的 API 文档自动生成工具&#xff0c;它能帮助开发者快速生成和管理 API 文档。以下是 Apidoc 的主要特点和功能&#xff1a; 主要特点 开箱即用 安装后&#xff0c;无需繁杂配置&#xff0c;直接按照文档编写注释&#xff0c;即可自动生成 API 文档。 轻松编…

leetcode 面试经典 150 题:快乐数

链接快乐数题序号202题型数组解题方法哈希表难度简单熟练度✅✅✅✅ 题目 编写一个算法来判断一个数 n 是不是快乐数。 [快乐数] 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。 然后重复这个过程直到这个数变为 1&#xff0…

每天一篇逻辑漏洞

前言&#xff1a; 不赶进度了&#xff0c;学习并运用吧 内容&#xff1a; 该文章有bili赞助发布摆烂哥如何从0开始到年入20w 到多家SRC TOP10白帽的心路历程分享_哔哩哔哩_bilibili 逻辑漏洞 验证码回显 //一般站没有&#xff0c;边缘资产有 用户名枚举 …

Ruby语言的数据结构

Ruby语言的数据结构详解 Ruby是一种动态、面向对象的编程语言&#xff0c;因其简洁优雅的语法而受到开发者的喜爱。在Ruby中&#xff0c;数据结构是构建和管理数据的一种方式&#xff0c;不同的数据结构适用于不同的场景。本文将详细探讨Ruby中的几种主要数据结构&#xff0c;…