JavaScript中單例模式是什么

這篇文章主要為大家展示了JavaScript中單例模式是什么，內(nèi)容簡(jiǎn)而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會(huì)有收獲的，下面讓小編帶大家一起來(lái)看看吧。

為東平等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及東平網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站建設(shè)、成都網(wǎng)站制作、東平網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

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

1，單體模式用于創(chuàng)建命名空間，將系列關(guān)聯(lián)的屬性和方法組織成一個(gè)邏輯單元，減少全局變量。
邏輯單元中的代碼通過(guò)單一的變量進(jìn)行訪問(wèn)。

2，三個(gè)特點(diǎn)：
① 該類只有一個(gè)實(shí)例；
② 該類自行創(chuàng)建該實(shí)例，即在該類內(nèi)部創(chuàng)建自身的實(shí)例對(duì)象；
③ 向整個(gè)系統(tǒng)公開(kāi)這個(gè)實(shí)例接口

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

第一種，最簡(jiǎn)單的單體，只被實(shí)例化一次我簡(jiǎn)記為json對(duì)象

（1）基本結(jié)構(gòu)

 var userInfo={//已經(jīng)自行被實(shí)例化 其實(shí)是一json對(duì)象
    name:"測(cè)試名稱",
    dept:"測(cè)試PD",
    code:"測(cè)試PD001",
    getName:function () {
      return "測(cè)試"
    }
  };

（2）使用方法與json的使用方法一致：使用點(diǎn) " . "的方式訪問(wèn)

alert(userInfo.getName())

單體模式用來(lái)劃分命名空間，并將一群相關(guān)的屬性和方法組織到一起的簡(jiǎn)單介紹：

 var comm={};//一個(gè)空對(duì)象


  comm.userInfo={//空對(duì)象下的第一個(gè)命名空間
    name:"命名空間1下的",
    code:"001"
  }

  comm.funcInfo={//空對(duì)象下的第二個(gè)命名空間
    funcName:"命名空間2下的",
    code:"002"
  }

總結(jié)：該種方式可以看出對(duì)象的變量值不是動(dòng)態(tài)加載的，而且對(duì)象沒(méi)有顯示初始化，由此有了第二種單體模式。

第二種，具有局部變量的單體

要求:模擬一個(gè)使用ajax從數(shù)據(jù)庫(kù)加載數(shù)據(jù)的過(guò)程

（1）簡(jiǎn)單模擬一下ajax過(guò)程

//模擬一個(gè)Ajax操作
  function Ajax() {};//空對(duì)象
  //靜態(tài)函數(shù) 模擬作為從數(shù)據(jù)庫(kù)取值 此處值寫死的
  Ajax.request=function (url,fn) {
    //默認(rèn)永遠(yuǎn)回調(diào)成功
    if(true){
      fn("測(cè)試值1","測(cè)試值2")
    }
  }

（2）在最簡(jiǎn)單的單體中出現(xiàn)了數(shù)據(jù)不是動(dòng)態(tài)從數(shù)據(jù)庫(kù)加載的，而且沒(méi)有顯示實(shí)例化對(duì)象，此處使用閉包原理解決上述問(wèn)題

//使用閉包的原理解決：動(dòng)態(tài)從數(shù)據(jù)庫(kù)加載數(shù)據(jù) ，顯示實(shí)例化
  var userInfo=(function () {
    //（1）利用閉包使單體有自己的私有局部變量
    var name="";
    var code="";
    //（2）利用ajax訪問(wèn)數(shù)據(jù)庫(kù)取到數(shù)據(jù)
    Ajax.request("url",function (n,c) {//由于模擬的ajax中只是簡(jiǎn)單傳遞參數(shù)，所以第一個(gè)參數(shù)可以任意
         name=n;
         code=c;
    })
    //（3）單體實(shí)現(xiàn)私有變量的賦值
    return {
      name:name,
      code:code
    }
  })()

（3）使用該種方式的單體，不用實(shí)例化可以直接返回一個(gè)單體【因?yàn)槭褂胾serInfo時(shí)，直接return一個(gè)單體回來(lái)】

alert(userInfo.name);

總結(jié)：

（1）優(yōu)點(diǎn)，靈活

（2）弊端：return 單體數(shù)據(jù)量比較大時(shí)，都需要從數(shù)據(jù)庫(kù)取數(shù)據(jù)，每次加載都要執(zhí)行，會(huì)影響程序性能。由于該種方式每次加載都要直接執(zhí)行，return單體數(shù)據(jù)量大時(shí)會(huì)影響呈現(xiàn)的性能，于是有了第三種單體模式。

