单例模式及应用场景

如果希望自己的代码更优雅、可维护性更高以及更简洁,往往离不开设计模式这一解决方案。

在JS设计模式中,最核心的思想:封装变化(将变与不变分离,确保变化的部分灵活,不变的部分稳定)。

那么来说说第一个常见的设计模式:单例模式

单例模式保证一个类仅有一个实例,并提供一个访问它的全局访问方式,为了解决一个全局使用的类频繁被创建和销毁、占用内存的问题。

 比如,当系统中某个接口的结构已经无法满足我们现在的业务需求,但又不能改动这个接口,因为可能原来的系统很多功能都依赖于这个接口,改动接口会牵扯到太多文件。因此应对这种场景,我们可以很快地想到可以用适配器模式来解决这个问题。 下面介绍几种在JavaScript中常见的几种设计模式:

1、单例模式

单例模式的定义: 保证一个类仅有一个实例,并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否,如果存在则直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。 适用场景:一个单一对象。比如:弹窗,无论点击多少次,弹窗只应该被创建一次。

class CreateUser {    
    constructor(name) {        
        this.name = name;        
        this.getName();    
    }    
    getName() {         
        return this.name;    
    }
}// 代理实现单例模式
var ProxyMode = (function() {    
    var instance = null;    
    return function(name) {        
        if(!instance) {            
            instance = new CreateUser(name);        
        }        
        return instance;    
}})();// 测试单体模式的实例
var a = new ProxyMode("aaa");
var b = new ProxyMode("bbb");// 因为单体模式是只实例化一次,所以下面的实例是相等的console.log(a === b);    //true

 ES5通过闭包 

在ES5中,可以使用闭包(函数内部返回函数被外界变量所引用,导致这个函数里面的变量无法被释放,就构建成闭包)来保存这个类的实例。

var Singeton = (function(){
    var instance;
    function User(name,age){
        this.name=name;
        this.age=age;
    }
    return function(name,age){
        if(!instance){
            instance = new User(name,age)
        }
        return instance
    }
})()

 此时这个实例一旦生成,每次都是返回这个实例,且不会被修改,可以看到下面的代码,当给 User 对象初始赋值 name:alice,age:18 时,以后再赋值便无效了,以及每次返回都是初始的实例对象。

ES6中使用类的静态属性

以上代码使用ES6语法来实现,通过类的静态属性来保存唯一的实例对象。

class Singeton {
    constructor(name,age){
        if(!Singeton.instance){
            this.name = name;
            this.age = age;
            Singeton.instance = this;
        }
       return Singeton.instance;
    }
}

 创建方式仍然是一样的,通过 new 关键字创建类的实例对象。

案例

那这样一种设计模式在开发中实际有什么用途呢?我们试想这样一个业务场景:访问网站时,很久没有操作页面,此时授权过期,当我们点击页面上的任何一个地方,都会弹出一个登录框。

那么这个登录框,是全局唯一的,不会存在多份,也不会互相冲突,所以不需要每次都创建一份,保留初始那一份就够了。

JavaScript设计模式之单例模式应用场景案例详解_JavaScript_脚本之家

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

RISC-V特权架构 - CSR寄存器

RV32/64 特权架构 - CSR寄存器 1 CSR地址空间2 CSR定义2.1 用户级2.2 监管级2.3 超级监管级2.4 机器级 3 CSR访问3.1 CSRRW3.2 CSRRS3.3 CSRRC3.4 CSRRWI3.5 CSRRSI3.6 CSRRCI 本文属于《 RISC-V指令集基础系列教程》之一,欢迎查看其它文章。 1 CSR地址空间 RISC&…

[笔记] 使用 Java Swing 实现一个简单的窗口

Java Swing 是一个用于构建图形用户界面(GUI)的Java库,它提供了丰富的组件和工具,用于创建交互式的桌面应用程序。Swing 是 Java Foundation Classes(JFC)的一部分,它是 Java 平台的一种标准用户…

超全面!Linux学习资料大合集,21套从入门到进阶,看这篇就够了

本文将为那些渴望学习Linux,但又缺乏相应资料和方向的朋友,提供21套Linux优质资料,包含入门到进阶,希望能对大家有所帮助。 此合集内容及其丰富,涉及方面颇多,不仅适合Linux入门学习的朋友,运维…

麻省理工最新开发AI模型,让机器人实现自主规划路线

文 | BFT机器人 麻省理工学院的研究人员独具匠心地应用了人工智能来解决仓库中的机器人路径规划问题,以此缓解交通拥堵的难题。据该学院介绍,他们的团队开发了一种深度学习模型,其效率比传统的强随机搜索方法高出近四倍,极大地提…

彻底剖析激光-视觉-IMU-GPS融合SLAM算法:理论推导、代码讲解和实战

自主导航是机器人与自动驾驶的核心功能,而SLAM技术是实现自主导航的前提与关键。现有的机器人与自动驾驶车辆往往会安装激光雷达,相机,IMU,GPS等多种模态的传感器,而且已有许多优秀的激光SLAM与视觉SLAM算法。但是每种…

nginx主动检测后端健康模块

一、前言 nginx也有自带的后端检测模块ngx_http_upstream_module,该模块可以做到基本的健康检查,因为该健康检查是被动的,当nginx有请求后,才会对后端服务进行健康检测,当检测到有故障时会将这个请求转发到正常的后端服…

