[Reading notes] JavaScript design pattern: Singleton mode

Singleton mode: guarantees that a class has only one instance and provides a global access point that can access it.

A simple and convenient way to do this is to use a variable to identify whether the current class has created an object, and if so, to return an object that has already been created, otherwise create a new object and return it.

varSingleton =function(name) { This. Name =name;  This. Instance =NULL;} Singleton.prototype.getName=function() {alert ( This. name);} Singleton.getinstance=function(name) {if(! This. Instance) {     This. Instance =NewSingleton (name); }  return  This. Instance}

However, there is a problem with this, that is, when using the Singleton class, you must refer to the API documentation, otherwise the user does not know that the object must be obtained through the getinstance () method rather than through new, which adds to the "opacity" of this class.

Modify the above implementation so that it becomes "transparent".

varSingleton = (function() {  varInstance =NULL; varSingleton =function(name) {if(!instance) {       This. Name =name; Instance= This; }    returninstance; } Singleton.prototype.getName=function() {alert ( This. Name)} returnSingleton;}) ()

The modified Singleton class does not differ from the other classes, as long as new Singleton (' name ') is available, but there is a small problem with the above notation, which is to do two things in the constructor of Singleton, One is to create objects and initialize variables such as name, and the second is to ensure that only one object exists in the class, violating the concept of "single responsibility Principle" in design principles. If you want to change singleton to a non-singleton class, you must modify the singleton constructor.

In order to make the responsibilities more clear, we introduce the proxy way to implement the singleton.

varManager =function(name) { This. Name =name;} Manager.prototype.getName=function() {alert ( This. name);}varSingleton = (function() {  varinstance; return function(name) {if(!instance) {Instance=NewManager (name)}returnInstance}}) ()

By introducing the proxy class, the responsibilities of each class are guaranteed to be single.

The above is a class way to create Singleton objects, in other languages often see such a notation, such as java,c#. But JavaScript is actually a non-class (Class-free) language, want an object, directly create it, there is no need to first create a class, and then create objects through the class, this is like wearing a warm-coat bathing. So a singleton based on "class" doesn't really work in JavaScript.

In the actual project often use the state of the box, in general, a page modal box is unique, the most common way to implement the following two ways:

1. The modal frame is created when the page is loaded, and of course the modal frame is hidden.
2. Create a modal box when you really need to display it

The

is simple in the first way, but may waste DOM elements because some users may not be able to use this modal box all the time. The second way is to use the lazy singleton that will be learned.

 var  getsingle = (function   () { var   instance;  return  function   (FN) { return  Instance | |  (Instance = fn.apply (this   var  createmodal = function  Span style= "color: #000000;" > () { var  div = document.createelement (' div '  );  div.innerhtml  = ' modal ' ;  Document.body.appendChild (DIV);  return   div;}  

The Getsingle method is extracted, not only can be used in createmodal,createxhr,createiframe and so on can be used in combination with Getsingle.

[Reading notes] JavaScript design pattern: Singleton mode