文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何使用Javascript实现单例模式

2023-06-14 20:22

关注

这篇文章给大家分享的是有关如何使用Javascript实现单例模式的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

JavaScript是什么

JavaScript是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,JavaScript是被广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。

概述

单例模式也称为单体模式,规定一个类只有一个实例,并且提供可全局访问点;

在读这篇文章之前,也许你对单例模式的概念感到模糊或者不清楚,但是其实在日常的开发中你肯定用到过单例模式;

JavaScript中没有类的定义,单例模式的特点是”唯一“和”全局访问“,那么我们可以联想到JavaScript中的全局对象,利用ES6的let不允许重复声明的特性,刚好符合这两个特点;是的,全局对象是最简单的单例模式;

let obj = {    name:"咸鱼",    getName:function(){}}

上述代码中可以知道obj就是一个单例,因为obj刚好就符合单例模式的两大特点:"唯一"和"可全局访问";

但是我们并不建议这么实现单例,因为全局对象/全局变量会有一些弊端:

污染命名空间(容易变量名冲突)维护时不容易管控 (搞不好就直接覆盖了)

代码实现

简单版单例模式

分析:只能有一个实例,所以我们需要使用if分支来判断,如果已经存在就直接返回,如果不存在就新建一个实例;

let Singleton = function(name){    this.name = name;    this.instance = null; }Singleton.prototype.getName = function(){    console.log(this.name);}Singleton.getInstance = function(name){    if(this.instace){        return this.instance;     }    return this.instance = new Singleton(name);}let winner = Singleton.getInstance("winner");   //winnerconsole.log(winner.getName());let sunner = Singleton.getInstance("sunner");   //winnerconsole.log(sunner.getName())

上面代码中我们是通过一个变量instance的值来进行判断是否已存在实例,如果存在就直接返回this.instance,如果不存在,就新建实例并赋值给instance;

但是上面的代码还是存在问题,因为创建对象的操作和判断实例的操作耦合在一起,并不符合”单一职责原则“;

改良版

思路:通过一个闭包,来实现判断实例的操作;

闭包警告:不理解闭包的同学请先学习闭包

let CreateSingleton = (function(){    let instance = null;    return function(name){        this.name = name;        if(instance){            return instance        }        return instance = this;    }})()CreateSingleton.prototype.getName = function(){        console.log(this.name);}let winner = new CreateSingleton("winner");  //winnerconsole.log(winner.getName());let sunner = new CreateSingleton("sunner");  //winnerconsole.log(sunner.getName())

代理版单例模式

通过代理的形式,将创建对象的操作和实例判断的操作进行解耦拆分,实现更小粒度的划分,符合”单一职责原则“;

let ProxyCreateSingleton = (function(){    let instance = null;    return function(name){        if(instance){            return instance        }        return instance = new Singlton(name);    }})();let Singlton = function(name){    this.name = name;} Singlton.prototype.getName = function(){    console.log(this.name);}let winner = new ProxyCreateSingleton("winner");console.log(winner.getName());let sunner = new ProxyCreateSingleton("sunner");console.log(sunner.getName());

上面的代码中,ProxyCreateSingleton()只负责判断实例,Singlton只负责创建对象和赋值;

惰性单例模式

我们经常会有这样的场景:页面多次调用都有弹窗提示,只是提示内容不一样;

这个时候我们可以立马想到是单例模式,弹窗就是单例实例,提示内容是参数传递;我们可以用惰性单例模式来实现它;

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title></head><body>    <div id="loginBtn">有梦想的咸鱼</div></body><script>let getSingleton = function(fn) {    var result;    return function() {        return result || (result = fn.apply(this, arguments)); // 确定this上下文并传递参数    }}let createAlertMessage = function(html) {    var div = document.createElement('div');    div.innerHTML = html;    div.style.display = 'none';    document.body.appendChild(div);    return div;}let createSingleAlertMessage = getSingleton(createAlertMessage);    document.getElementById('loginBtn').onclick=function(){        let alertMessage = createSingleAlertMessage('看来真的是个咸鱼');        alertMessage.style.display = 'block';    }</script></html>

惰性单例是指的是页面开始加载的时候我们的实例是没有进行创建的,是当我们点击页面的div之后才开始创建实例(按需创建),这可以提高我们的网页性能,加快我们的页面渲染速度;

感谢各位的阅读!关于“如何使用Javascript实现单例模式”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