[Javascript]单例模式（singleton ）

最新推荐文章于 2025-11-28 04:56:28 发布

转载最新推荐文章于 2025-11-28 04:56:28 发布 · 335 阅读

文章标签：

#javascript #function #null #html #scroll #border

javase 专栏收录该内容

806 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript单例模式实现一个拖拽列表控件，包括设计思路、代码实现和易用性考量。通过匿名包装器、事件委托等技巧，使得控件既具有灵活性又易于使用。

javascript中大家都很习惯用new运算符创建实例。现在看看另外一种创建实例的方法------单例模式。

单例模式的意思就是只有一个实例。单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例。

单例模式的特点有:

1,该类只有一个实例

2,该类自行创建该实例(在该类内部创建自身的实例对象)

3,向整个系统公开这个实例接口。

下面我们分析一下实现的可行性

第1个特点:javascript是不支持重载的,如果不能被new的话,多次调用会被覆盖所以第一点也很好实现

第2个特点:自行创建实例这点我们用匿名包装器也比较好实现

第2个特点:javascript是运行在宿主环境中的,我们向global对象公开就可以了,浏览器中window相当于global。

那么从上几点分析,是有可行性的。我们先实现一个雏形。我用一个拖拽列表控件来使用这个单例模式。

这是一个全局变量,我们可以用多种方式来做,如:

普通的:var sortlist=(function(){})();

文艺的:window.sortlist=(function(){})(); this.sortlist=(function(){})()

xxx的:sortlist=(function(){})();

文艺的第一种可以让大家一眼就看到他是一个全局变量。选取那种要看个人爱好和团队。

接下来设计我们的代码:

html和css部分

1.俗话说html是基石,我们先弄好骨架。

2.为了让html跟易用,给他穿上拉风的衣服。

万事具备现在来用脚本控制行为。

javascript部分

1.使用匿名包装器。

var sortlist=(function(window,doc,undefined){})(window,document);

这样处理一下,可以把全局变量都变成我们这个单例的局部变量,以避免运行时访问全局变量对象以提高效率。

接下来我们声明各种要使用到的变量。

var sortlist=(function(window,doc,undefined){

var lis=null,replace=null,origin=[0,0],parent=null,tag=null,tips=null,listwidth=0,toolkit={};

})(window,document);

toolkit是我常用的一个微型类库,有常用的事件处理方法和坐标计算模拟用户事件等等。

写程序时我们要考虑到程序的易用性,就是给使用的人不用考虑内部是怎样实现的,只要会调用就可以了。同时还要考虑到灵活性不能过分依赖结构,只要用一些简单的钩子就可以起到css,html,dom三者关联起来。符合这样条件的有id和class,简直太方便了。id与class既是html属性有可以当css的选择器有可以用dom的api来获取(getelementbyid/getelementsbyclassname/selector api)。可拖动的标签也要通过参数可配置这样才够灵活。

我们在单体里面返回一个匿名函数,单体执行以后我们通过配置返回函数的参数来生成实例。

var sortlist=(function(window,doc,undefined){

var lis=null,replace=null,origin=[0,0],parent=null,tag=null,tips=null,listwidth=0,toolkit={};

return function(o){

};

})(window,document);

2.设计方案

这个拖拽排序列表可能有多种实现方案,那么怎么自己去设计呢?

首先我们要使列表项成为可拖拽元素,因为他只要实现上下排序,所以我们只要处理他的top值就可以了,要实现这点要使这个元素绝对定位。这样有产生了一个问题,如果我们使一个列表项变为可绝对定位,那么他将不再占位这样会造成页面晃动。怎么处理这个问题呢?

我们在拖拽元素时克隆一下当前的元素当做占位,插入到当前元素的位置,并且在改元素移动时判断和其他列表项的位置关系,把他插入到相应的位置。释放鼠标时,用拖拽元素替换拖拽元素并移除拖拽元素。这样就解决了占位问题,用能够用做提示,一举两得这是不错。

