快捷導(dǎo)航

原生javascript單例模式的應(yīng)用實例分析

更新時間：2020年02月23日 11:13:40 作者：巴啦啦小能量

這篇文章主要介紹了原生javascript單例模式的應(yīng)用,結(jié)合實例形式分析了JavaScript單例模式的基本功能、原理、應(yīng)用及操作注意事項,需要的朋友可以參考下

本文實例講述了原生javascript單例模式的應(yīng)用。分享給大家供大家參考，具體如下：

總體原則：開閉原則（Open Close Principle）開閉原則就是說對擴展開放，對修改關(guān)閉。在程序需要進行擴展的時候，不能去修改原有的代碼，實現(xiàn)一個熱插拔的效果。所以一句話概括就是：為了使程序的擴展性好，易于維護和升級。 1、單一職責(zé)原則不要存在多于一個導(dǎo)致類變更的原因，也就是說每個類應(yīng)該實現(xiàn)單一的職責(zé)，如若不然，就應(yīng)該把類拆分。

創(chuàng)建模式_單例模式  某個類只允許創(chuàng)建一個實例，這就是單例模式。優(yōu)點如下： 1、某些類創(chuàng)建比較頻繁，對于一些大型的對象，這是一筆很大的系統(tǒng)開銷 2、省去了new操作符，降低了系統(tǒng)內(nèi)存的使用頻率，減輕GC壓力。 3、有些類如交易所的核心交易引擎，控制著交易流程，如果該類可以創(chuàng)建多個的話，系統(tǒng)完全亂了。（比如：中國國家主席只有一個，飛機大戰(zhàn)的地圖對象只有一個），所以只有使用單例模式，才能保證核心交易服務(wù)器獨立控制整個流程。

應(yīng)用：

飛機大戰(zhàn)中的地圖只能有一個實例；  遮罩層有可能是某個項目中經(jīng)常要頻繁創(chuàng)建的實例，如果不停地創(chuàng)建和刪除，還是很浪費資源。應(yīng)該，在首次使用時創(chuàng)建，以后只是使用首次創(chuàng)建的實例  放大鏡有可能在某個項目中經(jīng)常要頻繁地創(chuàng)建的實例，也是很浪費資源。

單例模式的基礎(chǔ)應(yīng)用

<script>
let singleton = function (){
  function Map(width,height) {
    this.width = width;
    this.height = height;
  }
  let instance;
  return{
    getIntence : function(width,height){
      if(instance == undefined){
        instance = new Map(width,height);
      }else{
        instance.width = width;
        instance.height = height;
      }
      return instance;
    }
  }
}();
let m1 = singleton.getIntence(100,200);
let m2 = singleton.getIntence(200,300);
console.log(m1);//200 300
console.log(m2);//200 300
</script>

飛機大戰(zhàn)中單例模式的應(yīng)用

地圖部分

let mapSingleton = (function(){
  function Map(width,height,background){
    this.domObj = null;//地圖的div
    this.moveBox = null;
    this.width = width;
    this.height = height;
    this.background = background;  
    this.enemyPlanes = [];//敵機數(shù)組
    this.myPlanes = [];//我方戰(zhàn)機數(shù)組
    this.createUI();
    this.moveBg();
  }
  //853 600
  Map.prototype.createUI = function() {
    //1、地圖的div
    this.domObj = document.createElement("div");
    this.domObj.style.cssText = `margin:20px auto;position: relative;width:${this.width}px;height:${this.height}px;overflow:hidden`;
    document.body.appendChild(this.domObj);
    //2、移動的div
    this.moveBox = document.createElement("div");
    this.moveBox.style.cssText = `position: absolute;
          top:-1106px;
          width: 480px;
          height: 1706px;`;
    this.domObj.appendChild(this.moveBox);        
    //3、圖片
    for(var i=0;i<2;i++){
      let img01 = document.createElement("img");
      img01.src = this.background;
      img01.style.cssText = `display: block`;
      this.moveBox.appendChild(img01);
    }
    //4、積分板：
    this.scoreDom = document.createElement("div");
    this.scoreDom.style.cssText = "position:absolute;left:0px;top:0px;width:100px;height:35px;z-index:999";
    this.scoreDom.innerHTML = 0;
    this.domObj.appendChild(this.scoreDom);
  };
  Map.prototype.moveBg = function(){
    let top1 = -1106;
    setInterval(()=>{
      top1++;
      if(top1>=-253){
        top1 = -1106;
      }
      this.moveBox.style.top = top1+"px";
    },50);
  }
  var instance;
  return {
    getInstance:function(width,height,background){
      if(instance==undefined){
        instance = new Map(width,height,background);
      }else{
        instance.width = width;
        instance.height = height;
        instance.background = background;
        instance.domObj.style.width=this.width+"px";
        instance.domObj.style.height=this.height+"px";
        instance.moveBox.children[0].src=this.background;
        instance.moveBox.children[1].src=this.background;
      }
      return instance;
    }
  }
})();
// 單例模式的總結(jié)
/*采用閉包原理和自調(diào)用原理，先進行自調(diào)用噶、返回閉包函數(shù)，讓使用者調(diào)用，但只能創(chuàng)建一個實例對象，當(dāng)要創(chuàng)建多個的時候 不會進行創(chuàng)建，最上面簡單案例代碼，如果要再次創(chuàng)建實例，會覆蓋之前的數(shù)據(jù)，并且不會創(chuàng)建實例對象
為什么要采用閉包 防止使用者再次構(gòu)造新對象 采用自調(diào)用之后 函數(shù)執(zhí)行1次 在調(diào)用時 只需要使用return的函數(shù)就行 避免用戶多次構(gòu)造新對象*/

感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調(diào)試運行工具：http://tools.jb51.net/code/WebCodeRun測試上述代碼運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: