本文例項講述了JavaScript設計模式---單例模式.分享給大家供大家參考，具體如下：

單例模式也稱為單體模式，其中：

1，單體模式用於建立名稱空間，將系列關聯的屬性和方法組織成一個邏輯單元，減少全域性變數。
　邏輯單元中的程式碼通過單一的變數進行訪問。

2，三個特點：
　① 該類只有一個例項；
　② 該類自行建立該例項，即在該類內部建立自身的例項物件；
　③ 向整個系統公開這個例項介面

3，單體模式有四種基本形式：

第一種，最簡單的單體，只被例項化一次 我簡記為json物件

（1）基本結構

 var userInfo={//已經自行被例項化 其實是一json物件
    name:"測試名稱",dept:"測試PD",code:"測試PD001",getName:function () {
      return "測試"
    }
  };

（2）使用方法與json的使用方法一致：使用點 " . "的方式訪問

alert(userInfo.getName())

單體模式用來劃分名稱空間，並將一群相關的屬性和方法組織到一起的簡單介紹：

 var comm={};//一個空物件


  comm.userInfo={//空物件下的第一個名稱空間
    name:"名稱空間1下的",code:"001"
  }

  comm.funcInfo={//空物件下的第二個名稱空間
    funcName:"名稱空間2下的",code:"002"
  }

總結：該種方式可以看出物件的變數值不是動態載入的，而且物件沒有顯示初始化，由此有了第二種單體模式。

第二種，具有區域性變數的單體

要求:模擬一個使用ajax從資料庫載入資料的過程

（1）簡單模擬一下ajax過程

//模擬一個Ajax操作
  function Ajax() {};//空物件
  //靜態函式 模擬作為從資料庫取值 此處值寫死的
  Ajax.request=function (url,fn) {
    //預設永遠回撥成功
    if(true){
      fn("測試值1","測試值2")
    }
  }

（2）在最簡單的單體中出現了資料不是動態從資料庫載入的，而且沒有顯示例項化物件，此處使用閉包原理解決上述問題

//使用閉包的原理解決：動態從資料庫載入資料 ，顯示例項化
  var userInfo=(function () {
    //（1）利用閉包使單體有自己的私有區域性變數
    var name="";
    var code="";
    //（2）利用ajax訪問資料庫取到資料
    Ajax.request("url",function (n,c) {//由於模擬的ajax中只是簡單傳遞引數，所以第一個引數可以任意
         name=n;
         code=c;
    })
    //（3）單體實現私有變數的賦值
    return {
      name:name,code:code
    }
  })()

（3）使用該種方式的單體，不用例項化 可以直接返回一個單體 【因為使用userInfo時，直接return一個單體回來】

alert(userInfo.name);

總結：

（1）優點，靈活

（2）弊端：return 單體資料量比較大時，都需要從資料庫取資料，每次載入都要執行，會影響程式效能。由於該種方式每次載入都要直接執行，return單體資料量大時會影響呈現的效能，於是有了第三種單體模式。

第三種，惰性單體 提供的解決方案為：調方法時才例項化單體，而不是載入時就執行。

於是在第二種的基礎上進行修改為，

（1）模擬ajax從資料庫載入資料不變

 //模擬一個Ajax操作
  function Ajax() {}
  //靜態函式 模擬作為從資料庫取值
  Ajax.request=function (url,"測試值2")
    }
  }

（2）動態從資料庫載入資料 ，顯示例項化，使用一個函式（Init()）封裝產生單體的函式，通過一個私有變數來返回函式（Init()）

 //使用閉包的原理解決：動態從資料庫載入資料 ，顯示例項化
  var UserInfo=(function () {

    var userInfo="";//私有變數

    function Init() {//在產生單體方式為包裹一層初始化函式
      //利用閉包使單體有自己的私有區域性變數
      var name="";
      var code="";
      //利用ajax訪問資料庫取到資料
      Ajax.request("url",c) {
        name=n;
        code=c;
      })
      //單體
      return {
        name:name,code:code,}
    }

    return {//此時開始呼叫初始化函式實現單體的產生
      getInstance:function () {
        if(userInfo){//userInfo=""為false
          return userInfo;
        }else {
          userInfo=Init();
          return userInfo;
        }
      }
    }

  })()

（3）使用 訪問UserInfo物件裡面的獲取初始化獲取物件的函式（getInstance()）

  alert(UserInfo.getInstance().name);

總結：使用惰性單體實質上是通過對產生單體的函式進行再一次封裝（使用函式封裝），再在通過該類提供的唯一介面（getInstance()方法）訪問初始化單體 的函式。

第四種，分支單體

簡單的用處：做Ajax的時候根據不同的瀏覽器獲得不同的XHR。（將瀏覽器之間的差異封裝到動態方法，適用於解決瀏覽器之間的差異。）

比如下面一個簡單的例子：在電腦不同解析度的情況下初始化不一樣的介面。（這裡只是彈窗顯示而已）

（1）獲取電腦的解析度

//得到機器的解析度
  var screenWidth=window.screen.width;//width
  var screenHeight=window.screen.height;//height

（2）進行分支判斷處理 ，將差異封裝到動態方法中

 var portalInfo=(function () {
    //單體
   var $1280_1024={info:'1,2,3,5'}//單體1
   var $1366_768={info:'4,1,2'}//單體2

     //動態圖選擇瀏覽器的差異結果（這裡是解析度）
     if(screenWidth==1280){
       return $1280_1024;//返回單體進行初始化
     }else if(screenWidth==1366){
       return $1366_768;//返回單體進行初始化
     }else {
       throw new Error("請檢查你當前的電腦解析度")
     }
   })();

（3）使用 ，獲取最終的結果

alert(portalInfo.info)//我的結果為4,2 這是由於我的電腦的解析度為1366*768

總結一下，對於分支單體有一個缺點：分支中，單體1和單體2都被建立了，並儲存在記憶體中了，但只用到一個。需要在 計算時間 和 佔用記憶體 兩者中取捨。

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。