有了理论做支持我们试着用代码去实现他。

3.如果在每个元素上绑定事件的话这样既浪费资源有不能解决动态添加的元素,事件委托是一个好同志。我们监听docment上的mousedown事件如果事件源在我们想要处理的范围内那么就派发事件处理程序。记录鼠标和元素的位置关系,以及该target和其他元素的位置关系。

var sortlist=(function(window,doc,undefined){

var lis=null,replace=null,..................,toolkit={.......};

function mousedownsortablelist(e){};

function creatreplaceelement(o,e,p){};

function mousemovecheckthreshold(e){};

return function(o){

};

})(window,document);

4.当鼠标按下并移动时,我们设置目标元素target的top值移动拖拽到相应位置,并且克隆一个target生成一个占位元素。判断占位元素的位置把他插入到相应位置。

5.当鼠标释放时,用target去替换占位元素,并且移除占位元素。

var sortlist=(function(window,doc,undefined){

var lis=null,replace=null,..................,toolkit={.......};

function mousedownsortablelist(e){};

function creatreplaceelement(o,e,p){};

function mousemovecheckthreshold(e){};

function mouseupcancelthreshold(e){};

return function(o){

};

})(window,document);

如果作为一个架构师,工作已经完成了。下面的部分可以交给小弟完成了。但是一般前这样的小控件是不好意思申请小弟的。下面的工作就是填入代码让程序跑起来,具体工作就不一步步演示了。直接上源码。

doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

html xmlns="http://www.w3.org/1999/xhtml">

head>

meta http-equiv="content-type" content="text/html; charset=utf-8" />

title>sortlisttitle>

style type="text/css">

ol{ list-style: url(none) none; }

