常用Javascript设计模式.pdfVIP

常用的Javascript 设计模式 2013/04/02 | 分类： Web 前端, 开发 | 7 条评论 | 标签： Javascript, Web 前端, 设计模式 分享到： 62 原文出处： alloyteam 博客-svenzeng 欢迎加入Web 前端开发小组。 《Practical Common Lisp》的作者 Peter Seibel 曾说，如果你需要一种模 式，那一定是哪里出了问题。他所说的问题是指因为语言的天生缺陷，不得不 去寻求和总结一种通用的解决方案。 不管是弱类型或强类型，静态或动态语言，命令式或说明式语言、每种语言都 有天生的优缺点。一个牙买加运动员， 在短跑甚至拳击方面有一些优势，在练 瑜伽上就欠缺一些。 术士和暗影牧师很容易成为一个出色的辅助，而一个背着梅肯满地图飞的敌法 就会略显尴尬。 换到程序中, 静态语言里可能需要花很多功夫来实现装饰者， 而js 由于能随时往对象上面扔方法，以至于装饰者模式在js 里成了鸡肋。 讲 Javascript 设计模式的书还比较少，《Pro javaScript Design Patterns》是比较经典的一本，但是它里面的例子举得比较啰嗦，所以结合我 在工作中写过的代码，把我的理解总结一下。如果我的理解出现了偏差，请不 吝指正。 一 单例模式 单例模式的定义是产生一个类的唯一实例，但js 本身是一种“无类”语言。很 多讲js 设计模式的文章把{}当成一个单例来使用也勉强说得通。因为js 生成 对象的方式有很多种，我们来看下另一种更有意义的单例。 有这样一个常见的需求，点击某个按钮的时候需要在页面弹出一个遮罩层。比 如 点击登录的时候. 这个生成灰色背景遮罩层的代码是很好写的. JavaScript var createMask = function(){ 1 2 return 3 document,body.appendChild( document.createElement(div) ); 4 5 } JavaScript 1$( button ).click( function(){ 2 3 Var mask = createMask(); 4 5 mask.show(); 6 7}) 问题是, 这个遮罩层是全局唯一的, 那么每次调用createMask 都会创建一个新 的div, 虽然可以在隐藏遮罩层的把它remove 掉. 但显然这样做不合理. 再看下第二种方案, 在页面的一开始就创建好这个div. 然后用一个变量引用 它. JavaScript var mask = 1 document.body.appendChild( document.createElement( div ) ); 2 3 $( button ).click( function(){ 4 5 mask.show(); 6 7 } ) 这样确实在页面只会创建一个遮罩层div, 但是另外一个问题随之而来, 也许 我们永远都不需要这个遮罩层, 那又浪费掉一个div, 对dom 节点的任何操作 都应该非常吝啬. 如果可以借助一个变量. 来判断是否已经创建过div 呢? JavaScript var mask; 1 2 var createMask = function(){ 3 4 if ( mask ) return mask; 5 6 else{ 7 8 mask = 9 document,body.appendChild( document.createElement(div) ); 10 11 return mask; 12 13 } 14 15 } 看起来不错, 到这里的确完成了一个产生单列对象的函数. 我们再仔细看这段 代码有什么不妥. 首先这个函数是存在一定副作用的, 函数体内改变了外界变量mask 的引用, 在 多人协作的项目中, createMask 是个不安全的函数. 另一方面, mask 这个全局 变量并不是非需不可. 再来改进一下. JavaScript 1var createMask = function(){ 2 var mask; 3 return function(){ 4 return mask