javascript设计模式---单例模式

知道了啊2024-07-01 18:45

JavaScript设计模式---单例模式

单例模式又称为单体模式，并提供一个访问它的全局访问点，也就是说，第二次使用同一个类创建的对象的时候，应该得到和第一次创建的对象完全相同的对象

特点

一个类只能生成一个实例对象
提供一个全局访问点来获取这个实例

案例

window和document
Vuex，Redux和Router
全局loading

缺点

确保在整个应用中，只有一个实例存在，而且该实例需要被全局访问时。但是使用单例模式，因为可能会引入全局状态，增加代码的复杂度和耦合性

实现

构造函数

javascript 复制代码

let singleDemo;
function SingleDemo() {
  if (!singleDemo) {
    singleDemo = this;
  }
  return singleDemo;
}
SingleDemo.prototype.show = function () {
  console.log("我是单例模式");
};
const single1 = new SingleDemo();
const single2 = new SingleDemo();
console.log(single1 === single2);

使用类的静态属性

javascript 复制代码

class Singleton {
  static instance;
  constructor() {
    if (!Singleton.instance) {
      Singleton.instance = this;
    }
    return Singleton.instance;
  }
}
const instance1 = new Singleton();
const instance2 = new Singleton();
console.log(instance1 === instance2); // true

闭包

javascript 复制代码

const Singleton = (function () {
  let instance;
  function createInstance() {
    // 实例化逻辑
    return {
      // 实例属性和方法
    };
  }
  return {
    getInstance: function () {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    },
  };
})();
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

应用场景

window和document全局变量，是单例
es6中的module模块特性，通过import/export导出模块的变量是单例。
Vuex维护的全局状态是单例的。

ps: 后续还会补充，在学习vuex和eventbus的区别的时候，想到这个模式，故学习了单例模式