li{ width: 200px; height: 30px; margin-bottom: 5px; color: #000; text-indent: 25px; font: bold 14px/30px arial, helvetica, sans-serif; background: #eee; border: 1px solid #ccc; border-ridus:5px; border-radius:25px; box-shadow: 4px 5px #fff inset; }

.tips { border:dashed 2px red;background:#eee; }

#prara p { border-radius:3px; background:#eee; padding: 10px; }

style>

head>

body>

ol id="list">

li>

ol>

div id="prara">

div>

script type="text/javascript">

var sortlist = function(window,doc,undefined){

var lis=null,replace=null,origin=[0,0],parent=null,tag=null,tips=null,listwidth=0,

toolkit={getevent:function(b){return b||window.event},gettarget:function(b){return b.srcelement||b.target},stopevent:function(b){b=toolkit.getevent(b);(b.returnvalue||b.preventdefault)&&(b.returnvalue=false||b.preventdefault());(b.cancelbubble||b.stoppropagation)&&(b.cancelbubble=false||b.stoppropagation())},getclinetrect:function(b){var g=b.getboundingclientrect(),c=(c={left:g.left,right:g.right,top:g.top,bottom:g.bottom,height:(g.height?g.height:(g.bottom-g.top)),width:(g.width?g.width:(g.right-g.left))});return c},getscrollposition:function(){var b=[0,0];window.pageyoffset?(b=[window.pagexoffset,window.pageyoffset]):(b=[document.documentelement.scrollleft,document.documentelement.scrolltop]);return b},addevent:function(f,e,d,c){var b=arguments.callee;f.attachevent&&(b=function(i,h,g){i.attachevent("on"+h,g)}).apply(this,arguments);f.addeventlistener&&(b=function(i,h,g){i.addeventlistener(h,g,c||false)}).apply(this,arguments);f["on"+e]&&(b=function(i,h,g){i["on"+h]=function(){g()}}).apply(this,arguments)},removeevent:function(f,e,d,c){var b=arguments.callee;f.detachevent&&(b=function(i,h,g){i.detachevent("on"+h,g)}).apply(this,arguments);f.removeeventlistener&&(b=function(i,h,g){i.removeeventlistener(h,g,c||false)}).apply(this,arguments);f["on"+e]&&(b=function(i,h,g){i["on"+h]=null}).apply(this,arguments)}};

function mousedownsortablelist(e){

e=toolkit.getevent(e);

var target=toolkit.gettarget(e),pos=null;

while(target.nodename.tolowercase()!==tag){

target=target.parentnode;

};

doc.currenttarget=target,pos=toolkit.getclinetrect(target),origin=[e.clientx-pos.left,e.clienty-pos.top],

listwidth=target.offsetwidth;

toolkit.addevent(doc,'mousemove', mousemovecheckthreshold, false);

toolkit.addevent(doc,'mouseup', mouseupcancelthreshold, false);

toolkit.stopevent(e);

};

function creatreplaceelement(o,e,p){

replace || (

replace=o.clonenode(true),

replace.style.csstext='height:'+(o.style.height-4)+'px;',

replace.classname=tips,

replace.innerhtml='放在这里?'

);

(p===-1) && e.parentnode.insertbefore(replace,e);

(p===1) && e.parentnode.insertbefore(replace,e.nextsibling);

};

function mousemovecheckthreshold(e){

e=toolkit.getevent(e);

var target=doc.currenttarget,i=lis.length,pos=null,scroll=toolkit.getscrollposition();

try{target.style.csstext='top:'+(e.clienty-origin[1]+scroll[1])+'px;position:absolute;z-index:100;opacity:.9;filter:alpha(opacity="90");width:'+listwidth+'px;overflow:hidden;';}catch(e){};

for(;i>0;){

lis[--i]!==target && (

pos=toolkit.getclinetrect(lis[i]),

((e.clienty>=pos.top) && (e.clientypos.bottom))&&(

creatreplaceelement(target,lis[i],e.clienty(pos.top+lis[i].offsetheight/2)?-1:1)

)

};

function mouseupcancelthreshold(e){

try{doc.currenttarget.style.csstext='';replace.parentnode.replacechild(doc.currenttarget,replace)}catch(e){};

toolkit.removeevent(doc,'mousemove',mousemovecheckthreshold,false);

toolkit.removeevent(doc,'mouseup',mouseupcancelthreshold,false);

doc.currenttarget=null,replace=null;

toolkit.stopevent(e);

};

return function(o){

parent=o.parent,tag=o.tag || 'li',tips=o.tips || 'sortlisttips';

if(!doc.getelementbyid(parent)) return false;

lis=doc.getelementbyid(parent).getelementsbytagname(tag);

var i=lis.length

for(;i>0;toolkit.addevent(lis[--i],'mousedown',mousedownsortablelist,false),lis[i].style.cursor='move'){};

};

}(window,document);

//sortlist({parent:"list",tag:"li",tips:'tips'});

sortlist({parent:"prara",tag:"p"});

//拖拽排序列表单例最好不要同时启用两个。

script>

body>

html>

注意这是一个单例实现的控件,所以一个页面上只能有一个实例,有两个当然也没大的问题。javascript没有重载导致覆盖。脚本内部也做了相应的容错,搞观看不同的实例,只能注释掉一个(当然移动调用顺序也可以)。大家都习惯了javascript的多实例,用构造函数创建一个类,用new运算符生成多个实例。这样使用一个单例的情况并不多,比如一个页面上今天可能用了一个选项卡,明天有可能有用两个。单例的局限性还是比较大的。要使用单例模式一定要明确单个window实例上是不是只使用一次某个功能,这样才适合使用单例。

这个例子是为了单例而单例的,当然也很容易改造成类式,有兴趣可以自己试一下。但是单例也有自己的优势,如果从其他语言转过来的同学,非常熟悉而且易上手,对原型继承不是很熟悉的可以尝试一下,关于单例的使用场景欢迎大家入群讨论职友集(7553571)。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/