单例模式的思想在于保证一个特定类仅有一个实例,意味着当第二次使用同一个类创建新对象的时候,应该得到与第一次所创建对象完全相同的对象
例1.在闭包中实现–重写构造函数
function Universe(){
//缓存实例
var instance;
//重写该构造函数
Universe = function Universe(){
return instance;
}
//保留原型属性
Universe.prototype = this;
//实例
instance = new Universe();
//重置构造函数指针
instance.constructor = Universe;
//所有功能
instance.start_time = 0;
instance.bang = "Big";
return instance;
}
例2.将构造函数和实例包装在即时函数中
var Universe;
(function(){
var instance;
Universe = function Universe(){
if(instance){
return instance;
}
instance = this;
//所有功能
this.start_time = 0;
this.bang = "Big";
};
}());
例3.使用代理实现单例
var CreateDiv = function(html){
this.html = html;
this.init();
};
CreateDiv.prototype.init = function(){
var div = document.createElement('div');
div.innerHTML = this.html;
document.body.appendChild(div);
}
//代理类--使用代理来管理单例
var ProxySingletonCreateDiv = (function(){
var instance;
return function(html){
if(!instance){
instance = new CreateDiv(html);
}
return instance;
}
})();
var a = new ProxySingletonCreateDiv('sven1');
var b = new ProxySingletonCreateDiv('sven2');
alert(a == b);//true
例4 实践–惰性单例 -使用的时候去创建(类似登录框功能)
//惰性单例
var createLoginLayer = (function(){
var div;
return function(){
if(!div){
div = document.createElement('div');
div.innerHTML = '我是登录浮窗';
div.style.display = 'none';
document.body.appendChild(div);
}
return div;
}
})();
document.getElementById('loginBtn').onclick = function(){
var loginLayer = createLoginLayer();
loginLayer.style.display = 'block';
}
惰性单例优化-单一职责原则
//惰性单例优化-将职责区分开
var getSingle = function(fn){
var result;
return function(){
return result || (result = fn.apply(this,arguments));
}
}
var createLoginLayer = function(){
var div = document.createElement('div');
div.innerHTML = '我是登录浮空浮窗';
div.style.display = 'none';
document.body.appendChild(div);
return div;
};
var createSingleLoginLayer = getSingle(createLoginLayer);
document.getElementById('loginBtn').onclick = function(){
var loginLayer = createSingleLoginLayer();
loginLayer.style.display = 'block';
}
例5 实践–ajax动态加载数据
//应用于-ajax动态加载数据时,已绑定过的事件不再重复绑定,类似于Jquery的one函数功能
var getSingle = function(fn){
var result;
return function(){
return result || (result = fn.apply(this,arguments));
}
}
var bindEvent = getSingle(function(){
document.getElementById('div').onclick = function(){
alert('click');
}
return true;
});
var render = function(){
console.log('开始渲染列表');
bindEvent();
};
render();
render();
render();