选项卡面向对象练习
面向对象的选项卡 原则 ：先写出普通的写法，然后改成面向对象写法 。
普通方法变型：
尽量不要出现函数嵌套函数
可以有全局变量
把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>
效果如下:
