這篇文章給大家分享的是有關(guān)js單例模式如何實現(xiàn)模態(tài)框的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
什么是單例呢？
單，就是一個的意思。例：就是實例化出來的對象，那合在一起就是保證一個構(gòu)造函數(shù)只能new出一個實例，為什么要學(xué)習(xí)單例模式呢？或者說單例模式有哪些常見的應(yīng)用場景.它的使用還是很廣泛，比如：彈出一個模態(tài)框，一般來說在網(wǎng)站中彈出的模態(tài)框，不停的一直點(diǎn)擊，一般只能創(chuàng)建一個。還有后臺的數(shù)據(jù)庫連接，一般都是保證一個連接等等。今天的主題就是單例在模態(tài)框中的應(yīng)用，我們先要搞清楚，怎么弄個單例出來.
我們先看下普通的構(gòu)造函數(shù)加原型方式。下面這種是常見的方式
重慶分公司
重慶分公司
function Singleton ( uName ){
this.userName = uName;
this.ins = null;
}
Singleton.prototype.showUserName = function(){
return this.userName;
}
var obj1 = new Singleton( 'ghostwu' );
var obj2 = new Singleton( 'ghostwu2' );
console.log( obj1 === obj2 ); //false每次new都會在內(nèi)存中生成一塊新的內(nèi)存區(qū)域保存新的實例，所以這種方式就不能保證只能new出一個單例，所以，我們想要創(chuàng)建一個單例，就要能夠控制new創(chuàng)建實例的過程?。?！，這就是單例的關(guān)鍵，那么要控制這個過程，肯定不能讓用戶直接調(diào)用構(gòu)造函數(shù)，所以我們要另外想辦法.
第一種辦法： 在函數(shù)中添加一個靜態(tài)方法，來控制創(chuàng)建實例的過程
function Singleton ( uName ){
this.userName = uName;
}
Singleton.prototype.showUserName = function(){
return this.userName;
}
Singleton.getInstance = function( uName ){
if ( !this.ins ) {
this.ins = new Singleton( uName );
}
return this.ins;
}
var obj1 = Singleton.getInstance( 'ghostwu' );
var obj2 = Singleton.getInstance( 'ghostwu2' );
console.log( obj1 === obj2 ); //true第8行判斷ins這個變量是否保存了一個實例，如果沒有就new一個，否則直接返回。第二次在調(diào)用的時候，由于已經(jīng)存在了ins，所以直接返回，就不需要在new了，這要就能確保是單例
第二種辦法：利用閉包和立即表達(dá)式的特性
function Singleton ( uName ){
this.userName = uName;
}
Singleton.prototype.showUserName = function(){
return this.userName;
}
Singleton.getInstance = (function(){
var ins = null;
return function( uName ) {
if ( !ins ) {
ins = new Singleton( uName );
}
return this;
}
})();
var obj1 = Singleton.getInstance( 'ghostwu' );
var obj2 = Singleton.getInstance( 'ghostwu2' );
console.log( obj1 === obj2 );這兩種方法都可以，接下來，我就選擇第二種方法來實現(xiàn)彈出單一的模態(tài)框
三、傳統(tǒng)面向?qū)ο蠓绞?，每次點(diǎn)擊都會彈出新的模態(tài)框
樣式：
div {
width: 200px;
height: 200px;
border:1px solid #09f;
box-shadow: 2px 2px 1px #666;
position: absolute;
}html:
js部分：
var oBtn = document.querySelector("input"),
offset = 20, index = 1;
function Module( pos ){
this.offset = pos || 20;
}
Module.prototype.create = function(){
var oDiv = document.createElement( "div" );
oDiv.style.left = ( ++index ) * offset + 'px';
oDiv.style.top = ( ++index ) * offset + 'px';
oDiv.innerHTML = 'ghostwu教你用設(shè)計模式實戰(zhàn)';
return oDiv;
}
oBtn.onclick = function(){
var oDiv = new Module();
document.body.appendChild( oDiv.create() );
}
四，用單例改造
html:
