[js高手之路]設計模式系列課程-單例模式實現模態框

標籤：資料   image   模態框   資料庫連接   select   執行個體化   執行個體   ima   element   

什麼是單例呢？

單，就是一個的意思。例：就是執行個體化出來的對象，那合在一起就是保證一個建構函式只能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高手之路]設計模式系列課程-單例模式實現模態框