JavaScript设计模式之单例模式实例


Posted in Javascript onSeptember 24, 2014

《Practical Common Lisp》的作者 Peter Seibel 曾说,如果你需要一种模式,那一定是哪里出了问题。他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案。

不管是弱类型或强类型,静态或动态语言,命令式或说明式语言、每种语言都有天生的优缺点。一个牙买加运动员, 在短跑甚至拳击方面有一些优势,在练瑜伽上就欠缺一些。

术士和暗影牧师很容易成为一个出色的辅助,而一个背着梅肯满地图飞的敌法就会略显尴尬。 换到程序中, 静态语言里可能需要花很多功夫来实现装饰者,而js由于能随时往对象上面扔方法,以至于装饰者模式在js里成了鸡肋。

讲 Javascript 设计模式的书还比较少,《Pro javaScript Design Patterns》是比较经典的一本,但是它里面的例子举得比较??拢??越岷衔以诠ぷ髦行垂?拇?耄?盐业睦斫庾芙嵋幌隆H绻?业睦斫獬鱿至似?睿?氩涣咧刚??/p>

一、单例模式

单例模式的定义是产生一个类的唯一实例,但js本身是一种“无类”语言。很多讲js设计模式的文章把{}当成一个单例来使用也勉强说得通。因为js生成对象的方式有很多种,我们来看下另一种更有意义的单例。

有这样一个常见的需求,点击某个按钮的时候需要在页面弹出一个遮罩层。比如web.qq.com点击登录的时候.

JavaScript设计模式之单例模式实例

这个生成灰色背景遮罩层的代码是很好写的.

var createMask = function(){

return document,body.appendChild(  document.createElement(div)  );

}

$( ‘button' ).click( function(){

Var mask  = createMask();

mask.show();

})

问题是, 这个遮罩层是全局唯一的, 那么每次调用createMask都会创建一个新的div, 虽然可以在隐藏遮罩层的把它remove掉. 但显然这样做不合理.

再看下第二种方案, 在页面的一开始就创建好这个div. 然后用一个变量引用它.

var mask = document.body.appendChild( document.createElement( ”div' ) );

$( ”button' ).click( function(){

mask.show();

} )

这样确实在页面只会创建一个遮罩层div, 但是另外一个问题随之而来, 也许我们永远都不需要这个遮罩层, 那又浪费掉一个div, 对dom节点的任何操作都应该非常吝啬.

如果可以借助一个变量. 来判断是否已经创建过div呢?

var mask;

var createMask = function(){

if ( mask ) return mask;

else{

mask = document,body.appendChild(  document.createElement(div)  );

return mask;

}

}

看起来不错, 到这里的确完成了一个产生单列对象的函数. 我们再仔细看这段代码有什么不妥.

首先这个函数是存在一定副作用的, 函数体内改变了外界变量mask的引用, 在多人协作的项目中, createMask是个不安全的函数. 另一方面, mask这个全局变量并不是非需不可. 再来改进一下.

var createMask = function(){

var mask;

return function(){

return mask || ( mask = document.body.appendChild( document.createElement(‘div') ) )

}

}()

用了个简单的闭包把变量mask包起来, 至少对于createMask函数来讲, 它是封闭的.

可能看到这里, 会觉得单例模式也太简单了. 的确一些设计模式都是非常简单的, 即使从没关注过设计模式的概念, 在平时的代码中也不知不觉用到了一些设计模式. 就像多年前我明白老汉推车是什么回事的时候也想过尼玛原来这就是老汉推车.

GOF里的23种设计模式, 也是在软件开发中早就存在并反复使用的模式. 如果程序员没有明确意识到他使用过某些模式, 那么下次他也许会错过更合适的设计 (这段话来自《松本行弘的程序世界》).

再回来正题, 前面那个单例还是有缺点. 它只能用于创建遮罩层. 假如我又需要写一个函数, 用来创建一个唯一的xhr对象呢? 能不能找到一个通用的singleton包装器.

js中函数是第一型, 意味着函数也可以当参数传递. 看看最终的代码.

var singleton = function( fn ){

var result;

return function(){

return result || ( result = fn .apply( this, arguments ) );

}

}

var createMask = singleton( function(){

return document.body.appendChild( document.createElement(‘div') );

})

用一个变量来保存第一次的返回值, 如果它已经被赋值过, 那么在以后的调用中优先返回该变量. 而真正创建遮罩层的代码是通过回调函数的方式传人到singleton包装器中的. 这种方式其实叫桥接模式. 关于桥接模式, 放在后面一点点来说.

然而singleton函数也不是完美的, 它始终还是需要一个变量result来寄存div的引用. 遗憾的是js的函数式特性还不足以完全的消除声明和语句.

Javascript 相关文章推荐
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
iview table高度动态设置方法
Mar 14 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
vue 实现input表单元素的disabled示例
Oct 28 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 #Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 #Javascript
JavaScript获取图片真实大小代码实例
Sep 24 #Javascript
再探JavaScript作用域
Sep 24 #Javascript
深入理解javascript原型链和继承
Sep 23 #Javascript
深入理解javascript构造函数和原型对象
Sep 23 #Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 #Javascript
You might like
动态生成gif格式的图像要注意?
2006/10/09 PHP
php google或baidu分页代码
2009/11/26 PHP
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
PHP 魔术函数使用说明
2010/05/14 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
python zip文件 压缩
2008/12/24 Python
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
python3设计模式之简单工厂模式
2017/10/17 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
写求职信有哪些注意事项
2014/05/08 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
学校重阳节活动总结
2015/03/24 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
开业庆典致辞
2015/08/01 职场文书
Python Parser的用法
2021/05/12 Python
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android