javascript Design Pattern -- singleton pattern

Posted by alsal on Wed, 23 Oct 2019 18:24:04 +0200

The singleton mode is to ensure that a class has only one instance and provide a global access point to access it.

For example: the pop-up box is displayed only when the user clicks the button
Let's optimize step by step to achieve a better single instance mode
First: Click to create a new object at a time
Disadvantages: the effect of single instance is lost. When we click each time, we will create a new div.

<html> 
 <body> 
 	<button id="loginBtn">Sign in</button> 
 </body> 
<script> 
	 var createLoginLayer = function(){ 
		 var div = document.createElement( 'div' ); 
		 div.innerHTML = 'I am the login window'; 
		 div.style.display = 'none'; 
		 document.body.appendChild( div ); 
		 return div; 
	 }; 
	 document.getElementById( 'loginBtn' ).onclick = function(){ 
	 	var loginLayer = createLoginLayer(); 
	 	loginLayer.style.display = 'block'; 
	 }; 
</script> 
</html>

Second, use variables to determine whether there is a login floating window created
Advantages: single case of inertia
Disadvantage: this code still violates the principle of single responsibility. The logic of creating objects and managing single cases is put in createLoginLayer.
Object.

<html> 
 <body> 
 	<button id="loginBtn">Sign in</button> 
 </body> 
<script> 
	var createLoginLayer = (function(){ 
		 var div; 
		 return function(){ 
			 if ( !div ){ 
			 div = document.createElement( 'div' ); 
			 div.innerHTML = 'I am the login window'; 
			 div.style.display = 'none'; 
			 document.body.appendChild( div ); 
	 	} 
 		return div; 
 		} 
	})();
	 document.getElementById( 'loginBtn' ).onclick = function(){ 
	 	var loginLayer = createLoginLayer();  //Create a bomb box
	 	loginLayer.style.display = 'block';  //Display frame
	 }; 
</script> 
</html>

Third: logical separation between creating objects and managing singleton patterns (recommended)
Advantages: the responsibilities of managing single instance and creating object instance are put in two methods respectively. The two methods can be independent and have no influence on each other. When they are connected together, the function of creating unique instance object is completed.

<html> 
 <body> 
 	<button id="loginBtn">Sign in</button> 
 </body> 
<script> 
	// Manage the logic of a single instance
	var getSingle = function(fn){
		var result ;  //Save in closure
		return function(){
			return result || (result = fn.apply(this,arguments))
		}
	}
	//Create a marquee object
	var createLoginLayer = function(){ 
		 var div = document.createElement( 'div' ); 
		 div.innerHTML = 'I am the login window'; 
		 div.style.display = 'none'; 
		 document.body.appendChild( div ); 
		 return div; 
	};
	var createSingleLoginLayer = getSingle( createLoginLayer ); // Convert singleton mode
	 document.getElementById( 'loginBtn' ).onclick = function(){ 
	 	var loginLayer = createSingleLoginLayer();  //Create a bomb box
	 	loginLayer.style.display = 'block';  //Display frame
	 }; 
</script> 
</html>

No matter how many times you click, only once!

Conclusion: in getsingle function, the concepts of closure and higher-order function are also mentioned. The singleton pattern is simple but very real
The pattern used, especially the lazy singleton technique, creates objects only when appropriate, and creates only one. More wonderful
Yes, the responsibility of creating objects and managing singletons is distributed in two different methods, and the combination of the two methods has singleton module.
The power of.

Programmer Think

javascript Design Pattern -- singleton pattern

Hot Topics