中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JavaScript實現單例模式實例分享

發布時間:2020-09-03 02:06:37 來源:腳本之家 閱讀:142 作者:三十億少女的夢 欄目:web開發

傳統單例模式

保證一個類僅有一個實例,并提供一個訪問它的全局訪問點。

實現單例核心思想

無非是用一個變量來標志當前是否已經為某個類創建過對象,如果是,則在下一次獲取該類的實例時,直接返回之前創建的對象,接下來我們用JavaScript來強行實現這個思路,請看代碼:

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;       }
})();

我們通過Singleton.getInstance來獲取Singleton類的唯一對象,這樣確實是沒問題的,但是js本身是沒有類這種概念的,所以我們強行用傳統單例思想來實現是沒有任何意義的,這樣的代碼又臭又長(其實是我自己看著不舒服嘻嘻嘻)。下面我們使用JavaScript的閉包來實現一個單例,請看代碼:

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

可以看到,這樣我們確實用閉包來實現了一個單例,但這個代碼還是高度耦合的,CreateDiv的構造函數實際上負責了兩件事情。第一是創建對象和執行初始化init方法,第二是保證只有一個對象。這樣的代碼是職責不明確的,現在我們要把這兩個工作分開,構造函數就負責構建對象,至于判斷是返回現有對象還是構造新的對象并返回,我們交給另外一個函數去完成,其實也就是為了滿足一個編程思想:單一職責原則。這樣的代碼才能更好的解耦,請看下面代碼:

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

可以看到,現在我們的構造函數CreateDiv現在只負責構造對象,至于是返回現有對象還是構造新的對象并返回,這件事我們交給了代理類proxySingletonCreateDiv來處理,這樣的代碼看著才舒(zhuang)服(bi)嘛!

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

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

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

單例常用場景

只需要生成一個唯一對象的時候,比如說頁面登錄框,只可能有一個登錄框,那么你就可以用單例的思想去實現他,當然你不用單例的思想實現也行,那帶來的結果可能就是你每次要顯示登陸框的時候都要重新生成一個登陸框并顯示(耗費性能),或者是不小心顯示出了兩個登錄框。

以上就是我們給大家分享的關于JS實現單例模式的相關學習的心得,感謝大家對億速云的支持。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

疏附县| 金塔县| 永嘉县| 密山市| 许昌市| 丹阳市| 大渡口区| 祁东县| 普兰店市| 东台市| 青海省| 新宁县| 吕梁市| 连平县| 金寨县| 大姚县| 井陉县| 普兰县| 碌曲县| 新郑市| 东方市| 平原县| 察隅县| 田东县| 洛扎县| 南溪县| 陵水| 大名县| 海南省| 广丰县| 娄烦县| 古交市| 镇原县| 陆川县| 衡阳县| 双辽市| 灵台县| 慈溪市| 华宁县| 抚顺市| 佛山市|