This is the 16th day of my participation in Gwen Challenge

The singleton pattern is defined to ensure that a class has only one instance and provide a global access point to access it. The singleton pattern is a common pattern, and there are some objects that we usually only need one, such as thread pool, global cache, and so on.

A simple singleton pattern example

var Singleton = function(name) {
  this.name = name;
};

Singleton.prototype.getName = function() {
  return this.name;
};

Singleton.getInstance = (function() {
  var instance = null;
  return function(name) {
    if(! instance) {this.instance = new Singleton(name);
    }
    returninstance; }; }) ();var a = Singleton.getInstance("bob1");
var b = Singleton.getInstance("bob2");

console.log(a === b);  // true
Copy the code

Here we create a Singleton class, and when we create instances of this class, we always return only one instance. The singleton.getInstance method is used every time an instance is created, which is not in line with our daily practice of creating instances, so we need to modify it slightly.

A singleton pattern implemented by proxy

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var CreateDiv = function(html) {
        this.html = html;
        this.init();
      };

      CreateDiv.prototype.init = function() {
        var div = document.createElement("div");
        div.innerHTML = this.html;
        document.body.appendChild(div);
      };

      var ProxySingletonCreateDiv = (function() {
        var instance;
        return function(html) {
          if(! instance) { instance =new CreateDiv(html);
          }
          returninstance; }; }) ();var a = new ProxySingletonCreateDiv("bob1");
      var b = new ProxySingletonCreateDiv("bob2");

      console.log(a === b); // true
    </script>
  </body>
</html>
Copy the code

Here we use ProxySingletonCreateDiv to implement the class that creates the singleton pattern. Instances created through this method are products of the singleton pattern.

Generic lazy singleton

Lazy singleton refers to the lazy generation of instances. Instances are generated only when we call specific methods.

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // Generic singleton pattern
      // The instance is generated only when getSingle is called
      // Separate implementation methods for singletons and classes for ease of management
      var getSingle = function (fn) {
        var result;
        return function () {
          return result || (result = fn.apply(this.arguments));
        };
      };

      var CreateLoginLayer = function () {
        var div = document.createElement("div");
        div.innerHTML = "loginLayer";
        div.style.display = "none";
        document.body.appendChild(div);
        return div;
      };

      var createSingleLoginLayer = getSingle(CreateLoginLayer);

      var a = CreateLoginLayer();
      var b = CreateLoginLayer();
      var e = createSingleLoginLayer();
      var f = createSingleLoginLayer();

      console.log(a === b); // false
      console.log(e === f); // true
    </script>
  </body>
</html>
Copy the code

reference

[1] Zeng: JavaScript design patterns and development practices