JS面向对象学习之普通面向过程式选项卡编写（笔记）

最新推荐文章于 2024-04-07 11:24:44 发布

原创最新推荐文章于 2024-04-07 11:24:44 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

Javascript基础专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现选项卡切换效果的方法，并逐步从面向过程的写法演进到面向对象的实现，提高了代码的可维护性和复用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>传统面向过程式编写选项卡</title>
  <style>
    .box div {
      width: 200px;
      height: 200px;
      border: 1px solid #666;
      display: none;
    }
    .active {
      background: #F4D;
    }    
  </style>
</head>
<body>
  <div class="box">
    <input class="active" type="button" value="新闻" />
    <input type="button" value="娱乐" />
    <input type="button" value="财经" />
    <div style="display: block;">新闻</div>
    <div>体育</div>
    <div>财经</div>
  </div>

  <script>
    window.onload = function() {
    var aInput = document.querySelectorAll('.box input');
    var aDiv = document.querySelectorAll('.box div');
    for(var i = 0; i <aInput.length; i++) {
      aInput[i].index = i;
      aInput[i].onclick = function() {
        for(var j = 0; j < aInput.length; j++) {
          aInput[j].className = "";
          aDiv[j].style.display = "none";
        }
        this.className = "active";
        aDiv[this.index].style.display = "block";
      }

    }
  }
  </script>
</body>
</html>

先写出普通的写法，然后改成面向对象写法

普通方法变型：1、尽量不要出现函数嵌套函数；

2、可以有全局变量；

3、把onload中不是赋值的语句放到单独函数中

按照上面三点讲js代码改成下面这样：

    var oParent = null;
    var aInput = null;
    var aDiv = null;
    
    window.onload = function() {
      oParent = document.getElementById("box");
      aInput = oParent.getElementsByTagName('input');
      aDiv =oParent.getElementsByTagName('div');
      init();
    };

    function init() {
      for(var i = 0; i <aInput.length; i++) {
        aInput[i].index = i;
        aInput.onclick = change;
      }
    }

    function change() {
      for(var j = 0; j < aInput.length; j++) {
        aInput[j].className = "";
        aDiv[j].style.display = "none";
      }
      this.className = "active";
      aDiv[this.index].style.display = "block";
    };

再遵循下面的原则改成面向对象的形式：

1、全局变量就是属性；

2、函数就是方法

3、onload中创建对象；

4、最后改this的指向；//在使用了事件和定时器的情况下，this最容易出问题

来看看this的指向问题：

oDiv.onclick = function() {
      //这个时候的this是指向oDiv的
    }

再看：

  oDiv.onclick = change;
    function change() {
      //this还是指向oDiv
    }

   oDiv.onclick = function() {
      show();
    }

    function show() {
      this-->window
    }

然后来看下面代码中this指向是谁？

 window.onload = function() {
      var tl = new Tab(); //创建对象
      t1.init();
    }

    function Tab() {//这个函数里面的this都是指向对像
      this.oParent = document.getElementById("box");
      this.aInput = this.oParent.getElementsByTagName('input');
      this.aDiv = this.oParent.getElementsByTagName('div');
    }

    Tab.prototype.init = function() {//init函数调用是这样的：t1.init()，这里面的this还是t1对象
      for(var i = 0; i <this.aInput.length; i++) {
        this.aInput[i].index = i;
        this.aInput.onclick = this.change;//在这里调用了change函数,那么change里面的this应该是指向this.aInput这个按钮
      }
    }

    Tab.prototype.change = function() {//看看哪里调用了change函数;那么change里面的this应该是指向this.aInput这个按钮
      for(var j = 0; j < this.aInput.length; j++) {//这里的this.aInput是错误的
        this.aInput[j].className = "";//同上错误
        this.aDiv[j].style.display = "none";//同上错误
      }
      this.className = "active";//这里的this指向是对的
      this.aDiv[this.index].style.display = "block";//这里的this.index中的this是对的，但是外面的this.oDiv中的this是错误的
    }

正确方式应该如下这样写：更给this指向的原则应该是尽量让对象中的this指向对象

 window.onload = function() {
      var tl = new Tab(); //创建对象
      tl.init();
    }

    function Tab() {
      this.oParent = document.getElementById("box");
      this.aInput = this.oParent.getElementsByTagName('input');
      this.aDiv = this.oParent.getElementsByTagName('div');
    }

    Tab.prototype.init = function() {
      var This = this;
      for(var i = 0; i <this.aInput.length; i++) {
        this.aInput[i].index = i;
        this.aInput[i].onclick = function() {
          This.change(this);
        };
      }
    }

    Tab.prototype.change = function(obj) {
      for(var j = 0; j < this.aInput.length; j++) {
        this.aInput[j].className = "";
        this.aDiv[j].style.display = "none";
      }
      obj.className = "active";
      this.aDiv[obj.index].style.display = "block";
    }