JavaScript单例模式与开发实践(二)
admin
2024-05-09 16:32:24
0

前言

作为一个前端切图仔,少有和各类设计模式打交道。但这不影响我们学习设计模式的思维,来提升我们的代码水平。

本章通过讲解单例模式,希望能够让你对设计模式更一步的学习。

本章学习内容👇

  • 完成一个透明的单例模式
  • 用代理的方式实现单例模式

透明的单例模式

何为透明的单例模式?

单例类能够不依赖于类以外的(例如:上文讲到的全局变量)实现,并像一个普通的类一样使用。

不能用全局变量了,那我们用什么呢?

我们可以通过局部变量,闭包的形式来使得SingleCase类具有一个保存实例的地址👇

let SingleCase = (function(){let obj = nulllet SingleCase = function (name){if (obj){obj.name = namereturn obj}else{this.name = nameobj = this}}return SingleCase
​
})()
let a = new SingleCase(1)
console.log(a)
let b = new SingleCase(2)
console.log(a)
console.log(b)
console.log(a == b)

控制台输出👇

SingleCase { name: 1 }
SingleCase { name: 2 }
SingleCase { name: 2 }
true

我们通过使用自执行的匿名函数和闭包,让这个匿名函数返回新的SingleCase方法,达到了需求,但显然代码不够美观。

SingleCase的构造函数中👇:

let SingleCase = function (name){if (obj){obj.name = namereturn obj}else{this.name = nameobj = this}}

做了俩件事情

  1. 保证只有一个实例对象
  2. 创建/修改实例对象

这不符合单一职责原则:指一个类或者模块应该有且只有一个改变的原因。

假设某一天我们要修改这个类,让他衍生出俩个不同的单例类或者产生更多的实例时,这样的代码都不易修改。于是我们改写SingleCase的构造函数,去除掉控制创建唯一对象的那一段。

代理实现单例模式

我们通过代理的方式将控制创建唯一对象的功能交给代理对象👇

let SingleCase = function (name){this.name = name
}
let ProxySingleCase = (function(){let obj = nullreturn function (name){if (!obj){obj = new SingleCase(name)}return obj}
​
})()
let a = new ProxySingleCase(1)
let b = new ProxySingleCase(2)
console.log(a == b)

控制台输出👇

true
ProxySingleCaseObject objSingleCaseString namequote obj

我们通过使用代理类ProxySingleCase,将控制唯一实例权能转移出去,使得SingleCase成为了一个普通的类,并且也实现了单例模式

尾声

单例模式的使用非常广泛,希望朋友们在日常开发中也能借鉴于这类思想

相关内容

热门资讯

linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
C++ 机房预约系统(六):学... 8、 学生模块 8.1 学生子菜单、登录和注销 实现步骤: 在Student.cpp的...
A.机器学习入门算法(三):基... 机器学习算法(三):K近邻(k-nearest neigh...
数字温湿度传感器DHT11模块... 模块实例https://blog.csdn.net/qq_38393591/article/deta...
有限元三角形单元的等效节点力 文章目录前言一、重新复习一下有限元三角形单元的理论1、三角形单元的形函数(Nÿ...
Redis 所有支持的数据结构... Redis 是一种开源的基于键值对存储的 NoSQL 数据库,支持多种数据结构。以下是...
win下pytorch安装—c... 安装目录一、cuda安装1.1、cuda版本选择1.2、下载安装二、cudnn安装三、pytorch...
MySQL基础-多表查询 文章目录MySQL基础-多表查询一、案例及引入1、基础概念2、笛卡尔积的理解二、多表查询的分类1、等...
keil调试专题篇 调试的前提是需要连接调试器比如STLINK。 然后点击菜单或者快捷图标均可进入调试模式。 如果前面...
MATLAB | 全网最详细网... 一篇超超超长,超超超全面网络图绘制教程,本篇基本能讲清楚所有绘制要点&#...
IHome主页 - 让你的浏览... 随着互联网的发展,人们越来越离不开浏览器了。每天上班、学习、娱乐,浏览器...
TCP 协议 一、TCP 协议概念 TCP即传输控制协议(Transmission Control ...
营业执照的经营范围有哪些 营业执照的经营范围有哪些 经营范围是指企业可以从事的生产经营与服务项目,是进行公司注册...
C++ 可变体(variant... 一、可变体(variant) 基础用法 Union的问题: 无法知道当前使用的类型是什...
血压计语音芯片,电子医疗设备声... 语音电子血压计是带有语音提示功能的电子血压计,测量前至测量结果全程语音播报࿰...
MySQL OCP888题解0... 文章目录1、原题1.1、英文原题1.2、答案2、题目解析2.1、题干解析2.2、选项解析3、知识点3...
【2023-Pytorch-检... (肆十二想说的一些话)Yolo这个系列我们已经更新了大概一年的时间,现在基本的流程也走走通了,包含数...
实战项目:保险行业用户分类 这里写目录标题1、项目介绍1.1 行业背景1.2 数据介绍2、代码实现导入数据探索数据处理列标签名异...
记录--我在前端干工地(thr... 这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前段时间接触了Th...
43 openEuler搭建A... 文章目录43 openEuler搭建Apache服务器-配置文件说明和管理模块43.1 配置文件说明...