js design pattern -- singleton pattern

What is singleton mode

Ensure that a class has only one instance and provide a global access point to access it.

To implement the singleton pattern, you need a variable to mark whether an instance has been created. If an instance has been created, the previously created instance is returned. If not, the new instance will be returned.

The implementation method can consider closures, higher-order functions and so on.

We need to pay attention to the single variable principle: a class only focuses on one responsibility.

Singleton mode of javascript

javascript is a typeless language, so we only need a unique object without creating a class.

var

var global variable compliance ensures that there is only one instance and provides global access. Therefore, the global variable is not a singleton mode, but we can use the global variable as a singleton.

However, the extensive use of global variables is easy to cause namespace pollution, which is not conducive to multi person development. We can alleviate the problem by creating namespaces for global objects and using closures.

Inert single case

Lazy singleton means that an object instance is created only when necessary. Reduce the waste of nodes. For example, the login floating window of webQQ can only be used when we click login. If we create a floating window when the page is loaded, we just want to see the weather on the webQQ page without logging in, so a DOM node will be wasted for a long time.

<!DOCTYPE html>
<html>
<head>
	<title>Design pattern testing</title>
	<script type="text/javascript" src="./Singleton mode.js"></script>
</head>
<style type="text/css">
	
</style>
<body>
	<div class="box">
		<button id='btn'>Sign in</button>	
	</div>
</body>
<script type="text/javascript">
	
	var createDiv=(function() {
		var div=null;
		return function(){
			if(!div){
				div=document.createElement('div');
				div.innerHTML='Login float';
				div.style.display = 'none';
				document.body.appendChild(div);
			}

			return div;
		}
	})();
	document.getElementById('btn').onclick=function(){
		var login=createDiv();
		login.style.display='block';
	}
</script>

</html>

Consider the principle of single responsibility

<!DOCTYPE html>
<html>
<head>
	<title>Design pattern testing</title>
	<script type="text/javascript" src="./Singleton mode.js"></script>
</head>
<style type="text/css">
	
</style>
<body>
	<div class="box">
		<button id='btn'>Sign in</button>	
	</div>
</body>
<script type="text/javascript">
	var createDiv=function(){
		var	div=document.createElement('div');
		div.innerHTML='Login float 1';
		div.style.display = 'none';
		document.body.appendChild(div);
		return div;

	}

	var getSingle=function(fn){
		var element;
		return function(){
			return element||(element=fn.apply(this,arguments));
		}
	}

	var createSingleDiv=getSingle(createDiv);
	document.getElementById('btn').onclick=function(){
		var login=createSingleDiv();
		login.style.display='block';
	}
</script>

</html>

Tags: Design Pattern

Posted by brucensal on Wed, 18 May 2022 23:02:26 +0300