简单的选项卡改变为面向对象的写法的一点学习经验总结

简单的选项卡改变为面向对象的写法的一点学习经验总结

写在前面：这里是我学习过程中一个点击选项卡改变为面向对象的步骤，如有错误，欢迎大神指教，谢谢

一个简单的点击选项卡

谷歌展示的样子基本上是这样的：

以下是代码区：

**html:**
  <div class="div1">
    <input type="button" name="1" value="选项1" class="active">
    <input type="button" name="2" value="选项2">
    <input type="button" name="3" value="选项3">
    <div style="display:block">选项1的内容</div>
    <div>选项2的内容</div>
    <div>选项3的内容</div>
  </div>
  
**css:**
.div1 div{
  width: 300px;
  height: 200px;
  border: 1px solid lightblue;
  display: none;
}
.active{
  background: lightgreen;
}

**js**
window.οnlοad=function(){
  var oDiv=document.querySelector('.div1');
  var oInput=oDiv.getElementsByTagName('input');
  var div=oDiv.getElementsByTagName('div');
  for (var i = 0; i < oInput.length; i++) {
    oInput[i].index=i;
    oInput[i].οnclick=function(){
      for (var i = 0; i < oInput.length; i++) {
        oInput[i].className="";
        div[i].style.display="none";
      }
      this.className="active";
      div[this.index].style.display="block";
    }
  }
}

步骤一：第一次的小改动，可以参照以上的代码，获取元素变为了全局属性 另外的内容放在了init 和change函数中去了

步骤一：
//普通函数变形原则上：
1.尽量不要出现函数嵌套函数
2.可以有全局变量
3.把onload中不是赋值的语句单独放在单独的函数中

var oDiv=null;
var oInput=null;
var div=null;
window.οnlοad=function(){
   oDiv=document.querySelector('.div1');
   oInput=oDiv.getElementsByTagName('input');
   div=oDiv.getElementsByTagName('div');
   init();
}
function init(){
  for (var i = 0; i < oInput.length; i++) {
    oInput[i].index=i;
    oInput[i].οnclick=change;
  }
}
function change(){
  for (var i = 0; i < oInput.length; i++) {
    oInput[i].className="";
    div[i].style.display="none";
  }
  this.className="active";
  div[this.index].style.display="block";
}

步骤二：改为面向对象的选项卡，注意这里是变形过程不是最终结果，这里会出现this指向问题（以下步骤三是解决思路和办法）

步骤二：
// 面向对象写法的选项卡的tips
全局变量就是属性
函数就是方法
onload中创建对象

window.οnlοad=function(){
  var t1=new Tab();
  t1.init();
};
function Tab(){
  this.oDiv=document.querySelector('.div1');
  this.oInput=this.oDiv.getElementsByTagName('input');
  this.div=this.oDiv.getElementsByTagName('div');
}
Tab.prototype.init=function(){
  for (var i = 0; i < this.oInput.length; i++) {
      this.oInput[i].index=i;
      this.oInput[i].οnclick=this.change;
    }
}
Tab.prototype.change=function(){//在change函数被this.oInput[i]调用 所以这里的this其实是this.oInput[i]
  for (var i = 0; i < this.oInput.length; i++) {//这里的循环中this.oInput.length其实就是找不到的
    this.oInput[i].className="";//这里的是this 也是按钮
    this.div[i].style.display="none";//这里的是this 也是按钮
  }
  this.className="active";//这里的this是对象 所以加上className是对的
  this.div[this.index].style.display="block";//这里第一个this是对象 是错误的   第二个是对的
}

步骤三：这里上面因为this指向的解决思路和办法（友情提醒：对比上下的代码后的注释，更好的理解this的指向）

// 面向对象下 this的指向是会被修改的：一般会被事件 或者 定时器修改 原则上 尽量让面向对象中的this指向对象

//最终改动为以下
window.οnlοad=function(){
  var t1=new Tab();
  t1.init();
};
function Tab(){
  this.oDiv=document.querySelector('.div1');
  this.oInput=this.oDiv.getElementsByTagName('input');
  this.div=this.oDiv.getElementsByTagName('div');
}
Tab.prototype.init=function(){
  var This=this;//这里的是this指的是对象 t1存放在This上
  for (var i = 0; i < this.oInput.length; i++) {
      this.oInput[i].index=i;
      this.oInput[i].οnclick=function(){
        //this这里的this其实指代的按钮 this.oInput[i]
        //这里添加在一个function函数中 这里的this同样是按钮   按钮是没有change方法的 所以在循环之外 添加 var This=this;
        This.change(this);//这里将代表按钮的this传递到下面的change方法中用obj来接收
      }
    }
}
Tab.prototype.change=function(obj){//以上改动后this的指向就是t1对象了 obj接收指代按钮的this
  for (var i = 0; i < this.oInput.length; i++) {//这里的是this就是对象了 所以 这里就合理了
    this.oInput[i].className="";//同样这里也是合理了
    this.div[i].style.display="none";//这里也是合理了
  }
  obj.className="active";
  this.div[obj.index].style.display="block";//第一个this也是合理了 第二个用传递来的this的obj书写 就合理了
}

改变为面向对象写法后，就可以拓展功能了，比如加个自动播放函数什么 后续有时间会添加…