Javascript单例模式的介绍和实例

当我们开发一些复杂的web应用时，我们难免会需要创建一些全局预留变量或者共享某些对象，这时候单例模式就可以派上用场了。

什么是单例模式

首先，单例模式是一种创建型的设计模式。它实现了一个类只能够被创建一次的功能。简单来说，就是当某个类只需要一个实例时，就可以使用单例模式。

单例模式的实现

要实现单例模式，可以采用以下几种方式：

立即执行函数

立即执行函数是实现单例模式的最简单方法。

const singleton = (function() {
  let instance;
  function init() {
    // 单例代码
    return {
      publicMethod: function() {
        console.log('publicMethod');
      },
      publicProps: 'public props',
    };
  }
  return {
    getInstance: function() {
      if (!instance) {
        instance = init();
      }
      return instance;
    }
  }
})();

在立即执行函数中使用闭包来控制变量作用域，通过return返回一个包含getInstance方法的对象。在getInstance方法中实现判断是否已经有实例，如果有则返回实例，没有则创建实例并返回它。这样，在整个应用程序中只有一个实例。

ES6单例模式

ES6提供了class，可以通过class实现单例模式。

class Singleton {
  constructor() {
    if (!Singleton.instance) {
      Singleton.instance = this;
      // 单例代码
      this.publicProps = 'public props';
    }
    return Singleton.instance;
  }
  publicMethod() {
    console.log('publicMethod');
  }
}

在Singleton类的构造函数中判断是否有实例，如果没有则创建实例并将实例赋值到Singleton.instance属性中，通过return Singleton.instance返回实例。

单例模式示例

管理弹窗

在web应用中，我们可能会使用弹窗来向用户显示一些信息。使用单例模式可以确保同一时间只有一个弹窗被显示。

const modal = (function() {
  let instance;
  function init() {
    let isOpen = false;
    const modal = document.createElement('div');
    modal.classList.add('modal');
    document.body.appendChild(modal);
    return {
      open: function() {
        if (!isOpen) {
          isOpen = true;
          modal.style.display = 'block';
        }
      },
      close: function() {
        if (isOpen) {
          isOpen = false;
          modal.style.display = 'none';
        }
      }
    };
  }
  return {
    getInstance: function() {
      if (!instance) {
        instance = init();
      }
      return instance;
    }
  };
})();

modal.getInstance().open(); // 打开弹窗

配置管理

在一些web应用中，我们需要读取一些公共配置，比如API地址、密钥等。使用单例模式可以提高效率，避免重复创建和读取配置文件。

const config = (function() {
  let instance;
  function init() {
    const data = {
      api: 'http://api.example.com',
      apiKey: 'your-api-key',
    };
    return {
      get: function(key) {
        return data[key] || '';
      },
      set: function(key, value) {
        data[key] = value;
      }
    };
  }
  return {
    getInstance: function() {
      if (!instance) {
        instance = init();
      }
      return instance;
    }
  };
})();

console.log(config.getInstance().get('api')); // http://api.example.com
config.getInstance().set('api', 'http://new-api.example.com');
console.log(config.getInstance().get('api')); // http://new-api.example.com

总结

以上就是Javascript单例模式的介绍和实例演示，单例模式可以确保同一时间只有一个实例存在，在开发中有很多的应用场景。立即执行函数和ES6类均可以实现单例模式。在实际开发中也可以根据项目需求进行定制。