JS设计模式之单例模式

最新推荐文章于 2024-05-06 02:39:10 发布

miracle_mf

最新推荐文章于 2024-05-06 02:39:10 发布

阅读量97

点赞数 1

分类专栏： javascript 知识点文章标签：设计模式单例模式

本文链接：https://blog.csdn.net/mf_9_5_2_7/article/details/87024621

版权

知识点同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

javascript

11 篇文章 0 订阅

订阅专栏

单例模式：

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

//如果实例不存在，则生成一个实例，如果实例存在，则返回这个实例

var singleTon = (function(){
				var _instance = null;
				function Foo(){
					var privateProp = "私有属性";
					this.publicProp = "实例属性";
					this.publicMethod = "实例方法";
				}
				return {
					getInstance:function(){
						
						if(!_instance){
							_instance = new Foo();
						}
				
						return _instance;
						
					}
					
				}				
    })();

console.log(singleTon.getInstance());//Foo
console.log(singleTon.getInstance()==singleTon.getInstance());//true

下面是单例模式的一个应用（只是为了加强理解，实际应用中一般不这样写）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.popBox{
				width: 400px;
				height: 400px;
				background: red;
			}
		</style>
	</head>
	<body>
		<input type="button" value="弹出框" id="btn">
		<script type="text/javascript">
			function PopBox(){
				this.box = document.createElement("div");
				this.box.className = "popBox";
				document.body.appendChild(this.box);
			}
			(function(){
			
				let oBtn = document.getElementById("btn");
				var _instance = null;
				oBtn.onclick = function(){
					if(!_instance){
						_instance = new PopBox();
					}
					
				}
			})()
		</script>
	</body>
</html>

miracle_mf

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS设计模式之单例模式

单例模式：//保证一个类仅有一个实例，并且提供一个访问它的全局访问点。//如果实例不存在，则生成一个实例，如果实例存在，则返回这个实例 var singleTon = (function(){ var _instance = null; function Foo(){ var privateProp = "私有属性"; this.publicP...
复制链接

扫一扫