單例模式實現模態框

時間 2019-12-10

標籤模式實現模態简体版

原文原文鏈接

普通的構造函數加原型方式

function Singleton (uName){
         this.userName =uName
         this.ins = null
      }
      Singleton.prototype.showUserName = function(){
          return this.userName;
      }
      var obj1 = new Singleton('hi')
      var obj2 = new Singleton('hei')
      console.log(obj1==obj2) //false
      
      
      每次new都會在內存中生成一塊新的內存區域保存新的實例，因此這種方式就不能保證只能new出一個單例，因此，咱們想要建立一個單例，就要可以控制new建立實例的過程！！！，這就是單例的關鍵，那麼要控制這個過程，確定不能讓用戶直接調用構造函數，因此咱們要另外想辦法.

第一種辦法：在函數中添加一個靜態方法，來控制建立實例的過程

<script>
       function Singleton (uName){
           this.userName = uName;
       }
       Singleton.prototype.showUserName = function(){
           return this.userName;
       }
       Singleton.getInstance = function(uName){
           if(!this.ins){
             this.ins= new Singleton(uName);
           }
           return this.ins;
       }
       var obj1 = Singleton.getInstance('jdksa')
       var obj2= Singleton.getInstance('jdkjsf')
       console.log(obj1==obj2)//true
    </script>
    判斷ins這個變量是否保存了一個實例，若是沒有就new一個，不然直接返回。第二次在調用的時候，因爲已經存在了ins，因此直接返回，就不須要在new了，這要就能確保是單例

傳統面向對象方式，每次點擊都會彈出新的模態框

<style>
       div{
           position: absolute;
           width: 200px;
           height: 200px;
           border: 1px solid #aaa;
           box-shadow: 1px 1px 1px #000;
       }
    </style>
</head>
<body>
    <input type="button" value="建立">
    <script>
      var btn = document.querySelector('input')
      offset = 20,index=1;
      function module(ops){
       this. offset=ops||20;
      }
      module.prototype.create=function(){
          var div = document.createElement('div')
          div.style.left=(++index)*offset+'px'
          div.style.top=(++index)*offset+'px'
          div.innerHTML="藏着真話"
          return div
      }
      btn.onclick=function(){
          var odiv = new module();
          document.body.appendChild(odiv.create())
      }
    </script>

用單例改造

<style>
      
             div {
              width: 200px;
              height: 200px;
              border:1px solid #09f;
              box-shadow: 2px 2px 1px #666;
              position: absolute;
              }
      
    </style>
</head>
<body>
    <input type="button" value="button1">
    <input type="button" value="button2">
    <script>
      var oBtn = document.querySelectorAll('input')
      offset=20,index=1
      function Module(pos){
       this.offset=pos||20
      }
      Module.prototype.create=function(){
        var oDiv=document.createElement('div')
        oDiv.style.left=(++index)*offset+'px'
        oDiv.style.right=(++index)*offset+'px'
        oDiv.innerHTML="router.getMat"
        return oDiv 
      }
      Module.info=(function(){
          var ins = null,isTure=false;
        return function(pos){
         if(!ins) ins=new Module(pos)
         if(!isTure){
            document.body.appendChild(ins.create())
            isTure= true
         }
        }
      })();
      oBtn[0].onclick=function(){
       Module.info(10)
      }
       oBtn[1].onclick=function(){
       Module.info(29)
       }
    </script>