云计算市场,从追求“规模制胜”到走向“用户分化”

文|智能相对论 作者|叶远风 通常来说,价格战放到任何行业,都不是什么好事。 如今,作为曾经的前沿技术创新,云计算行业正在被迫走入价格战的阴霾当中,引发业界担忧。 ECS(云服务器)最高降36%…

数据库之间数据迁移工具datax

简介 DataX 是阿里云 DataWorks数据集成 的开源版本,在阿里巴巴集团内被广泛使用的离线数据同步工具/平台。DataX 实现了包括 MySQL、Oracle、OceanBase、SqlServer、Postgre、HDFS、Hive、ADS、HBase、TableStore(OTS)、MaxCompute(ODPS)、Hologres、DRDS, databe…

2024.3.1 网络编程

1.思维导图 2.TCP机械臂测试 程序代码&#xff1a; #include <myhead.h> #define SER_IP "192.168.125.254" //服务器端IP #define SER_PORT 8888 //服务器端端口号#define CLI_IP "192.168.199.131" //客户端IP …

C++_数据类型_字符串型

作用 用于表示一串字符 两种风格 C风格字符串&#xff1a;char 变量名[] "字符串值” 示例 注意 C风格的字符串要用双括号括起来 C风格字符串&#xff1a;string 变量名 "字符串值” 注意 用C风格字符串的时候&#xff0c;要包含这个头文件#include <st…

基于React低代码平台开发:构建高效、灵活的应用新范式

文章目录 一、React与低代码平台的结合优势二、基于React的低代码平台开发挑战三、基于React的低代码平台开发实践四、未来展望《低代码平台开发实践&#xff1a;基于React》编辑推荐内容简介作者简介目录前言为什么要写这本书 读者对象如何阅读本书 随着数字化转型的深入&…

GraphView实时图像刷新

代码&#xff1a; GraphViewTest::GraphViewTest(QWidget *parent): QWidget(parent) {ui.setupUi(this);m_bll BllData::getInstance();connect(m_bll, &BllData::returnImgDataSignal, this, &GraphViewTest::returnImgDataSlot);ui.graphicsView->setHorizonta…

RabbitMQ分享

RabbitMQ遵循AMQP协议&#xff0c;自身采用Erlang RabbitMQ工作模式 生产者发消息&#xff0c;启动多个消费者实例来消费消息&#xff0c;每个消费者仅消费部分信息&#xff0c;可达到负载均衡的效果。 RabbitMQ三种常用交换机类型&#xff1a; 交换机主要起调度分发作用。 …

正弦波生成的傅里叶级数展开法

目录&#xff1a; 一、积分法 二、傅里叶级数展开法 附录、常见波形的傅里叶级数 一、积分法 通过对三角波进行积分&#xff0c;即可得到正弦波。有关内容移步&#xff1a;运算放大器应用汇总1之六、积分电路。 下面对傅里叶级数展开法进行描述。 二、傅里叶级数展开法 三…

高通QNX基线编译原理

下面代码以高通智驾平台为例。 1 QNX应用程序编译原理 在高通提供的qnx开发包中,qnx的内核已经由qnx所提供,所以qnx的编译,其实就是大量应用程序的编译,以及最后利用buildfile文件,把内核,库文件以及应用程序打包在一起的过程。 1.1 qnx的工程目录 应用程序的编译,可…

Tomcat服务部署优化

目录 一.Tomcat的基本内容 1.概念 2.构成 &#xff08;1&#xff09;web容器 &#xff08;2&#xff09;servlet容器&#xff08;catalina&#xff09; &#xff08;3&#xff09;JSP容器 3.Tomcat顶层架构 &#xff08;1&#xff09;Tomcat中最顶层的容器是Server&…

运放设计选型中关注的参数-运算放大器选型参数

1、直流增益&#xff08;AVD&#xff09; 直流增益是运放最重要一个属性之一&#xff0c;其定义为输出电压的变化与输入电压变化之比值&#xff0c;通常用V/mV表示这个比值&#xff0c;例如&#xff0c;增益为30000&#xff0c;可表示为30V/mV&#xff0c;有些地方也会把增益用…

盲行的守护者:盲人应用的温暖相伴

作为一个视障人士&#xff0c;我常常对前方的未知感到迷茫。每一步都像是踏入未知的领域&#xff0c;恐惧与不安时刻伴随着我。然而&#xff0c;一款名为蝙蝠避障的盲人手机应用&#xff0c;成为了我前行的明灯。 在这款盲人手机应用的帮助下&#xff0c;我拥有了新的探知世界的…

midjourney提示词语法

更高级的提示可以包括一个或多个图像URL、多个文本短语和一个或更多个参数 Image Prompts 可以将图像URL添加到提示中&#xff0c;以影响最终结果的样式和内容。图像URL总是位于提示的前面。 https://docs.midjourney.com/image-prompts Text Prompt 要生成的图像的文本描述。…

内核中的Kconfig文件

Kconfig解析 编译内核时用于配置的Kconfig文件 以内核中的ttyprintk.c为例&#xff0c;其位于/kernel-sources/dirver/char/ttyprintk.c 如何将其编译进内核&#xff1f; 在char目录下有Kconfig文件&#xff0c;其中有如下内容 tristate 表示该模块可以选择 Y N M(以.ko形…