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>
相关推荐
沙尘暴炒饭13 分钟前
vuex持久化vuex-persistedstate,存储的数据刷新页面后导致数据丢失
开发语言·前端·javascript
2401_8370885015 分钟前
CSS清楚默认样式
前端·javascript·css
苏近之1 小时前
说明白 Rust 中的泛型: 泛型是一种多态
设计模式·rust
Pasregret1 小时前
中介者模式:解耦对象间复杂交互的设计模式
设计模式·交互·中介者模式
前端大白话2 小时前
前端人速码!10个TypeScript神仙技巧,看完直接拿捏项目实战
前端·javascript·typescript
前端大白话2 小时前
前端必看!10个React实战技巧让你代码起飞,附超详细注释
前端·javascript·react.js
前端大白话2 小时前
前端必学!10 个超实用 Vue3 实战技巧大放送
前端·javascript·vue.js
谦谦橘子2 小时前
手写react-router,理解react-router原理
前端·javascript·react.js
zhu_zhu_xia2 小时前
JS通过GetCapabilities获取wms服务元数据信息并在SuperMap iClient3D for WebGL进行叠加显示
javascript·3d·webgl
BillKu2 小时前
Vue3父子组件数据同步方法
前端·javascript·vue.js