js中singleton模式解析及运用
Posted 你不知道的sharlly
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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.singletonwidth:177px;height:110px;margin:100px auto;position:relative;
imgwidth:177px;height:110px;
img.realdisplay:block;
img.biggerposition:absolute;top:0px;left:0px;opacity:0
img.bigger:hoveropacity:1;cursor:pointer;z-index:100;
#picShadowbackground:#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;
#realDivposition:fixed;top:120px;left:283px;display:block;width:800px;height:400px;z-index:200;
#realPicdisplay:block;width:auto;height:auto;max-width:780px;max-height:380px;margin:0 auto;padding:5px;background-color:#fff;
#cancelPicdisplay: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>
以上是关于js中singleton模式解析及运用的主要内容，如果未能解决你的问题，请参考以下文章
Java设计模式—单例设计模式(Singleton Pattern)全然解析