从一个简单的选项卡看面向对象编程

简单的选项卡布局

    <div id="box">
        <input type="button" value="1" class="active"/>
        <input type="button" value="2" />
        <input type="button" value="3" />
        <div style="display:block;">1111111111</div>
        <div>2222222222</div>
        <div>3333333333</div>
    </div>
复制代码

css样式

    #box div{
      width: 200px;
      height: 200px;
      border: 1px solid #000000;
      display: none
    }
    .active{
      background: red;
    }
复制代码

首先我们采用过程式的写法实现效果

    window.onload = function () {
        var oParent = document.getElementById('box');
        var aInput = oParent.getElementsByTagName('input');
        var aDiv = oParent.getElementsByTagName('div');
        for(var i = 0; i < aInput.length; 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 = 'active';
            aDiv[this.index].style.display = 'block';
          }
        }
    }
复制代码

然后我们把函数抽离出来

 // 可以有全局变量
  var oParent = null,aInput = null, aDiv = null;
  window.onload = function () {
    oParent = document.getElementById('box');
    aInput = oParent.getElementsByTagName('input');
    aDiv = oParent.getElementsByTagName('div'); 
    init();
  }
  // 函数不要嵌套函数
  function change() {
    for (var i = 0; i < aInput.length; i++) {
      aInput[i].className = '';
      aDiv[i].style.display = 'none';
    };
    this.className = 'active';
    aDiv[this.index].style.display = 'block';
  }
  // 把onload函数中不是赋值的语句放到单独的函数中中去
  function init(){
    for (var i = 0; i < aInput.length; i++) {
      aInput[i].index = i;
      aInput[i].onclick = change;
    }
  }
复制代码

改造成面向对象的方法

window.onload = function(){
    var tab = new Tab();
    tab.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); // 要注意this指向
      };
    }
  }
  Tab.prototype.change = function (This) {
    for (var i = 0; i < this.aInput.length; i++) {
      this.aInput[i].className = '';
      this.aDiv[i].style.display = 'none';
    };
    This.className = 'active';
    this.aDiv[This.index].style.display = 'block';
  }
复制代码

总结：如何改写成面向对象的程序

• 尽量不要出现函数嵌套函数
• 可以有全局变量
• 把onload中不是赋值的语句放到函数中去
• 全局变量就是属性
• 函数就是方法
• onload中创建对象
• 改this指向问题（在事件或者定时器中，this容易出问题；尽量让面向对象中的this指向对象）；

转载于:https://juejin.im/post/5a65772851882535a47cf91c