面向对象的选项卡 原则 ：先写出普通的写法，然后改成面向对象写法 。

普通方法变型：

　　尽量不要出现函数嵌套函数

　　可以有全局变量

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

改成面向对象：

      全局变量就是属性

　　函数就是方法

　　Onload中创建对象

　　改this指向问题

下面是普通代码：



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{margin:0;padding:0;}
    input{padding:5px 10px;}
    input.on{background: red;}
    #div1 div{width:200px;height:200px;border:1px solid #ccc;display: none;}
  </style>
</head>
<body>
  <div id="div1">
    <input class="on" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block;">111</div>
    <div>222</div>
    <div>333</div>
  </div>
  <script>
    //普通写法
    /*window.onload = function(){
      var oParent = document.getElementById('div1');
      var aInput = oParent.getElementsByTagName('input');
      var aDiv = oParent.getElementsByTagName('div');
      for(var i = 0; i < aInput.length;i++){
        //给每个input添加一个自定义属性index = i;闭包传值
        aInput[i].index = i;
        aInput[i].onclick = function(){
          for(var i = 0;i<aInput.length;i++){
            aInput[i].className = '';
            aDiv[i].style.display='none';
          }
          this.className = 'on';
          aDiv[this.index].style.display='block';
        }
      }
    }*/

    /*
    普通方法先变型:
      尽量不要出现函数嵌套函数
      可以有全局变量
      把onload中不是赋值的语句放到单独函数中
    */

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

      init();

      function init(){
        for(var i = 0; i < aInput.length;i++){
          //给每个input添加一个自定义属性index = i;闭包传值
          aInput[i].index = i;
          aInput[i].onclick = change;
        }
      }
      function change(){
        for(var i = 0;i<aInput.length;i++){
          aInput[i].className = '';
          aDiv[i].style.display='none';
        }
        this.className = 'on';
        aDiv[this.index].style.display='block';
      }
    }
  </script>
</body>
</html>


面向对象改写如下：



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{margin:0;padding:0;}
    input{padding:5px 10px;}
    input.on{background: red;}
    #div1 div,#div2 div{width:200px;height:200px;border:1px solid #ccc;display: none;}
  </style>
</head>
<body>
  <div id="div1">
    <input class="on" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block;">111</div>
    <div>222</div>
    <div>333</div>
  </div>
  <hr>
  <div id="div2">
    <input class="on" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block;">111</div>
    <div>222</div>
    <div>333</div>
  </div>
  <script>
    //普通写法
    /*window.onload = function(){
      var oParent = document.getElementById('div1');
      var aInput = oParent.getElementsByTagName('input');
      var aDiv = oParent.getElementsByTagName('div');
      for(var i = 0; i < aInput.length;i++){
        //给每个input添加一个自定义属性index = i;闭包传值
        aInput[i].index = i;
        aInput[i].onclick = function(){
          for(var i = 0;i<aInput.length;i++){
            aInput[i].className = '';
            aDiv[i].style.display='none';
          }
          this.className = 'on';
          aDiv[this.index].style.display='block';
        }
      }
    }*/

  /*
  改成面向对象
    全局变量就是属性
    函数就是方法
    Onload中创建对象
    改this指向问题
  */


    window.onload = function(){
      var t1 = new Tab('div1');
      t1.init();
      var t2 = new Tab('div2');
      t2.init();
    };
    function Tab(id){
      this.oParent = document.getElementById(id);
      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 i = 0;i<this.aInput.length;i++){
          this.aInput[i].className = '';
          this.aDiv[i].style.display='none';
        }
        obj.className = 'on';
        this.aDiv[obj.index].style.display='block';

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


　效果如下:

选项卡面向对象练习_自定义属性