Sync link: https://www.shanejix.com/TypeScript Singleton mode in/

Singleton pattern (singleton): a class has and instantiates only one instance object
​

More specifically:
​

If a class provides only one object instance and a unique method or property that can access the object,

This ensures the uniqueness of the object

So why not declare an object directly, but instantiate an object through a class?
​

Obviously, it makes maximum use of the idea of object-oriented: it is more encapsulated and easier to expand
​

scene

When to use singleton mode? Of course, it is considered from the important characteristics of the singleton pattern itself: uniqueness
​

Unique: there is only one independent. If this feature is met, the singleton mode can be considered.
​

For example:
​

Scenario 1: client storage

localStore/sessionStory => The same source policy, the same protocol, the same domain name and the same port share the same data => Singleton mode

Scenario 2: global status management

Global state store => SPA Shared global properties and methods (unique instance objects) => Singleton mode( react-redux , vuex Etc.)

Of course, there are many scenes ~ such as simulating an earth and the solar system

pattern

How to implement the singleton pattern in typescript? Take the client storage in scenario 1 as an example:
​

Step 1: privatize the constructor
​

class LocalStorageLayz {
  // Privatization constructor
  private constructor() {}
}

Step 2: provide external accessible methods, and call this method to get the unique object instance of the current class
​

class LocalStorageLayz {
  // The static property references a unique instance object of the localstotrace class
  static localStorage: LocalStorageLayz;

  // Privatization constructor
  private constructor() {}

  // Provides an externally accessible static method
  public static getInstance() {
    if (!this.localStorage) {
      this.localStorage = new LocalStorageLayz();
    }

    return this.localStorage;
  }

  // Example method
  public getItem(key: string) {
    let val = localStorage.getItem(key);
    return val !== null ? JSON.parse(val) : null;
  }

  // Example method
  public setItem(key: string, val: any) {
    localStorage.setItem(key, JSON.stringify(val));
  }
}

Step 3: externally call the method provided in step 2 to get a unique instance
​

const instanceLayz = LocalStorageLayz.getInstance();

instanceLayz.setItem("instanceLayz", { "1": 1, "2": 3 });

let val = instanceLayz.getItem("instanceLayz");

console.log("inatanceLayz", val);

In the second step, you can directly reference the instance object through the externally provided static properties, or you can initialize the static properties through the externally provided static methods. As follows:
​

class LocalStorage {
  // The static property references a unique instance object of the localstotrace class
  static localStorage: LocalStorage = new LocalStorage();

  // Privatization constructor
  private constructor() {}

  // Example method
  public getItem(key: string) {
    let val = localStorage.getItem(key);
    return val !== null ? JSON.parse(val) : null;
  }

  // Example method
  public setItem(key: string, val: any) {
    localStorage.setItem(key, JSON.stringify(val));
  }
}

The difference is that the opportunity to mount a unique instance can be manually controlled through static methods, while the static attribute will be mounted on the static attribute when the class is loaded
​

const instance = LocalStorage.localStorage;
instance.setItem("instance", { "3": 3, "4": 4 });
const value = instance.getItem("instance");
console.log("instance", value);

summary

The specific logic of realizing singleton pattern through static members (static methods / static attributes) in typescript is simply realized: firstly, the important characteristics of singleton pattern: single instance; Then how to ensure that a class has and only has one instance?

• Provide a static attribute or static method externally;
• Instantiate the singleton when the class is mounted or manually instantiate the singleton through the provided static method

Maybe you wonder why the single example is not directly put on the prototype? But on the static members of the class? The premise here is to know the static members of the class and the prototype mechanism in JavaScript!

references

• https://github.com/shanejix/front-end-playground/tree/master/04-singleton-typescript

Author: shanejix
source: https://www.shanejix.com/TypeScript Singleton mode in/
Copyright: this work adopts "Signature - non commercial use - share 4.0 international in the same way" License under the license agreement.
Statement: please indicate the source for reprint!