第三種，惰性單體提供的解決方案為：調(diào)方法時(shí)才實(shí)例化單體，而不是加載時(shí)就執(zhí)行。

于是在第二種的基礎(chǔ)上進(jìn)行修改為，

（1）模擬ajax從數(shù)據(jù)庫(kù)加載數(shù)據(jù)不變

 //模擬一個(gè)Ajax操作
  function Ajax() {}
  //靜態(tài)函數(shù) 模擬作為從數(shù)據(jù)庫(kù)取值
  Ajax.request=function (url,fn) {
    //默認(rèn)永遠(yuǎn)回調(diào)成功
    if(true){
      fn("測(cè)試值1","測(cè)試值2")
    }
  }

（2）動(dòng)態(tài)從數(shù)據(jù)庫(kù)加載數(shù)據(jù) ，顯示實(shí)例化，使用一個(gè)函數(shù)（Init()）封裝產(chǎn)生單體的函數(shù)，通過(guò)一個(gè)私有變量來(lái)返回函數(shù)（Init()）

 //使用閉包的原理解決：動(dòng)態(tài)從數(shù)據(jù)庫(kù)加載數(shù)據(jù) ，顯示實(shí)例化
  var UserInfo=(function () {

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

    function Init() {//在產(chǎn)生單體方式為包裹一層初始化函數(shù)
      //利用閉包使單體有自己的私有局部變量
      var name="";
      var code="";
      //利用ajax訪問(wèn)數(shù)據(jù)庫(kù)取到數(shù)據(jù)
      Ajax.request("url",function (n,c) {
        name=n;
        code=c;
      })
      //單體
      return {
        name:name,
        code:code,
      }
    }

    return {//此時(shí)開(kāi)始調(diào)用初始化函數(shù)實(shí)現(xiàn)單體的產(chǎn)生
      getInstance:function () {
        if(userInfo){//userInfo=""為false
          return userInfo;
        }else {
          userInfo=Init();
          return userInfo;
        }
      }
    }

  })()

（3）使用訪問(wèn)UserInfo對(duì)象里面的獲取初始化獲取對(duì)象的函數(shù)（getInstance()）

  alert(UserInfo.getInstance().name);

總結(jié)：使用惰性單體實(shí)質(zhì)上是通過(guò)對(duì)產(chǎn)生單體的函數(shù)進(jìn)行再一次封裝（使用函數(shù)封裝），再在通過(guò)該類提供的唯一接口（getInstance()方法）訪問(wèn)初始化單體的函數(shù)。

第四種，分支單體

簡(jiǎn)單的用處：做Ajax的時(shí)候根據(jù)不同的瀏覽器獲得不同的XHR。（將瀏覽器之間的差異封裝到動(dòng)態(tài)方法，適用于解決瀏覽器之間的差異。）

比如下面一個(gè)簡(jiǎn)單的例子：在電腦不同分辨率的情況下初始化不一樣的界面。（這里只是彈窗顯示而已）

（1）獲取電腦的分辨率

//得到機(jī)器的分辨率
  var screenWidth=window.screen.width;//width
  var screenHeight=window.screen.height;//height

（2）進(jìn)行分支判斷處理，將差異封裝到動(dòng)態(tài)方法中

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

//動(dòng)態(tài)圖選擇瀏覽器的差異結(jié)果（這里是分辨率）
     if(screenWidth==1280){
       return $1280_1024;//返回單體進(jìn)行初始化
     }else if(screenWidth==1366){
       return $1366_768;//返回單體進(jìn)行初始化
     }else {
       throw new Error("請(qǐng)檢查你當(dāng)前的電腦分辨率")
     }
   })();

（3）使用，獲取最終的結(jié)果

alert(portalInfo.info)//我的結(jié)果為4,2,1,2 這是由于我的電腦的分辨率為1366*768

總結(jié)一下，對(duì)于分支單體有一個(gè)缺點(diǎn)：分支中，單體1和單體2都被創(chuàng)建了，并保存在內(nèi)存中了，但只用到一個(gè)。需要在計(jì)算時(shí)間和占用內(nèi)存兩者中取舍。

以上就是關(guān)于JavaScript中單例模式是什么的內(nèi)容，如果你們有學(xué)習(xí)到知識(shí)或者技能，可以把它分享出去讓更多的人看到。

文章題目：JavaScript中單例模式是什么
文章轉(zhuǎn)載：http://muchs.cn/article28/pgopcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、定制開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)、服務(wù)器托管、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容