[ES6新特性]JavaScript中的单例模式，没想到吧，JS也能用class

引言

JavaScript是一种广泛应用于前端开发的强大编程语言。在大型应用程序中，为了保持代码的组织性和可维护性，设计模式变得至关重要。其中之一，单例模式在许多应用程序中发挥着重要的作用。今天我将带着大家一起学习JavaScript中的单例模式。

收藏===学会！！😁😁

什么是单例模式？

单例模式是一种设计模式，其目的是确保一个类只有一个实例，并提供一个全局访问点。这意味着无论何时何地，当系统中只需要一个特定对象时，都可以使用该对象的同一实例。

在JavaScript中，单例模式有助于避免全局变量的滥用，提高代码的可维护性，并确保某些资源只被创建一次。下面我们将探讨几种实现单例模式的方法。

单例模式其实就是一种设计模式，就是为了保证一个类只有一个实例存在。有点像"独一无二"的感觉。

当我们在某些场景，设置一些东西只需要设置全局，也就是只需要一个数据，如说数据库连接，或者一些全局的配置信息。如果我们一直创建新的实例，会带来不可意料的后果！

比如，我们来给大家看看一个案例：

js 复制代码

class SingleDog{
    show(){
        console.log('我是一个单例对象');
    }
}
const s1 = new SingleDog()
const s2 = new SingleDog()
console.log(s1===s2);// false 不同的内存空间，值也会不一样

在这个案例当中，我们想要实现让s1和s2指向同一个对象，也意味是他们两个是同一个人，不同名，这就有点抽象了，就好比你有两个名字，虽然别人看能到你两个不同的名字，但是这两个名字实际上都是你！

很明显，我们使用上述方法行不通！那么我们要怎么样实现一个单例模式呢？

实现单例模式的方法

1. 使用闭包

在JavaScript中，闭包是一种非常强大的机制，可以用来创建私有变量。通过使用闭包，我们可以确保只有一个实例被创建并在整个应用程序中被共享。

javascript 复制代码

