JavaScript设计模式——单例模式（闭包实现）

hap-captain

已于 2022-07-11 15:51:16 修改

阅读量494

点赞数

文章标签：单例模式 javascript 前端设计模式 es6

于 2022-05-27 21:16:46 首次发布

本文链接：https://blog.csdn.net/maoxiaoyon/article/details/125010639

版权

前言

单例模式是一种常见的软件设计模式。我们都知道定义了一个类，通过 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>