javascript设计模式之单例模式

最新推荐文章于 2023-05-07 10:53:48 发布

前端同学

最新推荐文章于 2023-05-07 10:53:48 发布

阅读量691

点赞数 1

分类专栏： js 文章标签：单例模式 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_44730897/article/details/122245941

版权

js 专栏收录该内容

74 篇文章 4 订阅

订阅专栏

定义

单例就是单一的意思，单例模式的定义是：保证一个类仅有一个一个实例，并提供一个访问它的全局访问点。

思路

新建对象时判断全局是否有该对象，如果有，就返回该对象，没有就创建一个新对象返回。

特点

单例模式,永远指向的都是同一个实例,改变其属性值,会影响到所有实例
单例模式的优势: 因为只创了一个实例,这样大大节省了空间

场景

1 多次点击同一个弹窗

2 下载多份材料的时候

实现

1、使用闭包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单例模式</title>
</head>

<body>
    <button id="btn">点击</button>
</body>
<script>
    function createDiv(a, b, c) {
        console.log(a, b, c);
        let div = document.createElement('div')
        div.innerHTML = '我只是个单例';
        div.style.display = 'none'
        document.body.appendChild(div)
        return div
    }
    function singleModal(fn) {
        let result; //闭包
        return function () {
            return result || (result = fn.apply(this, arguments)) //重点在这里，如果存在则返回，不存在则存起来
        }
    }
    var create = singleModal(createDiv);
    function onClick() {
        const div = create(1, 2, 3)
        div.style.display = 'block';
    }
    document.getElementById('btn').addEventListener('click', function () {
        onClick()
    })
</script>

</html>

2、es6 类

class Singleton {
      static instance = null

       constructor() {
           this.num = Math.random()
       }

       getNum() {
           return this.num
       }

       static getInstance() {
           if(!Singleton.instance) {
               Singleton.instance = new Singleton()
           }
           return Singleton.instance
       }
   }

   let singleA = Singleton.getInstance()
   let singleB = Singleton.getInstance()

   console.log(singleA.getNum() === singleB.getNum())  //true

前端同学

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript设计模式之单例模式

定义单例就是单一的意思，单例模式的定义是：保证一个类仅有一个一个实例，并提供一个访问它的全局访问点。思路新建对象时判断全局是否有该对象，如果有，就返回该对象，没有就创建一个新对象返回。特点单例模式,永远指向的都是同一个实例,改变其属性值,会影响到所有实例单例模式的优势: 因为只创了一个实例,这样大大节省了空间场景1 多次点击同一个弹窗2 下载多份材料的时候实现1、使用闭包<!DOCTYPE html><html lang="en"><head&g
复制链接

扫一扫