首页 > 代码库 > js设计模式学习 --- 单例模式1

js设计模式学习 --- 单例模式1

2024-08-21 12:58:14   221人阅读

什么单例模式

定义： 保证一个类仅有一个实例，并提供一个访问它的全局访问。
单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如线程池、全局缓存、浏览器中的window 对象等。在JavaScript 开发中，单例模式的用途同样非常广泛。试想一下，当我们单击登录按钮的时候，页面中会出现一个登录浮窗，而这个登录浮窗是唯一的，无论单击多少次登录按钮，这个浮窗都只会被创建一次，那么这个登录浮窗就适合用单例模式来创建。  

实现单例模式

  1. <script type="text/javascript">		
  2. 	var CreateDiv = function(html){
  3. 		this.html = html;
  4. 		this.init();
  5. 	};
  6. 	CreateDiv.prototype.init = function(){
  7. 		var div = document.createElement(‘div‘);
  8. 		div.innerHTML = this.html;
  9. 		document.body.appendChild(div);
  10. 	};	
  11. 	/*为了满足单一职责，这里引入代理*/
  12. 	var ProxySingletonCreateDiv = (function(){
  13. 		var instance;
  14. 		return function(html){
  15. 			if(!instance){
  16. 				instance = new CreateDiv(html);
  17. 			}			
  18. 			return instance;
  19. 		}
  20. 	})();
  21. 	
  22. 	var a = new ProxySingletonCreateDiv(‘11‘);
  23. 	var b = new ProxySingletonCreateDiv(‘22‘);
  24. 	alert(a===b);
  25. </script>
为了实现单一职责，引入代理实现了单例，CreateDiv作为一个普通的类，ProxySingletonCreateDiv负责完成单例

JavaScript中的单例模式

在java中，想要实现单例模式，需要先定义一个类，然后创建实例， 在以类为中心的语言中，这是很自然的做法，然而，JavaScript中并无类的概念，生搬硬套并无意义。单例模式的核心是确保只有一个实例，并提供全局访问，既然是要创建一个唯一的对象，为什么一定要创建一个“类”呢？

在js中创建唯一的对象很简单
  1. var obj = {};
如果这句话放在全局作用域下，就满足了单例模式的两个条件。全局变量不是单例模式，但在开发中，我们经常会把全局变量当成单例使用。
但是全局变量很容易造成命名空间污染，在大型项目中，自己创建的对象很容被别人覆盖掉，所以开发中尽量少用全局变量，或者使用命名空间、闭包降低污染。
1.命名空间
  1. <script type="text/javascript">
  2. 	/*采用字面量创建*/
  3. 	var std = {
  4. 		foo: function(){
  5. 			alert (1);
  6. 		},
  7. 		bar:{
  8. 			str:‘hello world‘,
  9. 			say:function(){
  10. 				alert(this.str);
  11. 			}
  12. 		}
  13. 	};
  14. 	/*动态创建*/
  15. 	var com = {};
  16. 	com.namespace = function(name){
  17. 		var current = com,
  18. 			parts = name.split(‘.‘);				 
  19. 		for(var i in parts){
  20. 			if(!current[parts[i]]){
  21. 				current[parts[i]] = {};
  22. 			}
  23. 			current = current[parts[i]];
  24. 		}				 
  25. 	};
  26. 		
  27. 	com.namespace(‘demo‘);
  28. 	com.namespace(‘dom.style.display‘);
  29. 	console.log(com);
  30. 	/*相当于*/
  31. 	var com = {
  32. 		demo: {},
  33. 		dom: {
  34. 			style: {
  35. 				display:{}
  36. 			}
  37. 		}
  38. 	};
  39. </script>
2.采用闭包封装私有变量
  1. <script type="text/javascript">
  2. 	var user = (function(){
  3. 		var __name = ‘sven‘,
  4. 		__age = 29;
  5. 		return {
  6. 			getUserInfo: function(){
  7. 				return __name + ‘-‘ + __age;
  8. 			}
  9. 		}
  10. 	})();
  11. </script>
我们用下划线约定私有变量，他们被封装在闭包作用于中，外部无法访问，从而避免了全局命名空间污染

惰性单例














   


来自为知笔记(Wiz)


js设计模式学习 --- 单例模式1


联系
我们