js中singleton模式解析及运用
singleton模式，又名单例模式。顾名思义，就是只能实例化一次的类（javascript中没有真正的类，我们通常用函数来模拟类，习惯称之为"伪类"）。具体地说，singleton模式，就是在该实例不存在的情况下，可以通过可以方法创建一个类来实现创建类的新实例；如果实例已经存在，它会返回一个该对象的引用。
接下来我将用一个案列来将singleton模式进行分析。在我们的web网上通常会看到一些图片的放大查看，如下图:
当我的鼠标碰到图中的帅哥时，它会出现一个放大的图标(这里放大图标有点奇怪= = ！)，于是我们点击后会出现这样的画面如下图:
没错，放大后，就可以看到这个美男子的芳容了。这就是我给大家带来的例子，现在我们对所用到的js进行分析:(html,css部分忽略)
首先我们编写兼容各版本浏览器的事件函数(参考javascript高级程序设计的事件部分):这个示例中只会用到EventUtil中的adds函数。
var EventUtil = {
adds : function(element,type,func){
if(element.addEventListener){
element.addEventListener(type,func,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,func);
}else{
element["on"+type] = func;
}
},
removes : function(element,type,func){
if(element.removeEventListener){
element.removeEventListener(type,func,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,func);
}else{
element["on"+type] = null;
}
},
getEvent : function(event){
return event ? event : window.event;
},
getTarget : function(event){
return event.target || event.srcElement;
},
preventDefault : function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
stopPropagation : function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
}
function $(id){
return typeof id === "string" ? document.getElementById(id) : id;
}
接下来开始设计这个放大的功能。首先你会想到既然我要放大，那我肯定要有放大的图片以及放大图片所盛放的容器。没错，我们创建这些必定会用到一系列的Dom方法,这个稍后会见到。
当我们每次放大图片的时候有一个地方是不会变的,就是背景阴影和盛放图片的容器。每次都是一个背景的div和一个盛放图片的div对象在我们的浏览器中显示，然后关闭后显示。具体分析就是这个对象可以是唯一的，我只需要将它保存在缓存中，放大的时候将这个对象通过document.body.appendChild()方法将它载入到我们的页面，关闭的时候再使用removeChild()方法将它从页面移除(并不是从缓存移除),那我们如何保证每次调用这个对象时都是第一次调用时的对象呢？(这里说的可能有点复杂，简洁说就是每次都是调用最初的那个对象)。
这个时候singleton模式就可以很好的解决这个问题。回到刚刚所有的保存在缓存中，我们都很熟悉js等高级语言的垃圾回收机制，它采用引用计数的方式（参考javascript高级程序设计第四章）来进行内存管理。既然我们需要这个对象始终保持唯一，那么就需要将这个对象始终保存在缓存，也就是说不然它被回收，那我们应该怎么做到呢?
闭包。没错，我们可以采用闭包(singleton模式的建立依赖闭包，这个概念就不提了)。于是我们可以采取如下的方法实现:
var showBig = (function(){
var listen; //作为对象的引用
function initial(){
var listen_2,listen_3;
function createBgShadow(){
//先不考虑这里的代码
}
function createBgCenterDiv(){
//先不考虑这里的代码
}
return{
create : function(){
//先不考虑这里的代码
},
removes : function(){
//先不考虑这里的代码
}
}
}
return{
getShadow : function(){
if(!listen){ //如果listen没有引用这个对象，那么就调用一次initial方法。若引用了，则直接跳过
listen = initial();
}
return listen; //返回这个对象（或者对象的引用）
},
getPic : function(picUrl){
//先不考虑这里的代码
}
}
})();
上述代码中可以看到，为了保存我要保留在内存中的对象，我使用了一个Listen作为我的监听器(我个人称之为监听器，本意为这个对象的引用)。因为Listen在闭包环境中，当第一次返回Initial()方法后，listen始终带有initial()方法所返回的对象，当第二次或者以后再次调用时，listen并未从内存中消失，因此直接返回内存中的listen即可。
而我们要返回的是一个背景阴影对象，就可以这么做:
function createBgShadow(){
//阴影背景的创建
var shadowBg = document.createElement("div");
shadowBg.setAttribute("id","picShadow");
return shadowBg;
}
function createBgCenterDiv(){
//盛放图片的容器的创建
var shadowBgCenterDiv = document.createElement("div");
shadowBgCenterDiv.setAttribute("id","realDiv");
//放大之后的图片的创建
var shadowBgCenterPic = document.createElement("img");
shadowBgCenterPic.setAttribute("src","");
shadowBgCenterPic.setAttribute("id","realPic");
shadowBgCenterDiv.appendChild(shadowBgCenterPic);
//取消放大的图片(那个×)的创建
var cancel = document.createElement("img");
cancel.setAttribute("id","cancelPic");
cancel.setAttribute("src","img/cancel.png");
shadowBgCenterDiv.appendChild(cancel);
return shadowBgCenterDiv;
}
//注意它们都返回了一个DOM的节点对象。这一步很关键。
然后将这两个对象保存在Listen_2,listen_3中，同样他们也要和initial()一样，保存在内存中。于是我们可以这么做:
return{
//create()方法将节点加入到html页面
create : function(){
if(!listen_2 || !listen_3){
//listen2保存阴影背景的节点
listen_2 = createBgShadow();
//listen3保存图片以及图片容器的节点
listen_3 = createBgCenterDiv();
}
//由于listen_2和Listen_3也使用闭包，始终保存在内存中，这里也只会创建一次对象
document.body.appendChild(listen_2);
document.body.appendChild(listen_3);
},
//removes()方法将节点移出html页面
removes : function(){
var picShadow = $("picShadow");
var realDiv = $("realDiv");
document.body.removeChild(picShadow);
document.body.removeChild(realDiv);
}
}
这时候已经很明确了singleton模式的作用，它避免了多次创建重复的对象，将我们可以反复使用的对象只创建一次。我们用listen,listen_2,listen_3来保存了这些我们需要反复使用的对象。singleton模式利用闭包可以更快速的创建我们需要的应用，但是这些对象也会一直保存在我们的内存中，所以singleton模式是有它自己的适用范围的，重点突出一个"单"字。
简单的总结一下singleton模式:
1.singleton模式是javascript最基本，最有用的模式之一，它提供了一种将代码组织为一个逻辑单元的手段，这个逻辑单元中的代码通过单一的变量进行访问。(通过单一的接口进行访问，这里是第一个单例中的create()接口和第二个单例中的getShadow()接口)
2.singleton模式可以用来划分命名空间，以减少全局变量的泛滥。(上述我们只是用了一个showBig的全局变量)
3.singleton模式通过js的闭包特性反复引用内存中的同一对象，使运用程序更快速的执行。
4.singleton模式的弊端在于提供的是一种单点访问，可能导致模块间的强耦合(我们的程序遵守高内聚低耦合的原则)。在选择这种模式的时候应该考虑到这种情况。并不是所有情况都要选择它，而是先分析好。
完整代码如下(测试时不要忘了修改图片的url):
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<style type="text/css">
*{margin:0px;padding:0px;}
div.singleton{width:177px;height:110px;margin:100px auto;position:relative;}
img{width:177px;height:110px;}
img.real{display:block;}
img.bigger{position:absolute;top:0px;left:0px;opacity:0}
img.bigger:hover{opacity:1;cursor:pointer;z-index:100;}
#picShadow{background:#555;position:fixed;top:0px;left:0px;width:100%;height:100%;filter:alpha(opacity=70);opacity:0.7;-moz-opacity:0.7;z-index:100;}
#realDiv{position:fixed;top:120px;left:283px;display:block;width:800px;height:400px;z-index:200;}
#realPic{display:block;width:auto;height:auto;max-width:780px;max-height:380px;margin:0 auto;padding:5px;background-color:#fff;}
#cancelPic{display:block;width:auto;height:auto;margin:0 auto;cursor:pointer;}
</style>
</head>
<body>
<div class="singleton">
<img class="real" id="real" src="img/cjy.jpg"/>
<img class="bigger" id="bigger" src="img/bigger.png"/>
</div>
</body>
<script type="text/javascript">
/* 兼容事件对象 */
var EventUtil = {
adds : function(element,type,func){
if(element.addEventListener){
element.addEventListener(type,func,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,func);
}else{
element["on"+type] = func;
}
},
removes : function(element,type,func){
if(element.removeEventListener){
element.removeEventListener(type,func,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,func);
}else{
element["on"+type] = null;
}
},
getEvent : function(event){
return event ? event : window.event;
},
getTarget : function(event){
return event.target || event.srcElement;
},
preventDefault : function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
stopPropagation : function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
}
function $(id){
return typeof id === "string" ? document.getElementById(id) : id;
}
//单例
var showBig = (function(){
var listen;
function initial(){
var listen_2,listen_3;
function createBgShadow(){
var shadowBg = document.createElement("div");
shadowBg.setAttribute("id","picShadow");
return shadowBg;
}
function createBgCenterDiv(){
var shadowBgCenterDiv = document.createElement("div");
shadowBgCenterDiv.setAttribute("id","realDiv");
//放大图片
var shadowBgCenterPic = document.createElement("img");
shadowBgCenterPic.setAttribute("src","");
shadowBgCenterPic.setAttribute("id","realPic");
shadowBgCenterDiv.appendChild(shadowBgCenterPic);
//创建取消放大的图片
var cancel = document.createElement("img");
cancel.setAttribute("id","cancelPic");
cancel.setAttribute("src","img/cancel.png");
shadowBgCenterDiv.appendChild(cancel);
return shadowBgCenterDiv;
}
return{
create : function(){
if(!listen_2 || !listen_3){
listen_2 = createBgShadow();
listen_3 = createBgCenterDiv();
}
document.body.appendChild(listen_2);
document.body.appendChild(listen_3);
},
removes : function(){
var picShadow = $("picShadow");
var realDiv = $("realDiv");
document.body.removeChild(picShadow);
document.body.removeChild(realDiv);
}
}
}
return{
getShadow : function(){
if(!listen){
listen = initial();
alert("1");
}
return listen;
},
getPic : function(picUrl){
var realPic = $("realPic");
realPic.setAttribute("src",picUrl);
}
}
})();
//事件处理
//为方便这里不做平稳退化
var bigger = $("bigger");
var gS_1 = showBig;
EventUtil.adds(bigger,"click",function(event){
gS_1.getShadow().create();
gS_1.getPic($("real").src);
//这里做一个关闭检测
if($("cancelPic")){
var cancelPic = $("cancelPic");
EventUtil.adds(cancelPic,"click",function(event){
gS_1.getShadow().removes();
});
}
});
</script>
</html>
