JavaScript设计模式——单例模式(闭包实现)

前言

单例模式是一种常见的软件设计模式。我们都知道定义了一个类,通过 new 可以实例化出若干个对象,但是在某些场景下,我们希望一个类只能存在唯一的对象,比如购物车、登陆框、音乐播放页面的切换、redux 和 vuex 的 store等等,通过单例模式就可以满足这些场景的需求。


一、单例模式是什么?

保证一个类仅有一个实例,并提供一个访问它的全局访问点。

二、简单演示例子

使用闭包实现

原理:利用闭包在函数运行结束后,依然可以保存函数作用域中变量的特性,通过一个闭包函数检查该对象是否被创建,如果被创建就返回该对象,否则就先创建该对象再返回,这样就实现了一个类只能创建一个对象。

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单例模式</title>
	</head>
	<body>
		<div id="" >
			<button type="button" id="btn">创建单例</button>
		</div>
		
		<script type="text/javascript">
			
			// 创建登陆框
			let loginBox = function(){
            
     
				let div = document.createElement("div");
				div.innerHTML = "this is a loginLay";
				div.style.display = "none";
				document.body.appendChild(div);
				return div;
			}
			
			//相当于中间人角色,用闭包保存变量的特性来保证 loginBox 只执行一次
			let getSingle = function(fn){
            
     
				var result; //用来保存loginBox对象
				return function(){
            
     
					return result ||(result = fn.apply(this,arguments))
				}
			}
			
			var create = getSingle(loginBox);
			let btn = document.getElementById("btn").onclick = function(){
            
     
				let login = create();
				login.style.display = "block";
			}
		</script>
	</body>
</html>

总结

单例模式可以使用多种方式实现,在js中经常使用闭包实现。单例模式保证了系统内存中该类只存在一个对象,节省了系统资源,对于一些需要频繁创建销毁的对象,使用单例模式可以提高系统性能。

经验分享 程序员 微信小程序 职场和发展