<center>JavaScript单列模式</center>

最新推荐文章于 2023-03-31 14:47:24 发布

原创最新推荐文章于 2023-03-31 14:47:24 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 设计模式专栏收录该内容

5 篇文章

订阅专栏

本文深入讲解单例模式的概念，通过生动的例子如账号注册和登录弹框来解释其工作原理。并通过JavaScript代码演示如何在实际应用中实现单例模式，确保类的唯一实例并允许全局访问。

单例模式概念
首先什么是单例模式？可以这样理解：单例模式旨在保证一个类仅有一个实例，并提供一个全局的访问点。

可能有人还是不太理解单例的概念，那么你可以想象生活中的一些例子。比如注册账号的时候，如果我们注册的账号已经存在，那么系统会提示我们“账号已经存在是否使用该账号登陆”，我们无法再次创建一个一模一样的账号，除非把原账号注销。这就是单例模式的生动体现。

类似的例子还有网页上的登陆弹框，无论我们点击多少次登陆按钮，界面上始终只会显示一个登陆弹框，无法再创建第二个。

本文就将以登陆弹框为例介绍单例模式的使用方式。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			background: red;
		}
	</style>
</head>
<body>

<script type="text/javascript">

	//实战练习：  设计一个函数，创建一个弹出层。弹出层可以反复打开和关闭。 
	// function Popup(){
	// 	var div = document.createElement('div');
	// 	document.body.appendChild(div);
	// 	this.hide = function(){
	// 		div.style.display = "none";
	// 	};
	// 	this.show = function(){
	// 		div.style.display = "block";
	// 	}
	// };
	//下面对上面方法进行改进,单例模式要求new Popup()==new Popup(),本次还是没有实现单例模式
	 var Popup = (function(){
	 	var div = document.createElement('div');
	 	document.body.appendChild(div); 	
	 	return function(){
	 		this.hide = function(){
	 			div.style.display = "none";
	 		}
	 		this.show = function(){
	 			div.style.display = "block";
	 		}
	 	}
	 })();
	 console.log(new Popup()==new Popup())//false 通过闭包.并没有达到在同一个内存空间中
	// 再次改进
	var Popup = (function(){
		var div = document.createElement('div');
		document.body.appendChild(div);
		var instance = null;//返回的对象内存
		return function(name,age){
			if(instance==null){
				instance = {};
				instance.hide = function(){
					div.style.display = "none";
				}
				instance.show = function(){
					div.style.display = "block";
				}
			}
			return instance;			
		}
	})()

	// console.log(new Popup()==new Popup());true 达到效果

	//单例模式的好处
	function A(){
		var c = new Popup();//假设C是单例模式
		c.prop = 'xxxxx';
	}
	function B(){
		var c = new Popup();
		console.log(c.prop);

	}
	//单例模式:有一个构造函数:Conn,他的所有实例都指向同一个内存:节约内存,不同对象间属性可以共享

</script>
</body>
</html>