Introduction to Singleton Pattern of JavaScript Design Patterns

This article mainly introduces the singleton mode of JavaScript design pattern. The singleton mode is an object that has been instantiated in static access. This object can only be accessed through a unique entrance, either already instantiated or to be instantiated. The object of transformation, friends in need can refer to it.

Single-piece mode description

1. Description: Single-piece mode is an object that has been instantiated in static access , this object can only be accessed through a unique entrance, an object that has been instantiated or is to be instantiated; object-oriented languages ​​​​such as Java, .Net C# and other server-side dynamic languages ​​​​can ensure that class operations proceed smoothly and avoid parallelism. Operations may cause data confusion;

2. Benefits of singleton mode:

1) Reduce new operations to avoid speeding up frequent memory operations and occupying memory;
2) , Minimize the overhead of objects in large systems;
3) As mentioned above, it can ensure that certain types of operations are performed in an accurate sequence to avoid data anomalies caused by parallel processing;

Of course The benefits mentioned above are all in server-side language. In a weakly typed language like JavaScript, don’t worry so much, because the scripts are all operated on the client side, and there is no problem of operational conflicts; it is equivalent to you being the only one using the entire server, so don’t worry, your The question of who else will operate the data;

Instance source code

var Singleton = {
    instance: null,
    MailSender: function() {
        var self = this;
        self.to = '';
        self.title = '';
        self.content = '';
        self.send = function() {
             //send body
        }
    },
    getInstance : function() {
        if (this.instance == null) {
            this.instance = new Singleton.MailSender();
        }
        return this.instance;
    }
}

Usage:

var mail = Singleton.getInstance();
mail.to = 'toname#mail.com';
mail.title = '单件模式发送';
mail.content = '发送内容';

mail.send();

When some global frameworks, such as rich UI frameworks like DWZ, create a global Singleton, Singleton.instance has a value, and there is no need to create it again;

Of course, if it is written like this, It will be clearer, and it will be combined with the server-side language:

Singleton.getInstance().to = 'toname#mail.com';
Singleton.getInstance().title = '单件模式发送';
Singleton.getInstance().content = '发送内容';

Singleton.getInstance().send();

Other practical explanations

Where is the singleton mode more useful? For example, when there is a unified configuration file on the operation server, such as large-scale concurrent operations and the need to pay attention to the first-come, first-served situation, such as the operation process records of exchanges, etc., you can use the single-piece mode to operate;

In addition: Single mode method:

1. The above method is called lazy method

2. Hungry stick method:

var Singleton = {
    instance : new Singleton.MailSender(),
    MailSender : function() {
      var self = this;
      self.to = '';
      self.title = '';
      self.content = '';
      self.send = function() {
          //send body
      }
   },
   getInstance : function() {
        return this.instance;
   }
}

The usage method is the same;

Use closure method to create singleton mode and hide instance object

1. Code:

var Singleton = (function() {
    var instance = null;
    function MailSender() {
       this.to = '';
       this.title = '';
       this.content = '';
    }
    MailSender.prototype.send = function() {
       //send body
    }
    return {
       getInstance : function() {
          if (instance == null) {
             instance = new MailSender();
          }
          return instance;
       }
    }
})();

2. Usage:

//一样用法
var mail = Singleton.getInstance();
mail.to = 'toname#mail.com';
mail.title = '闭包式 单件模式发送';
mail.content = '发送内容';

mail.send();

The above is the entire content of this chapter. For more related tutorials, please visit JavaScript Video Tutorial!