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

最新推荐文章于 2023-05-07 10:53:48 发布

Albert Yang

最新推荐文章于 2023-05-07 10:53:48 发布

阅读量2.7k

点赞数 43

分类专栏： JS 设计模式学习笔记文章标签： js 设计模式 js单例模式

本文链接：https://blog.csdn.net/qq_23853743/article/details/107451561

版权

学习笔记同时被 3 个专栏收录

52 篇文章 3 订阅

订阅专栏

23 篇文章 7 订阅

订阅专栏

设计模式

14 篇文章 4 订阅

订阅专栏

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>

Albert Yang

关注

43
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
17
评论
设计模式(2)[JS版]---JavaScript如何实现单例模式？

目录1 什么是单例模式？2单例模式的作用和注意事项3代码实现4案例应用4.1 使用单例模式管理命名空间4.2 使用单例模式为不同命名空间的button按钮添加click事件，并且使他们之间能够互相通信1 什么是单例模式？单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。在JavaScript里，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一的访问点来访...
复制链接

扫一扫