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

港控/mmm° 2021-11-17 11:34 416阅读 0赞

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

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

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

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

<!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>