• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

单例模式实现模态框

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0729/102655.html 1190000019898911

普通的构造函数加原型方式

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>

clipboard.png

用单例改造

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

在Module.info中通过变量isTure的两种状态和闭包特性控制元素只能被添加一次

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!