JS设计模式（一）单例模式

代码对我眨眼睛2024-07-25 1:37

注释很详细，直接上代码

本文建立在已有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>