单例形式
定义: 保证一个类只要一个实例,并供应一个接见它的全局接见点。
var single = function(name){
this.name = name;
this.instance = null;
}
single.prototype.getName = function(){
alert(this.name)
}
single.getInstance = function(name){
if(!this.instance){
this.instance = new single(name)
}
return this.instance
}
var a = new single.getInstance('ffff');
var a2 = new single.getInstance('zzzz');
// a == a2 => true
或许
var single = function(name){
this.name = name;
}
single.prototype.getName = function(){
console.log(this.name)
}
single.getInstance = (function(){
var instance = null;
return function(name){
if(!instance){
instance = new single(name)
}
return isntance
}
})()
运用single类时,我们必需晓得它是一个单例类,跟以往new出一个新对象的体式格局差别,这里要运用single.getInstance来猎取对象。
通明的单例
var createDiv = (function(){
var instance = null;
var createDiv = function(html){
if(instance) return instance
this.html = html;
this.init()
return instance = this;
}
createDiv.prototype.init = function(){
var div = document.createElement('div')
div.innerHTML = this.html;
document.body.appendChild(div)
}
return createDiv
})()
这个通明类的单例,我们运用了自实行函数和闭包,而且让这个匿名函数返回真正的single组织要领,增加了代码的复杂度,读起来须要肯定的时刻来明白
组织函数的作用,现实上做了两件事,建立对象和实行初始化init要领,第二保证了只要一个对象
用代办来完成单例形式
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 proxySingle = (function(){
var instance;
return function(html){
if(!instance){
instance = new createDiv(html)
}
return instance
}
})()
经由过程代办形式完成的代码,我把治理单例的逻辑移到了proxySingle里,如许createDiv就变成了一个一般的类
这个例子是缓存代办的运用之一。
惰性单例
惰性单例指的是在须要的时刻才建立对象实例。
这类手艺在现实开辟中非常有效。
在网站首页,有个上岸按钮,点击登录 弹出登录框。很明显这个登录框在页面中是唯一的,不会也不可能涌现两个上岸框。
起首我们能够页面加载完成时就加载这个登录框,此时这个登录框出于隐蔽状况。
然则假如我进入页面只是想看看,不想举行一些须要上岸的营业操纵,此时上岸框的dom节点存在是没有意义的,是一种糟蹋。
此时,单例形式就更实用了
//dom
<button id="login"></button>
//js
var createLogin = (function(){
var div;
return function(){
if(!div){
div= document.createElement('div');
div.innerHTML = "i'm login form";
div.display.style="none";
document.body.appendChild(div);
return div
}
}
})()
document.getElementById('login').onClick = function(){
var loginDom = createLogin();
loginDom.display.style ='block'
}
通用惰性单例
我们参考上边的代码,假如须要在建立一个iframe单例,或许其他标签,岂非须要把上边的函数从新copy一份修正.单例的逻辑能够笼统出来,而且始终不变的,能够明白为
var instance;
if(!instance){
instance = xxx操纵
}
return instance
我们将治理单例的逻辑笼统封装起来getInstance
var getInstance = function(fn){
var instance;
return function(){
return instance || (result = fn.apply(this,arguments))
}
}
//建立上岸
var createLogin = getInstance(function(){
var div = document.createElement('div');
div.innerHTML = '我是的上岸';
div.style.display = 'none';
document.body.appenChild(div);
return div
})
//
$('#login').on('click',function(){
var login = createLogin();
$(login).show()
})
//建立script
var createScript = getInstance(function(){
var script = document.createElement('script');
document.appendChild(script)
return script
})
$('#loadScript').on('click',function(){
var script = createScript();
$(script).show();
})
将建立实例对象的职责和治理单例的职责离别安排在两个要领里,这两个要领自力,不会相互影响。