JavaScript常用的设计模式.doc

JavaScript常用的设计模式
不管是弱类型或强类型，静态或动态语言，命令式或说明式语言、每种语言都有天生的优缺点。一个牙买加运动员，在短跑甚至拳击方面有一些优势，在练瑜伽上就欠缺一些。
AD：
《HYPERLINK"http://www.amazon.cn/gp/product/B005V9BBDK/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=B005V9BBDK&linkCode=as2&tag=vastwork-23"PracticalCommonLisp》的作者PeterSeibel曾说，如果你需要一种模式，那一定是哪里出了问题。他所说的问题是指因为语言的天生缺陷，不得不去寻求和总结一种通用的解决方案。
不管是弱类型或强类型，静态或动态语言，命令式或说明式语言、每种语言都有天生的优缺点。一个牙买加运动员，在短跑甚至拳击方面有一些优势，在练瑜伽上就欠缺一些。
术士和暗影牧师很容易成为一个出色的辅助，而一个背着梅肯满地图飞的敌法就会略显尴尬。换到程序中,静态语言里可能需要花很多功夫来实现装饰者，而js由于能随时往对象上面扔方法，以至于装饰者模式在js里成了鸡肋。
讲JavascriptHYPERLINK"http://www.amazon.cn/gp/product/B001130JN8/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&tag=vastwork-23&linkCode=as2&camp=536&creative=3200&creativeASIN=B001130JN8"设计模式的书还比较少，《HYPERLINK"http://www.amazon.cn/gp/product/159059908X/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&camp=536&creative=3200&creativeASIN=159059908X&linkCode=as2&tag=vastwork-23"ProjavaScriptDesignPatterns》是比较经典的一本，但是它里面的例子举得比较啰嗦，所以结合我在工作中写过的代码，把我的理解总结一下。如果我的理解出现了偏差，请不吝指正。
一单例模式
单例模式的定义是产生一个类的唯一实例，但js本身是一种“无类”语言。很多讲js设计模式的文章把{}当成一个单例来使用也勉强说得通。因为js生成对象的方式有很多种，我们来看下另一种更有意义的单例。
有这样一个常见的需求，点击某个按钮的时候需要在页面弹出一个遮罩层。比如web.qq.com点击登录的时候.

这个生成灰色背景遮罩层的代码是很好写的.
varcreateMask=function(){
returndocument.body.appendChild(document.createElement(div));
}

$('button').click(function(){
Varmask=createMask();
mask.show();
})
问题是,这个遮罩层是全局唯一的,那么每次调用createMask都会创建一个新的div,虽然可以在隐藏遮罩层的把它remove掉.但显然这样做不合理.
再看下第二种方案,在页面的一开始就创建好这个div.然后用一个变量引用它.
varmask=document.body.appendChild(document.createElement(''div'));
$(''button').click(function(){
mask.show();
})
这样确实在页面只会创建一个遮罩层div,但是另外一个问题随之而来,也许我们永远都不需要这个遮罩层,那又浪费掉一个div,对dom节点的任何操作都应该非常吝啬.
如果可以借助一个变量.来判断是否已经创建过div呢?
varmask;
varcreateMask=function(){
if(mask)returnmask;
else{
mask=document,body.appendChild(document.createElement(div));
returnmask;
}
}
看起来不错,到这里的确完成了一个产生单列对象的函数.我们再仔细看这段代码有什么不妥.
首先这个函数是存在一定副作用的,函数体内改变了外界变量mask的引用,在多人协作的项目中,createMask是个不安全的函数.另一方面,mask这个全局变量并不是非需不可.再来改进一下.
varcreateMask=function(){
varmask;
returnfunction(){