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>
相关推荐
多看书少吃饭9 小时前
从Vue到Nuxt.js
前端·javascript·vue.js
前端一小卒9 小时前
从 v5 到 v6:这次 Ant Design 升级真的香
前端·javascript
前端不太难10 小时前
《Vue 项目路由 + Layout 的最佳实践》
前端·javascript·vue.js
想学后端的前端工程师11 小时前
【Vue3组合式API实战指南:告别Options API的烦恼】
前端·javascript·vue.js
一勺-_-11 小时前
mermaid图片如何保存成svg格式
开发语言·javascript·ecmascript
GISer_Jing12 小时前
深入拆解Taro框架多端适配原理
前端·javascript·taro
毕设源码-邱学长12 小时前
【开题答辩全过程】以 基于VUE的藏品管理系统的设计与实现为例,包含答辩的问题和答案
前端·javascript·vue.js
San30.13 小时前
深入理解 JavaScript:手写 `instanceof` 及其背后的原型链原理
开发语言·javascript·ecmascript
北冥有一鲲13 小时前
LangChain.js:RAG 深度解析与全栈实践
开发语言·javascript·langchain
狗狗摇屁屁15 小时前
JS手写防抖
开发语言·javascript·ecmascript