var Singleton = (function() {
  var instance;

  function createInstance() {
    // 创建实例的代码
    return new Object("我是instance");
  }

  return {
    getInstance: function() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

在这个案例当中，createInstance 函数被定义在外层函数中，并且能够访问外层函数的变量，形成了闭包。这使得 createInstance 函数可以访问并操作 instance 变量，即使在外部函数执行完毕后，instance 的状态仍然可以被保持。

Singleton模块使用了立即调用函数表达式（IIFE）来创建一个闭包。createInstance函数用于实际创建实例，而getInstance函数负责返回该实例。如果 instance 不存在，就调用 createInstance 来创建一个新的实例，然后将其赋值给 instance，最后返回这个实例；否则，直接返回现有的实例。

2. 使用ES6中的Class类

在ES6及更高版本中，我们可以使用类来实现单例模式。通过使用静态方法和静态属性，我们可以确保只有一个实例存在。

javascript 复制代码

class SingleDog{
    show(){
        console.log('我是一个单例对象');
    }
    static instance
    static getinstance(){
        if(!SingleDog.instance){
            SingleDog.instance = new SingleDog();

        }
        return SingleDog.instance;
    }
}
//类的方法
let s1 =SingleDog.getinstance()
let s2 =SingleDog.getinstance()
console.log(s1===s2);//输出：true

我们在这个案例当中：

定义了一个名为SingleDog的类，它实现了单例模式。
我们在类中包含一个实例方法show用于输出信息，以及一个静态方法getinstance用于获取类的单一实例。
在getinstance方法中，通过检查静态属性instance是否存在，如果不存在就创建一个新的SingleDog实例，然后返回该实例。
通过调用getinstance方法获取SingleDog的实例，并使用两个不同的变量s1和s2分别引用这个实例。
最后，通过比较s1和s2的引用，输出它们是否相等，以验证这是一个单例对象。

这样，我们就利用了ES6中class实现了一个单例模式！

单例模式的应用场景

1. 数据库连接

在Web开发中，与数据库的连接通常是有限资源。通过使用单例模式，我们可以确保只有一个数据库连接实例，避免不必要的开销。

javascript 复制代码

class DatabaseConnection {
  static instance;

  constructor() {
    if (!DatabaseConnection.instance) {
      // 进行实际的数据库连接
      DatabaseConnection.instance = this;
    }

    return DatabaseConnection.instance;
  }
}

// 在应用中使用单例模式获取数据库连接
const dbConnection = new DatabaseConnection();

2. 配置管理

当应用程序有全局配置时，可以使用单例模式确保只有一个配置实例，并且在整个应用程序中共享。

javascript 复制代码

class AppConfig {
  static instance;
  configData;

  constructor() {
    if (!AppConfig.instance) {
      // 从配置文件或其他来源获取配置数据
      this.configData = { /* 配置数据 */ };

      AppConfig.instance = this;
    }

    return AppConfig.instance;
  }
}

// 在应用中使用单例模式获取配置
const appConfig = new AppConfig();

单例模式的优缺点

优点

全局访问点： 单例模式提供了一个全局访问点，使得在整个应用程序中可以方便地访问相同的实例。
资源共享： 通过单例模式，可以确保某些资源（如数据库连接、配置数据等）只被创建一次，避免不必要的开销。
避免全局变量污染： 单例模式有助于避免全局变量的滥用，提高代码的可维护性。

缺点

隐藏依赖关系： 单例模式可能导致模块之间的依赖关系难以察觉，因为它们共享相同的实例。
全局状态： 单例模式引入了全局状态，可能使得代码的测试和调试变得更加困难。

单例模式的界面案例

我们接下来，给大家上一个案例，直接实现一个效果！

html 复制代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录框</title>
    <style>
        #modal{
            width: 200px;
            height: 200px;
            line-height: 200px;
            background-color: #ccc;
            position: fixed;
            top: 50%;
            left:50%;
            transform: translate(-50%,-50%);
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <button id="open">打开弹框</button>
    <button id="close">关闭弹窗</button>
    <script>
        //立即执行函数
        //闭包的方式来实现单例
        const Modal = (function() {
            //modal又return决定，创建闭包
            let modal = null//自由变量

            return function(){
                if(!modal){
                    modal = document.createElement('div')
                    modal.innerHTML = '我是一个全局唯一的登录框'
                    modal.style.display = 'none'
                    modal.id='modal'
                    document.body.appendChild(modal)
                }
                return modal
            }
           
        })()
        // const modal = new Modal()
        document.getElementById('open').addEventListener('click', function(){
            const modal = new Modal()
            modal.style.display='block'
        })
        document.getElementById('close').addEventListener('click', function(){
            const modal = new Modal()
            modal.style.display='none'
        })
    </script>
</body>

我们会实现一个这样的效果！

我们这个案例实现了使用立即执行函数和闭包的方式实现了一个简单的单例模式，创建了一个全局唯一的模态框（弹框）。在立即执行函数中，通过闭包的特性，将模态框的实例 modal 保存在自由变量中，确保全局范围内只有一个实例。当点击"打开弹框"按钮时，通过调用 Modal() 函数获取或创建模态框实例，并设置其样式为显示；当点击"关闭弹窗"按钮时，同样通过 Modal() 函数获取或创建模态框实例，并设置其样式为隐藏。这样可以确保无论点击多少次按钮，都只有一个模态框实例存在，符合单例模式的设计理念。

结论

单例模式是JavaScript中一种强大且常用的设计模式，它有助于确保在应用程序中只存在一个特定实例。通过使用闭包或ES6中的类，我们可以轻松地实现单例模式，并在数据库连接、配置管理等场景中受益。

在使用单例模式时，需要谨慎考虑其优缺点，并确保在特定情况下选择合适的设计模式。在整个应用程序的设计中，合理使用单例模式可以提高代码的可维护性和整体性能。

希望这篇文章能够帮助大家更好地理解JavaScript中的单例模式，并在实际应用中运用这一设计模式，提高代码质量和可维护性。

好啦！我们今天的学习就到这里啦！

大家有任何意见和想法，欢迎大家在评论区留言！点个小小的赞鼓励支持一下吧！🙂🌹🌹🌹