设计模式(2)[JS版]---JavaScript如何实现单例模式?

目录

1 什么是单例模式?

2 单例模式的作用和注意事项

3 代码实现

4 案例应用

4.1 使用单例模式管理命名空间

 4.2 使用单例模式为不同命名空间的button按钮添加click事件,并且使他们之间能够互相通信


1 什么是单例模式?

单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果

存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。

在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一

的访问点来访问该对象。

2 单例模式的作用和注意事项

 作用:

1 模块间通信。

2 系统中某个类的对象只能存在一个。

3 保护自己的属性和方法。

注意事项:

1 注意this的使用。

2 闭包容易造成内存泄露,不需要的赶快干掉。

3 注意new的成本。(继承)

3 代码实现

JavaScript实现单例的方式很多种,只要符合定义即可。

/*
 *1 创建两个独立的对象,xiaoLiu和xiaoWang
 *2 让xiaoLiu和xiaoWang通过电话进行通信
 *3 让xiaoLiu发起通话;判断xiaoWang有没有电话,如果没有先创建电话
 *4 两个单例之间进行通信
 */
var xiaoWang = (function(argument) {
	var xiaoWangPhone = function(message) {
		this.lingsheng = message;
	}

	var phone;
	var info = {
		sendMessge: function(message) {
			if (!phone) {
				phone = new xiaoWangPhone(message);
			}
			return phone;
		}
	}
	return info;
})();

var xiaoLiu = {
	callXiaoWang: function(message) {
		var _xw = xiaoWang.sendMessge(message);
		alert(_xw.lingsheng);
		_xw = null; //等待垃圾回收
	}
}
xiaoLiu.callXiaoWang("请求通话");

4 案例应用

4.1 使用单例模式管理命名空间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		function Namespace(name){     
		    return window[name] || (window[name] = {});     
		}
		 
		(function(){
		           
		    var myNamespace1 = Namespace("myNamespace1");
		     
		    myNamespace1.method = function(){
		        console.log("XXXX");
		    };
		 
		}())
		 
		myNamespace1.method();
	</script>
</html>

 4.2 使用单例模式为不同命名空间的button按钮添加click事件,并且使他们之间能够互相通信

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单例应用</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			button {
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<button id="btna">按钮a</button>
		<button id="btnb">按钮b</button>
	</body>
	<script>
		//为不同命名空间的button按钮添加click事件,并且使他们之间能够互相通信
		var topHtml = {
			a: 4,
			init: function() {
				this.render();
				this.bind();
			},
			render: function() {
				var me = this;
				me.btna = document.getElementById("btna");
			},
			bind: function() {
				var me = this;
				me.btna.onclick = function() {
					//业务逻辑取出去
					me.test();
				}
			},
			test: function() {
				console.log(this.a);
				this.a = 5;
				console.log(this.a);
			}
		}


		var bottomHtml = {
			a: 1,
			b: 4,
			init: function() {
				this.render();
				this.bind();
			},
			render: function() {
				var me = this;
				me.btnb = document.getElementById("btnb");
			},
			bind: function() {
				var me = this;
				me.btnb.onclick = function() {
					//业务逻辑取出去
					me.test()
				}
			},
			test: function() {
				console.log(this.a);
				this.a = 3;
				console.log(this.a);
				
				console.log(this.b);
				this.b = 6;
				console.log(this.b);
				
				console.log(topHtml.a);
				topHtml.a = 15;
				console.log(topHtml.a);
			}
		}

		topHtml.init();
		bottomHtml.init();
	</script>
</html>

 

©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页