JS设计模式(一)单例模式

注释很详细,直接上代码

本文建立在已有JS面向对象基础的前提下,若无,请移步以下博客先行了解

JS面向对象(一)类与对象写法

特点和用途:
  • 全局访问点:通过单例模式可以在整个应用程序中访问同一个对象实例,而不要每次使用时都创建新的对象。
  • 节省资源:特别是在需要频繁创建和销毁对象时,单例模式可以减少内存和资源占用。
  • 数据共享:由于单例模式只有一个实例,可以确保数据在各个部分共享使用。

单例模式在开发中广泛应用,例如管理全局状态、配置信息、日志记录器等场景,确保整个应用程序中某个类只有一个实例是非常有用的

源码:

index.html

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    class LoginForm {
      constructor() {
        this.state = "hide";
      }
      show() {
        if (this.state === "show") {
          alert("已经显示");
          return;
        }
        this.state = "show";
        console.log("登录框显示成功");
      }
      hide() {
        if (this.state === "hide") {
          alert("已经隐藏");
          return;
        }
        this.state = "hide";
        console.log("登录框隐藏成功");
      }
    }
    LoginForm.getInstance = (function () {
      let instance; //因为是闭包,这个标识可以存储在函数内部,所以这里可以保证实例的唯一性
      return function () {
        if (!instance) {
          instance = new LoginForm();
        }
        return instance;
      };
    })();

    let obj1 = LoginForm.getInstance();
    obj1.show();

    let obj2 = LoginForm.getInstance();//两次获取的实例是同一个
    obj2.hide();

    console.log(obj1 === obj2);

    //这里演示一下闭包的应用
    //--------------------------------------------------
    /*
    function myTest() {
      let sum = 0;
      return function add(num) {
        sum += num;
        console.log(sum);
      };
    }
    let add = myTest();
    add(1);
    add(2);
    let add2 = myTest();
    add2(5);
    add2(6);
    */
  </script>
</html>
相关推荐
angelQ15 分钟前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
我的div丢了肿么办29 分钟前
js函数声明和函数表达式的理解
前端·javascript·vue.js
AAA阿giao32 分钟前
JavaScript 对象字面量与代理模式:用“胡巴送花”讲透面向对象与设计思想
javascript
高台树色32 分钟前
终于记住Javascript垃圾回收机制
javascript
举个栗子dhy1 小时前
第二章、全局配置项目主题色(主题切换+跟随系统)
前端·javascript·react.js
sorryhc1 小时前
开源的SSR框架都是怎么实现的?
前端·javascript·架构
fox_1 小时前
别再混淆 call/apply/bind 了!一篇讲透用法、场景与手写逻辑(二)
前端·javascript
潜心编码1 小时前
基于vue的停车场管理系统
前端·javascript·vue.js
T___T1 小时前
从 "送花被拒" 到 "修成正果":用 JS 揭秘恋爱全流程中的对象与代理魔法
前端·javascript
三小河1 小时前
从私服版本冲突到依赖治理:揭秘 resolutions 配置
前端·javascript·架构