单例模式的在前端开发中的应用
公司项目中使用到了单例模式,于是撰文一篇。
单例模是Gof提出的一个简单的设计模式。
在前端项目中用到单例模式,给整个前端工程带来的优势是节省了浏览器的CPU的使用,在占用内存方面未必占有优势。
从算法的角度看来,算是以空间换时间的一个经典的例子。
常见的地方一般使用在,前端创建需要大量重复使用的一段具有类似功能DOM的时候。
例如微博中的转发的弹框。
让我们先来看看创建了这么一个转发弹框的基本流程。
a). 构建HTML
b). 拼装模板(插入一些动态数据)
c). 绑定自定义事件
d). 插入文档流
顺序可以改变。
这些流程的操作是需要消耗系统的CPU资源的。
让我们考虑在这个弹框足够复杂的情况下。
如果你使用的是chrome神器,自然不会感觉到速度上的差异。但是如果你使用的是IE6之流的老古董,会体验到明显的感觉到差异。
作为一个苦逼的前端,如果你开发的是像google,taobao那样的产品,那么恭喜你。你可以横着脑袋,翘着二郎腿对用户说“赶紧给老子去升级你的浏览器,否则滚蛋!”。
不过我相信98%的前端同学面临的选择题都是:要么用户留下,要么你滚蛋。
那你会选哪个捏?
开个玩笑,言归正传。
实现前端开发中的单例模式的方式有很多种,但是总体来说都是有着类似的思路。
即,在页面上执行一次需要的逻辑(例如上边所说的a, b, c步骤),将执行的结果进行缓存在一个闭包的变量中(防止污染全局变量)。而后,每次的调用只需要执行d步骤就可以了,如果有额外的逻辑,可能还要在d步骤之后或者之前再加上个b步骤(如果每次的展示界面略有差异的话)。
巴巴儿地扯了半天,就像我们浏览某榴网站一样,有些同学可能要抱怨了 —— “没代码你说个j8!“
于是,借花献佛的引用了在腾讯AlloyTeam【Javascript设计模式1】-单例模式中的代码。
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') );
})
按照我们所讲的a, b, c, d的四四中执行方式来讲,d步骤和b步骤进行了合并。这种方式并不是太好。
私下认为可以把调用方式改为如下,可能会更加形象。
var getMask = singleton(function() {
// 执行a, b, c步骤。
var mask = document.createElement('div');
console.log('A div has created for once !');
return mask;
});
var blankMask = getMask();
document.body.appendChild(blankMask);
window.setTimeout(function() {
blankMask.parentNode.removeChild(blankMask);
window.setTimeout(function() {
document.body.appendChild(getMask());
}, 1000);
}, 1000);
结语:
而前端环境的局限性在于变量的生存周期再一次页面的重新加载中。
而不像后台语言中能做到的那样,一次创建,随意使用。
使用单例模式,能使得代码更易于维护,再者算是满足了程序猿们的小小精神洁癖吧,哈哈,何乐而不为呢?
Enjoy it !
转载请注明出处
botobe.net
本文Github链接
2013.11.06
一切安好。
Merci !