javascript学习(9)——[设计模式]单例

单例模式，相信大家对此都不陌生，我们主要讲下javascript中几个比较常见的设计模式：

（1）.普通的单体
（2）.具有局部变量的强大单体
（3）.惰性单体
（4）.分支单体

下面我们就一一进行介绍：

（1）普通的单体

/**
 * 单例模式在JS中使用非常的频繁
 * 通过确保单例对象只存在一个实例,
 * 你就可以确信自己在所有的代码中使用的是全局资源
 */
(function(){
	//先看来一个最简单的单体
	//例如用户登录后的信息可以用一个单体存储
	var UserInfo = {
		name:"hello",
		code:"00101",
		deptName:'PD',
		deptCode:'PD001',
		getName : function(){
			return "hello";
		}
	}
	alert(UserInfo.getName());
	//这就是一个最简单的单体
	//他用来换分命名空间,并且将一群相关的属性和方法组织到一起
	//我们可以用.来访问他
	var comm = {};
	comm.UserInfo = {
		name:"hello",
		code:"00101"
	}
	comm.funcInfo ={
		funcName:'',
		funcCode:""
	}
	//在大型的项目下,存在这你写的代码,还有你引用外界JS类库
	//还有其他同事写的代码和类库
	//我们通过单体模式就可以很好的区分他
	//这点你只能慢慢的体会了.........
})()

（2）具有局部变量的强大单体

/**
 * 单例模式在JS中使用非常的频繁
 * 通过确保单例对象只存在一个实例,
 * 你就可以确信自己在所有的代码中使用的是全局资源
 */
(function(){
	//模拟一个Ajax操作
	function Ajax(){}
	Ajax.request = function(url,fn){
		if(true){
			fn("abc","EXTJS4");
		}
	}
	//我们通过闭包的原理解决在01例子中出现的问题
	var UserInfo = (function(){
		//利用闭包是单体有自己的私有局部变量
		var name = "";
		var code = "";
		//利用Ajax访问数据库来取得数据
		Ajax.request("abc,function(n,c){
			name = n;
			code = c;
		})
		return {
			name:name,
			code:code
		}
	})()
	//实验
	alert(UserInfo.name)
})()

return的时候就是直接给你返回一个单例

（3）惰性单体

/**
 * 单例模式在JS中使用非常的频繁
 * 通过确保单例对象只存在一个实例,
 * 你就可以确信自己在所有的代码中使用的是全局资源
 */
(function(){
	//模拟一个Ajax操作
	function Ajax(){}
	Ajax.request = function(url,fn){
		if(true){
			fn("abc","EXTJS4");
		}
	}
	//我们同闭包的原理解决在01例子中出现的问题
	var UserInfo = (function(){
		var userInfo = "";//私有变量
		function init(){
			//利用闭包是单体有自己的私有局部变量
			var name = "";
			var code = "";
			//利用Ajax访问数据库来取得数据
			Ajax.request("abc",function(n,c){
				name = n;
				code = c;
			})
			return {
				name:name,
				code:code
			}
		}
		return {
			getInstance : function(){
				if(userInfo){
					return userInfo;
				}else{
					userInfo = init();
					return userInfo;
				}
			}
		}
	})()
	alert(UserInfo.getInstance().name)
})()

相对来说，到第三种方法，我们在上边看到我们java中编写单例的影子了

（4）分支单体

/**
 * 分支单体
 * 用处:
 * 在做Ajax的时候根据不同的浏览器获得不同的XHR(XMLHttpRequest)
 * 在不同分辨率的情况下初始化不一样的界面(PCAT2)
 */
(function(){
	//得到机器的分辨率
	var screenWidth = window.screen.width;
	var screenheigth = window.screen.heigth;
	var portalInfo = (function(){
		var $12801024 = {info:'1,2,3,5'}
		var $1024768 = {info:'4,2,1,2'}
		if(screenWidth == 1280){
			return $12801024;
		}else if(screenWidth == 1024){
			return $1024768;
		}
	})();
	alert(portalInfo.info);
})()
//这些并非 javascript的高深技术,是他的使用技巧

其中第四种方法，也在实际项目中也比较常用