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的高深技术,是他的使用技巧

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