单例模式

最新推荐文章于 2025-05-23 19:33:43 发布

原创最新推荐文章于 2025-05-23 19:33:43 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

60 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现单例模式的方法，通过具体实例展示了如何创建唯一的对象实例，并确保所有对象都可通过同一入口访问该实例。同时，还展示了两个全局变量间的交互方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

		<script>
		     /*单例模式 就是方便 模块间的相互调用*/
			// 外层函数只是为了自动执行，创建函数实例
			var xw = (function xiaoWang() {
				//创建类方法
				var sendMessage = function() {
					var infoClass = {
						setLian: function() {
							this.lian = "大脸";
							return this;
						},
						setZui: function() {
							this.zui = "大嘴";
							return this;
						}
					}
					return infoClass;
				}
				//创建实例，info这是暴露在外面的，相当于OBJECT-C中的static类变量
				var info = {
					createInstance: function() {
						var singleInstance = null;
						if (!singleInstance) {
							singleInstance = new sendMessage();
						}
						return singleInstance;
					}
				}
				return info;
			})();
			(function xiaoLi() {
				msg = xw.createInstance().setLian().setZui();
				console.log(msg);
				msg = null;
			}());
		</script>
	</head>

	<body>
		<button id="btna">按钮a</button>
		<button id="btnb">按钮b</button>
		<script>
			/*-------------单例模式也可以是 两个全局变量-----------*/
			var aInstance = {
				init: function() {
					this.render();
					this.binder();
				},
				a: 4,
				render: function() {
					var me = this;
					me.btna = $('#btna');
				},
				binder: function() {
					var me = this;
					me.btna.click(function() {
						me.test();
					});
				},
				test: function() {
					bInstance.b = 8;
					console.log(bInstance);
				}
			}
			
			
			var bInstance = {
				init: function() {
					this.render();
					this.binder();
				},
				b: 4,
				render: function() {
					var me = this;
					me.btnb = $('#btnb');
				},
				binder: function() {
					var me = this;
					me.btnb.on('click', (function() {
						me.test();
					}));
				},
				test: function() {
					aInstance.a = 7;
					console.log(aInstance);
				}
			}
			aInstance.init();
			bInstance.init();
		</script>
	</body>

</html>