快捷導(dǎo)航

[js高手之路]單例模式實(shí)現(xiàn)模態(tài)框的示例

更新時(shí)間：2017年09月01日 08:35:27 投稿：jingxian

下面小編就為大家?guī)?lái)一篇[js高手之路]單例模式實(shí)現(xiàn)模態(tài)框的示例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

什么是單例呢？

單，就是一個(gè)的意思。例：就是實(shí)例化出來(lái)的對(duì)象，那合在一起就是保證一個(gè)構(gòu)造函數(shù)只能new出一個(gè)實(shí)例，為什么要學(xué)習(xí)單例模式呢？或者說(shuō)單例模式有哪些常見(jiàn)的應(yīng)用場(chǎng)景.它的使用還是很廣泛，比如：彈出一個(gè)模態(tài)框，一般來(lái)說(shuō)在網(wǎng)站中彈出的模態(tài)框，不停的一直點(diǎn)擊，一般只能創(chuàng)建一個(gè)。還有后臺(tái)的數(shù)據(jù)庫(kù)連接，一般都是保證一個(gè)連接等等。今天的主題就是單例在模態(tài)框中的應(yīng)用，我們先要搞清楚，怎么弄個(gè)單例出來(lái).

我們先看下普通的構(gòu)造函數(shù)加原型方式。下面這種是常見(jiàn)的方式

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都會(huì)在內(nèi)存中生成一塊新的內(nèi)存區(qū)域保存新的實(shí)例，所以這種方式就不能保證只能new出一個(gè)單例，所以，我們想要?jiǎng)?chuàng)建一個(gè)單例，就要能夠控制new創(chuàng)建實(shí)例的過(guò)程?。?！，這就是單例的關(guān)鍵，那么要控制這個(gè)過(guò)程，肯定不能讓用戶直接調(diào)用構(gòu)造函數(shù)，所以我們要另外想辦法.

第一種辦法：在函數(shù)中添加一個(gè)靜態(tài)方法，來(lái)控制創(chuàng)建實(shí)例的過(guò)程

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這個(gè)變量是否保存了一個(gè)實(shí)例，如果沒(méi)有就new一個(gè)，否則直接返回。第二次在調(diào)用的時(shí)候，由于已經(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 );

這兩種方法都可以，接下來(lái)，我就選擇第二種方法來(lái)實(shí)現(xiàn)彈出單一的模態(tài)框

三、傳統(tǒng)面向?qū)ο蠓绞?，每次點(diǎn)擊都會(huì)彈出新的模態(tài)框

樣式：

div {
   width: 200px;
   height: 200px;
   border:1px solid #09f;
   box-shadow: 2px 2px 1px #666;
   position: absolute;
  }

html:

<input type="button" value="彈窗">

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è)計(jì)模式實(shí)戰(zhàn)';
   return oDiv;
  }
  oBtn.onclick = function(){
   var oDiv = new Module();
   document.body.appendChild( oDiv.create() );
  }

四，用單例改造

html:

<input type="button" value="彈窗1">
<input type="button" value="彈窗2">

var aBtn = document.querySelectorAll("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è)計(jì)模式實(shí)戰(zhàn)';
   return oDiv;
  }
  Module.one = (function(){
   var ins = null, isExist = false;
   return function( pos ){
    if ( !ins ) ins = new Module( pos );
    if ( !isExist ) {
     document.body.appendChild( ins.create() );
     isExist = true;
    }
   }
  })();
  aBtn[0].onclick = function(){
   Module.one( 10 );
  }
  aBtn[1].onclick = function(){
   Module.one( 10 );
  }

在Module.one中通過(guò)變量isExist的兩種狀態(tài)和閉包特性控制元素只能被添加一次

以上這篇[js高手之路]單例模式實(shí)現(xiàn)模態(tài)框的示例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: