javascript的一些知识(六)--面向对象-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43160562/article/details/128088634

一个选项卡

<html>
  <body>
    <div class="tab1">
      <button style="background:red;">按钮1</button>
      <button>按钮2</button>
      <button>按钮3</button>
      <p style="display:none">内容1</p>
      <p style="display:none">内容2</p>
      <p style="display:none">内容3</p>
      
    </div>
  </body>
  <script>
    let btns = document.querySelectorAll(".tab1 button");
    let ps = document.querySelectorAll("tab1 p");
    btns.forEach((value,key)=>{
      value.onclick = function(){
        ps.forEach((v,k)=>{
          if(key==k){
            btns[k].style.background = "red";
            ps.[k].style.display = "block";
          }else{
            ps[k].style.display = "none";
          }
        })
      }
    })
  
  </script>

</html>

多个选项卡

<html>
  <body>
    <div class="tab1">
      <button style="background:red;">按钮1</button>
      <button>按钮2</button>
      <button>按钮3</button>
      <p style="display:none">内容1</p>
      <p style="display:none">内容2</p>
      <p style="display:none">内容3</p>
    </div>
    <div class="tab2">
      <button style="background:red;">按钮1</button>
      <button>按钮2</button>
      <button>按钮3</button>
      <p style="display:none">内容1</p>
      <p style="display:none">内容2</p>
      <p style="display:none">内容3</p>
    </div>
    <button class="nextPre">点击我下一页</button>
    <button class="autoPlay">点击我下二页自动轮播</button>
  </body>
  <script>
   //第一个选项卡有下一页功能；
  //第二个选项卡轮播功能
    function Tab(btns,ps,isNextPre=false,isautoPlay=false){
      btns.forEach((value,key)=>{
        value.onclick = function(){
          psFor(key);
        }
      })
      //下一页
      if(isNextPre){
        document.querySelector(".nextPre").onclick=function(){
          let num=0;
          num++;
          num = num>2?0:num;
          psFor(num);
        }
      }
      
      //自动轮播
      if(isautoPlay){
        document.querySelector(".autoPlay").onclick=function(){
          let num=0;
          setInterval(()=>{
            num++;
            num = num>2?0:num;
            psFor(num);
          },1000);
        }
      }
      
      function psFor(key){
        ps.forEach((v.k)=>{
          if(num==k){
            btns[k].style.background = "red";
            ps.[k].style.display = "block";
          }else{
            ps[k].style.display = "none";
          }
        })
      }
    }
    
    let btns = document.querySelectorAll(".tab1 button");
    let ps = document.querySelectorAll("tab1 p");
    Tab(batns,ps,true,false);
    
    let btns2 = document.querySelectorAll(".tab2 button");
    let ps2 = document.querySelectorAll("tab2 p");
    Tab(batns2,ps2,false,true);
  
  </script>

</html>

多个选项卡改造(工厂模式)

<html>
  <body>
    <div class="tab1">
      <button style="background:red;">按钮1</button>
      <button>按钮2</button>
      <button>按钮3</button>
      <p style="display:none">内容1</p>
      <p style="display:none">内容2</p>
      <p style="display:none">内容3</p>
    </div>
    <div class="tab2">
      <button style="background:red;">按钮1</button>
      <button>按钮2</button>
      <button>按钮3</button>
      <p style="display:none">内容1</p>
      <p style="display:none">内容2</p>
      <p style="display:none">内容3</p>
    </div>
    <button class="nextPre">点击我下一页</button>
    <button class="autoPlay">点击我下二页自动轮播</button>
  </body>
  <script>
   //第一个选项卡有下一页功能；
  //第二个选项卡轮播功能
    function Tab(btns,ps,isNextPre=false,isautoPlay=false){
      btns.forEach((value,key)=>{
        value.onclick = function(){
          psFor(key);
        }
      })
      
      function psFor(key){
        ps.forEach((v.k)=>{
          if(num==k){
            btns[k].style.background = "red";
            ps.[k].style.display = "block";
          }else{
            ps[k].style.display = "none";
          }
        })
      }
      let obj = {};
      obj.psFor = psFor;
      obj.elelength = btns.length;
      return obj; 
    }
    
    let btns = document.querySelectorAll(".tab1 button");
    let ps = document.querySelectorAll("tab1 p");
    let tab1 = Tab(batns,ps,true,false);
    document.querySelector(".nextPre").onclick=function(){
      let num=0;
      num++;
      num = num>tab1.elelength-1?0:num;
      tab1.psFor(num);
    }
    
    let btns2 = document.querySelectorAll(".tab2 button");
    let ps2 = document.querySelectorAll("tab2 p");
    let tab2 = Tab(batns2,ps2,false,true);
    document.querySelector(".autoPlay").onclick=function(){
      let num2=0;
      setInterval(()=>{
        num2++;
        num2 = num2>tab2.elelength-1?0:num;
        tab2.psFor(num2);
      },1000);
    }
    
    
    
  </script>

</html>

工厂模式

    function Tab(){
      //添加原料
      let obj = {};
      //加工原料
      obj.tablength = 1;
      obj.psFor = function(){
        ....逻辑
      }
      //出厂
      return obj;
    }
    //对象识别问题；
    //性能问题===每一个占一个内存空间
    let tab1 = Tab();
    tab1.psFor();
    let tab2 = Tab();
    tab2.psFor();

通过构造函数改造

function Tab(btns,ps){
  this.btns = btns;
  this.ps = ps;
  this.btnFor;
}
Tab.prototype.btnFor = function(){
  this.btns.forEach((value,key)=>{
    value.onclick = ()=>{
      this.psFor(key);
    }
  })
}
Tab.prototype.psFor = function(key){
  this.ps.forEach((v.k)=>{
    if(num==k){
      this.btns[k].style.background = "red";
      this.ps.[k].style.display = "block";
    }else{
      this.ps[k].style.display = "none";
    }
  })
}