原生javascript單例模式有什么用

這篇文章主要為大家展示了“原生javascript單例模式有什么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“原生javascript單例模式有什么用”這篇文章吧。

具體如下：

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

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

應用：

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

單例模式的基礎應用

<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>

飛機大戰中單例模式的應用

地圖部分

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 = [];//敵機數組
    this.myPlanes = [];//我方戰機數組
    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;
    }
  }
})();
// 單例模式的總結
/*采用閉包原理和自調用原理，先進行自調用噶、返回閉包函數，讓使用者調用，但只能創建一個實例對象，當要創建多個的時候 不會進行創建，最上面簡單案例代碼，如果要再次創建實例，會覆蓋之前的數據，并且不會創建實例對象
為什么要采用閉包 防止使用者再次構造新對象 采用自調用之后 函數執行1次 在調用時 只需要使用return的函數就行 避免用戶多次構造新對象*/

以上是“原生javascript單例模式有什么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！