<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 = [];//敵機(jī)數(shù)組
    this.myPlanes = [];//我方戰(zhàn)機(jī)數(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)用原理，先進(jìn)行自調(diào)用噶、返回閉包函數(shù)，讓使用者調(diào)用，但只能創(chuàng)建一個(gè)實(shí)例對象，當(dāng)要?jiǎng)?chuàng)建多個(gè)的時(shí)候 不會進(jìn)行創(chuàng)建，最上面簡單案例代碼，如果要再次創(chuàng)建實(shí)例，會覆蓋之前的數(shù)據(jù)，并且不會創(chuàng)建實(shí)例對象
為什么要采用閉包 防止使用者再次構(gòu)造新對象 采用自調(diào)用之后 函數(shù)執(zhí)行1次 在調(diào)用時(shí) 只需要使用return的函數(shù)就行 避免用戶多次構(gòu)造新對象*/