单例模式

单例模式 为一个类对外有且仅有一个实例。深入理解来说如果一个类对外只提供一个唯一的可以访问的方法或者属性，这样的编码方案就是单例模式。

特点

---

优点

• 适用于单一对象，只生成一个对象实例，避免频繁创建和销毁实例，减少内存占用

缺点

• 不适用动态扩展对象，或需创建多个相似对象的场景

实现

---

懒汉式单例模式

懒汉式单例模式 并不是一开始就创建实例对象，等到调用getInstance()方法的时候才开始创建。也就是按需加载。

完整代码

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  getName() {
    return this.name;
  }
  getAge() {
    return this.age;
  }
}

class Single {
  static instance;
  static getInstance(...args) {
    if (!this.instance) {
      this.instance = new Person(...args);
    }
    return Single.instance;
  }
}

测试用例

const person1 = Single.getInstance("哈哈", 23);
const person2 = Single.getInstance("呵呵", 24);
console.log(person1 === person2);

饿汉式单例模式

饿汉式单例模式 立即创建对象

完整代码

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  getName() {
    return this.name;
  }
  getAge() {
    return this.age;
  }
}

class Single {
  static instance = new Person();
}

测试用例

const person1 = Single.instance;
const person2 = Single.instance;
console.log(person1 === person2);

场景

---

项目日志

项目日志 是一个项目必不可少的环节，当我们为一个项目编写一个日志文件类，用来保存日志和阅读日志信息时，这个日志类有多种设计方案，但单例模式时最好的方案，因为每次存储日志信息到日志文件上时都创建一个日志对象，这没有必要，也很浪费内存空间。

第三方库 jQuery

全局状态管理 Vuex

全局状态管理 Vuex 中的 store 对象在整个项目中被设计成唯一的对象。

全局状态管理 Redux

全局状态管理 Redux 中的 store 对象在整个项目中被设计成唯一的对象。

浏览器本地存储 localStorage

一般前端项目需要进行客户端本地数据存储时，都会考虑使用 localStorage,localStorage 只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份 localStorage 数据。那封装 localStorage 设计成一个单例模式类就再适合不过了。

• 一、将类构造器设为私有，不允许外部来创建类的实例
• 二、类内部提供一个外部访问的方法或者属性，外部可以通过这个方法得到一个实例。
• 三、外部调用第二部提供的静态方法来获取一个对象实例

class MyLocalStorage {
  public static instance: MyLocalStorage;
  private constructor() { }
  public static getInstance() {
    if (!this.instance) {
      MyLocalStorage.instance = new MyLocalStorage();
    }
    return MyLocalStorage.instance;
  }
  public setItem(key: string, value: any): void {
    localStorage.setItem(key, JSON.stringify(value));
  }
  public getItem<T>(key: string): T {
    return JSON.parse(localStorage.getItem(key) || "")
  }
}

const local = MyLocalStorage.getInstance();
const local2 = MyLocalStorage.getInstance();

console.log(local === local2);

export { }