<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          js設計模式之單例模式,javascript如何將一個對象設計成單例

          時間:?2017-11-22閱讀:?2069標簽:?模式

          單例模式是我們開發中一個非常典型的設計模式,js單例模式要保證全局只生成唯一實例,提供一個單一的訪問入口,單例的對象可以不同于靜態類,我們可以延遲單例對象的初始化,通常這種情況發生在我們需要等待加載創建單例的依賴。  


          js單例的好處

          1.在全局中只生成一個變量,減少全局變量的污染,同時也很好的解決了命名沖突。

          2.只需新創建一次對象,減少對內存資源的占用。

          3.減少系統加載的時間,遇到bug更容易排查。


          js單例核心是確保只有一個實例,并提供全局訪問  

          在js中并沒有類的說法,所謂的單一實例,就是指創建一個唯一的對象 ,這樣的對象就滿足了單例的條件,例如:

          var demo={};

          js單例在實際項目開發中通常采用使用閉包的形式,將變量封裝到閉包內,只提供一個接口給外包使用。這里來實現一個功能通過單例創建div元素,例如:

          var demo =(function(){
          	var div;
          	function init(){
          	    div=document.createElement('div');
          	    div.innerText="創建了一個div";
          	    document.body.appendChild(div);
          	}
          	return function(){
                  if(!div){
                      init();
                  }
                  return div;
              }
          })();
          demo();//在頁面上創建了一個div元素
          demo();//已經創建了

          這是一個最經典的惰性單例,如果實例不存在,通過一個方法創建一個實例,如果已經存在,則返回實例的引用。這里就說明了它和靜態對象不同,可以被延遲生成,也就是說在我們需要的時候才創建對象實例,而非在頁面加載時就創建。

           

          但是在這里我們會發現一些問題:通過上面的方法只能實例一個div元素,如果需要創建多個就比較麻煩了。而且創建的實例和它的管理都放于一個函數demo中,這明顯不能更好的擴展。所以需要把變化的封裝起來,不變的隔離開,以便于我們程序的擴展性,例如:

          var demo = function(fn){
              var elm;
              return function(){
                  return elm || (elm = fn.apply(this, arguments));
              }
          };
          var initDiv=function(){
              var div=document.createElement('div');
          	div.innerText="創建了一個div";  
              document.body.appendChild(div);
              return div;
          };
          var initP=function(){
              var p=document.createElement('p');
          	p.innerText="創建了一個p";  
              document.body.appendChild(p);
              return p;
          };
          var a=demo(initDiv);
          a();//創建了一個div
          a();//已經存在了
          var a_1=demo(initDiv);
          a_1();//又創建了一個div
          var b=demo(initP);
          b();//又通過demo創建了p
          b();//已經存在了


          整理其它實現js單例的方法

          方法1:

          function Universe() {
              // 判斷是否存在實例
              if (typeof Universe.instance === 'object') {
                  return Universe.instance;
              }
              // 其它內容
              this.start_time = 0;
              this.bang = "Big";
              // 緩存
              Universe.instance = this;
              // 隱式返回this
          }
          // 測試
          var uni = new Universe();
          var uni2 = new Universe();
          console.log(uni === uni2); // true

          方法2:

          function Universe() {
              // 緩存的實例
              var instance = this;
              // 其它內容
              this.start_time = 0;
              this.bang = "Big";
              // 重寫構造函數
              Universe = function () {
                  return instance;
              };
          }
          // 測試
          var uni = new Universe();
          var uni2 = new Universe();
          uni.bang = "123";
          console.log(uni === uni2); // true
          console.log(uni2.bang); // 123

          方法3:

          function Universe() {
              // 緩存實例
              var instance;
              // 重新構造函數
              Universe = function Universe() {
                  return instance;
              };
              // 后期處理原型屬性
              Universe.prototype = this;
              // 實例
              instance = new Universe();
              // 重設構造函數指針
              instance.constructor = Universe;
              // 其它功能
              instance.start_time = 0;
              instance.bang = "Big";
              return instance;
          }
          // 測試
          var uni = new Universe();
          var uni2 = new Universe();
          console.log(uni === uni2); // true
          // 添加原型屬性
          Universe.prototype.nothing = true;
          var uni = new Universe();
          Universe.prototype.everything = true;
          var uni2 = new Universe();
          console.log(uni.nothing); // true
          console.log(uni2.nothing); // true
          console.log(uni.everything); // true
          console.log(uni2.everything); // true
          console.log(uni.constructor === Universe); // true

          方式4:

          var Universe;
          (function () {
              var instance;
              Universe = function Universe() {
                  if (instance) {
                      return instance;
                  }
                  instance = this;
                  // 其它內容
                  this.start_time = 0;
                  this.bang = "Big";
              };
          } ());
          //測試代碼
          var a = new Universe();
          var b = new Universe();
          alert(a === b); // true
          a.bang = "123";
          alert(b.bang); // 123


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/153

          發布訂閱和觀察者模式的區別

          有些人認為觀察者模式就是發布訂閱模式,實際上觀察者模式是包含了訂閱發布模式,發布訂閱模式只是觀察者模式中的一種。觀察者模式是觀察者和被觀察者之間的通信,而發布訂閱模式中間增加了一個中轉層

          前后端分離模式有什么意義

          前后端分離從端口劃分就是將瀏覽器、客戶端分為前端,提供真實服務的軟件就成為后端。從開發語言的角度劃分后端的編程語言和前端的編程語言,例如Java是做后端真實數據服務的,JavaScript、HTML是做前端業務數據的展現與用戶行為操作的

          vue-router的hash 模式和 history 模式

          url 中帶有#的便是 hash 模式,#后面是 hash 值,它的變化會觸發 hashchange 這個事件。通過這個事件我們就可以知道 hash 值發生了哪些變化。

          Js設計模式之:單例模式

          良好的設計模式可以顯著提高代碼的可讀性,降低復雜度和維護成本。筆者打算通過幾篇文章通俗地講一講常見的或者實用的設計模式

          JS 中的裝飾器模式

          使用過 mobx + mobx-react 的同學對于 ES 的新特性裝飾器肯定不陌生。我在第一次使用裝飾器的時候,我就對它愛不釋手,書寫起來簡單優雅,太適合我這種愛裝 X 且懶的同學了。

          前端JavaScript設計模式

          面向對象的三大特性:繼承、封裝、多態。JavaScript 沒有提供傳統面向對象語言中的類式繼承,而是通過原型委托的方式來實現對象與對象之間的繼承。JavaScript 也沒有在語言層面提供對抽象類和接口的支持。

          js中的策略模式

          什么是策略模式,官方定義是:定義一些列算法,把他們封裝起來,并且可以相互替換。說人話(⊙?⊙):就是把看似毫無聯系的代碼提取封裝、復用,使之更容易被理解和拓展。常見的用于一次if判斷、switch枚舉、數據字典等流程判斷語句中

          TypeScript設計模式之享元模式

          享元模式就是運行共享技術有效地支持大量細粒度的對象,避免大量擁有相同內容的小類的開銷(如耗費內存),使大家共享一個類,在享元模式中有兩個重要的概念,即內部狀態和外部狀態:

          Js實現基于類的枚舉模式

          枚舉是由一組值組成的類型。例如 TypeScript 中有內置的枚舉,我們可以通過它們來定義自己的布爾類型:這段 TypeScript 代碼會被編譯為以下 JavaScript 代碼

          Typescript 嚴格模式到底嚴在哪里?

          當 Typescript 嚴格模式設置為 on 時,它將使用 strict 族下的嚴格類型規則對項目中的所有文件進行代碼驗證。規則是:此規則不允許變量或函數參數具有隱式 any 類型。請看以下示例:

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网