工作中其实我们经常用到，只不过一直不知道他怎么称呼。如今重新认识一下，单例模式又称单体模式，是只允许实例化一次的对象。
1.非单例模式
通常，我们在写页面，比如活动页面，比如操作dom的时候会写一些公共的方法来方便我们自己使用，比如:
function addCss() {
var addStyle = "@-webkit-keyframes fall{from{-webkit-transform:translateY(0)}to{-webkit-transform:translateY(" + (mH - 100) + "px)}}\
@keyframes fall {from{transform:translateY(0)}to{transform:translateY(" + (mH - 100) + "px)}}";
document.getElementsByTagName('style')[0].insertAdjacentHTML('beforeEnd', addStyle);
}
function r(min, max) {
return ~~(Math.random() * (max - min) + min);
}
function $(id) {
//缓存
if (!window['_BC_' + id]) {
window['_BC_' + id] = document.getElementById(id);
}
return window['_BC_' + id];
}
2.单例模式
2.1 命名空间管理员
其实单例模式我们也经常用到，比如你最熟悉的jquery,他就为我们提供了一个命名空间jquery。
那么命名空间又是什么鬼？他就像人一样，每个人都有自己的空间，张三的空间就叫张三，李四的空间就叫李四，用名字来区别彼此。好比我们用jquery.animate()一样，是一个道理。这样我们就可以防止对象的重写，代码如下
var redpack = {
addClass:function(){},
$:function(){},
r:function(){}
}
2.2 模块分明
单例模式中，我们可以更清晰的定义模块，方便代码的维护和扩展。好比tangram中的代码
baidu.dom.addClass //添加元素类
baidu.dom.append
baidu.event.stopPropagation
2.3 创建小型代码库
2.4 无法修改的静态变量static
首先，js是不存在static的，但我们可以通过灵活的方式创建。我们只需要将变量定义在方法中，而不提供修改它的方法就可以了
var dl = (function() {
var cfg = {
a: 1,
b: 2
},
return {
get: function(param) {
return cfg[param] ? cfg[param] : '不存在';
}
}
})()
2.5 惰性单例
单例模式还有一种延迟创建方式，称为惰性创建。代码如下
var dl = (function() {
var instance = null;
function contain() {
return {
a: 1,
b: 2
}
};
return {
get: function() {
if (!instance) {
var test = contain();
}
return test
}
}
})()
惰性单例模式，可以节省初始加载时的开销，在需要的时候调用。
网友评论