javaScript设计模式与开发实践-单例模式

最新推荐文章于 2023-08-17 22:56:46 发布

web行路人

最新推荐文章于 2023-08-17 22:56:46 发布

203

分类专栏： javascript

本文链接：https://blog.csdn.net/qishuixian/article/details/73522471

版权

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

单例模式

声明：这个系列是阅读《JavaScript设计模式与开发实践》 —-曾探@著一书的读书笔记

一：单例模式定义

保证一个类仅有一个实例，并提供一个访问它的全局访问点，单利模式的核心是确保只有一个实例，并提供全局访问

1、实现单列模式

 <script>
    	var singleton = function(name){
    		this.name=name;
    	}
    	singleton.prototype.getName=function(){
    		alert(this.name);
    	}
    	singleton.getInStance=(function(){
    		var instance=null;
    		return function(name){
    			if(!instance){
    				instance=new singleton(name);
    			}
    			return instance;
    		}
    	})();
    	var a=singleton.getInStance('SSS');
    	var b=singleton.getInStance('BB');
    	alert(a===b);  //true
    </script>

二：惰性单列

1、惰性单列是指在需要的时候才创建对象实例。

singleton.getInStance=(function(){
    		var instance=null;
    		return function(name){
    			if(!instance){
    				instance=new singleton(name);
    			}
    			return instance;
    		}
    	})();

2、创建一个登陆浮窗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单例模式</title>
    <style>
        #red{border-left:50px solid red;}  
        #blue{border-left:50px solid blue;}  
        #green{border-left:50px solid green;}
    </style>
</head>
<body>
    <button id="loginBtn">登陆</button>
    <script>
    	var createLoginLayer=function(){
    		var div=document.createElement('div');
    		div.innerHTML='我是登陆浮窗';
    		div.style.display = 'none';
    		document.body.appendChild(div);
    		return div;
    	};
    	document.getElementById("loginBtn").οnclick=function(){
    		var loginlayer=createLoginLayer();
    		loginlayer.style.display='block';
    	}
    </script>
</body>
</html>

阅读终点，创作起航，您可以撰写心得或摘录文章要点写篇博文。去创作