[js高手之路]設計模式系列課程-單例模式實現模態框
阿新 • • 發佈:2017-08-31
ges 點擊 eat abs select nbsp str osi 控制
什麽是單例呢?
單,就是一個的意思。例:就是實例化出來的對象,那合在一起就是保證一個構造函數只能new出一個實例,為什麽要學習單例模式呢?或者說單例模式有哪些常見的應用場景.它的使用還是很廣泛,比如:彈出一個模態框,一般來說在網站中彈出的模態框,不停的一直點擊,一般只能創建一個。還有後臺的數據庫連接,一般都是保證一個連接等等。今天的主題就是單例在模態框中的應用,我們先要搞清楚,怎麽弄個單例出來.
我們先看下普通的構造函數加原型方式。下面這種是常見的方式
1 function Singleton ( uName ){ 2 this.userName = uName;3 this.ins = null; 4 } 5 Singleton.prototype.showUserName = function(){ 6 return this.userName; 7 } 8 var obj1 = new Singleton( ‘ghostwu‘ ); 9 var obj2 = new Singleton( ‘ghostwu2‘ ); 10 console.log( obj1 === obj2 ); //false
每次new都會在內存中生成一塊新的內存區域保存新的實例,所以這種方式就不能保證只能new出一個單例,所以,我們想要創建一個單例,就要能夠控制new創建實例的過程!!!,這就是單例的關鍵,那麽要控制這個過程,肯定不能讓用戶直接調用構造函數,所以我們要另外想辦法.
第一種辦法: 在函數中添加一個靜態方法,來控制創建實例的過程
1 function Singleton ( uName ){ 2 this.userName = uName; 3 } 4 Singleton.prototype.showUserName = function(){ 5 return this.userName; 6 } 7 Singleton.getInstance = function( uName ){ 8 if( !this.ins ) { 9 this.ins = new Singleton( uName ); 10 } 11 return this.ins; 12 } 13 14 var obj1 = Singleton.getInstance( ‘ghostwu‘ ); 15 var obj2 = Singleton.getInstance( ‘ghostwu2‘ ); 16 console.log( obj1 === obj2 ); //true
第8行判斷ins這個變量是否保存了一個實例,如果沒有就new一個,否則直接返回。第二次在調用的時候,由於已經存在了ins,所以直接返回,就不需要在new了,這要就能確保是單例
第二種辦法:利用閉包和立即表達式的特性
1 function Singleton ( uName ){ 2 this.userName = uName; 3 } 4 Singleton.prototype.showUserName = function(){ 5 return this.userName; 6 } 7 Singleton.getInstance = (function(){ 8 var ins = null; 9 return function( uName ) { 10 if ( !ins ) { 11 ins = new Singleton( uName ); 12 } 13 return this; 14 } 15 })(); 16 17 var obj1 = Singleton.getInstance( ‘ghostwu‘ ); 18 var obj2 = Singleton.getInstance( ‘ghostwu2‘ ); 19 console.log( obj1 === obj2 );
這兩種方法都可以,接下來,我就選擇第二種方法來實現彈出單一的模態框
三、傳統面向對象方式,每次點擊都會彈出新的模態框
樣式:
1 div { 2 width: 200px; 3 height: 200px; 4 border:1px solid #09f; 5 box-shadow: 2px 2px 1px #666; 6 position: absolute; 7 }
html:
1 <input type="button" value="彈窗">
js部分:
1 var oBtn = document.querySelector("input"), 2 offset = 20, index = 1; 3 function Module( pos ){ 4 this.offset = pos || 20; 5 } 6 Module.prototype.create = function(){ 7 var oDiv = document.createElement( "div" ); 8 oDiv.style.left = ( ++index ) * offset + ‘px‘; 9 oDiv.style.top = ( ++index ) * offset + ‘px‘; 10 oDiv.innerHTML = ‘ghostwu教你用設計模式實戰‘; 11 return oDiv; 12 } 13 oBtn.onclick = function(){ 14 var oDiv = new Module(); 15 document.body.appendChild( oDiv.create() ); 16 }
四,用單例改造
html:
1 <input type="button" value="彈窗1"> 2 <input type="button" value="彈窗2">
1 var aBtn = document.querySelectorAll("input"), 2 offset = 20, index = 1; 3 function Module( pos ){ 4 this.offset = pos || 20; 5 } 6 Module.prototype.create = function(){ 7 var oDiv = document.createElement( "div" ); 8 oDiv.style.left = ( ++index ) * offset + ‘px‘; 9 oDiv.style.top = ( ++index ) * offset + ‘px‘; 10 oDiv.innerHTML = ‘ghostwu教你用設計模式實戰‘; 11 return oDiv; 12 } 13 Module.one = (function(){ 14 var ins = null, isExist = false; 15 return function( pos ){ 16 if ( !ins ) ins = new Module( pos ); 17 if ( !isExist ) { 18 document.body.appendChild( ins.create() ); 19 isExist = true; 20 } 21 } 22 })(); 23 aBtn[0].onclick = function(){ 24 Module.one( 10 ); 25 } 26 aBtn[1].onclick = function(){ 27 Module.one( 10 ); 28 }
在Module.one中通過變量isExist的兩種狀態和閉包特性控制元素只能被添加一次
[js高手之路]設計模式系列課程-單例模式實現模態框