真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

JavaScript實(shí)現(xiàn)單例模式實(shí)例分享

傳統(tǒng)單例模式

站在用戶的角度思考問(wèn)題,與客戶深入溝通,找到平陽(yáng)網(wǎng)站設(shè)計(jì)與平陽(yáng)網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品,建站類型包括:網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋平陽(yáng)地區(qū)。

保證一個(gè)類僅有一個(gè)實(shí)例,并提供一個(gè)訪問(wèn)它的全局訪問(wèn)點(diǎn)。

實(shí)現(xiàn)單例核心思想

無(wú)非是用一個(gè)變量來(lái)標(biāo)志當(dāng)前是否已經(jīng)為某個(gè)類創(chuàng)建過(guò)對(duì)象,如果是,則在下一次獲取該類的實(shí)例時(shí),直接返回之前創(chuàng)建的對(duì)象,接下來(lái)我們用JavaScript來(lái)強(qiáng)行實(shí)現(xiàn)這個(gè)思路,請(qǐng)看代碼:

var Singleton = function( name ){
  this.name = name;
};
Singleton.prototype.getName = function(){   alert ( this.name );
};
Singleton.getInstance = (function(){   var instance = null;
  return function( name ){
          if ( !instance ){
            instance = new Singleton( name );
          }
        return instance;       }
})();

我們通過(guò)Singleton.getInstance來(lái)獲取Singleton類的唯一對(duì)象,這樣確實(shí)是沒問(wèn)題的,但是js本身是沒有類這種概念的,所以我們強(qiáng)行用傳統(tǒng)單例思想來(lái)實(shí)現(xiàn)是沒有任何意義的,這樣的代碼又臭又長(zhǎng)(其實(shí)是我自己看著不舒服嘻嘻嘻)。下面我們使用JavaScript的閉包來(lái)實(shí)現(xiàn)一個(gè)單例,請(qǐng)看代碼:

var CreateDiv = (function(){       var instance;
      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; })();
var a = new CreateDiv( 'sven1' ); var b = new CreateDiv( 'sven2' );
alert ( a === b ); // true

可以看到,這樣我們確實(shí)用閉包來(lái)實(shí)現(xiàn)了一個(gè)單例,但這個(gè)代碼還是高度耦合的,CreateDiv的構(gòu)造函數(shù)實(shí)際上負(fù)責(zé)了兩件事情。第一是創(chuàng)建對(duì)象和執(zhí)行初始化init方法,第二是保證只有一個(gè)對(duì)象。這樣的代碼是職責(zé)不明確的,現(xiàn)在我們要把這兩個(gè)工作分開,構(gòu)造函數(shù)就負(fù)責(zé)構(gòu)建對(duì)象,至于判斷是返回現(xiàn)有對(duì)象還是構(gòu)造新的對(duì)象并返回,我們交給另外一個(gè)函數(shù)去完成,其實(shí)也就是為了滿足一個(gè)編程思想:?jiǎn)我宦氊?zé)原則。這樣的代碼才能更好的解耦,請(qǐng)看下面代碼:

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 ProxySingletonCreateDiv = (function () {
    var instance;
    return function (html) {
      if (!instance) {
        instance = new CreateDiv(html);
      }
      return instance;
    }
  })();
  var a = new ProxySingletonCreateDiv('sven1');
  var b = new ProxySingletonCreateDiv('sven2');
  alert(a === b); //true

可以看到,現(xiàn)在我們的構(gòu)造函數(shù)CreateDiv現(xiàn)在只負(fù)責(zé)構(gòu)造對(duì)象,至于是返回現(xiàn)有對(duì)象還是構(gòu)造新的對(duì)象并返回,這件事我們交給了代理類proxySingletonCreateDiv來(lái)處理,這樣的代碼看著才舒(zhuang)服(bi)嘛!

最后貼一個(gè)高度抽象的單例模式代碼,惰性單例的精髓!

//單例模式抽象,分離創(chuàng)建對(duì)象的函數(shù)和判斷對(duì)象是否已經(jīng)創(chuàng)建
  var getSingle = function (fn) {
    var result;
    return function () {
      return result || ( result = fn.apply(this, arguments) );
    }
  };

形參fn是我們的構(gòu)造函數(shù),我們只要傳入任何自己需要的構(gòu)造函數(shù),就能生成一個(gè)新的惰性單例。比如說(shuō)傳入創(chuàng)建一個(gè)女朋友的構(gòu)造函數(shù),并且調(diào)用getSingle(),就能生成一個(gè)新的女朋友。如果以后再調(diào)getSingle(),也只會(huì)返回剛才創(chuàng)建的那個(gè)女朋友。至于新女朋友——不存在的。

單例常用場(chǎng)景

只需要生成一個(gè)唯一對(duì)象的時(shí)候,比如說(shuō)頁(yè)面登錄框,只可能有一個(gè)登錄框,那么你就可以用單例的思想去實(shí)現(xiàn)他,當(dāng)然你不用單例的思想實(shí)現(xiàn)也行,那帶來(lái)的結(jié)果可能就是你每次要顯示登陸框的時(shí)候都要重新生成一個(gè)登陸框并顯示(耗費(fèi)性能),或者是不小心顯示出了兩個(gè)登錄框。

以上就是我們給大家分享的關(guān)于JS實(shí)現(xiàn)單例模式的相關(guān)學(xué)習(xí)的心得,感謝大家對(duì)創(chuàng)新互聯(lián)的支持。


網(wǎng)站標(biāo)題:JavaScript實(shí)現(xiàn)單例模式實(shí)例分享
當(dāng)前URL:http://weahome.cn/article/jgcjhj.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部