面向对象--传统的过程式和面向对象式编写选项卡-优快云博客

现在，有这样一个布局

<style>
#div1 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
.active{ background:red;}
</style>
<body>
<div id="div1">
    <input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block">11111</div>
    <div>22222</div>
    <div>33333</div>
</div>
</body>

用传统的过程式编写选项卡

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++){
        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';
        };
    }

};

用面向对象方式编写选项卡

面向对象的选项卡
原则
- 先写出普通的写法，然后改成面向对象写法
a.普通方法变型
- 尽量不要出现函数嵌套函数
- 可以有全局变量
- 把onload中不是赋值的语句放到单独函数中

下面开始变形

<script>
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++){
        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 = 'active';
    aDiv[this.index].style.display = 'block';
}
</script>

b.改成面向对象

全局变量就是属性
函数就是方法
Onload中创建对象
改this指向问题 : 事件或者是定时器,尽量让面向对象中的this指向对象

<script>
window.onload = function(){ 
    var t1 = new Tab();
    t1.init();  
};

function Tab(){
    this.oParent = document.getElementById('div1');
    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 = 'active';
    this.aDiv[obj.index].style.display = 'block';
};
</script>

复习this指向

<script>
oDiv.onclick = function(){
    this : oDiv
};
oDiv.onclick = show;
function show(){
    this : oDiv
}
oDiv.onclick = function(){
    show();
};
function show(){
    this : window
}
</script>