tab面向对象写法

面向对象可以说是一种思维方式，它将世界上的万事万物抽象出来变成一个一个的单元，面向对象也是一种编程的技术，适用于大型信息系统的开发。tab是在网页中常见的一种特效（组件），本文将会讲解如何用面向对象的方式来实现tab效果。
在讲解tab的面向对象的实现方式之前，我会先用过程式的方法来将tab选项卡特效实现一遍，让大家在对比中学习。
其中的html结构如下：

<button class="active">1</button>   
<button>2</button>
<button>3</button>
<div class="active">111111</div>
<div>222222</div>
<div>333333</div>

其中的css代码如下：

div {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
}
button.active {
    background: #f00;
}
div {
    display: none;
}
div.active {
    display: block;
}

因为这个tab选项卡的特效比较简单，所以它的html结构与css样式也比较简单。效果图如下：
这里写图片描述
结构与样式都写好了，接下来就是写行为啦，所以JS代码（过程式）如下：

window.onload = function () {
    //过程式写法
    var btnArr = document.getElementsByTagName('button');
    var divArr = document.getElementsByTagName('div');
    for (var i = 0; i < btnArr.length; i++) {
        btnArr[i].index = i;
        btnArr[i].onclick = function () {
            for (var i = btnArr.length - 1; i >= 0; i--) {
                btnArr[i].className = '';
                divArr[i].className = '';
            }
            this.className = 'active';
            console.log(this.index);
            divArr[this.index].className = 'active';
        }
    }
    console.log(btnArr);
}

注意，我们将索引保存在button的自定义属性index中，然后我们通过button的index属性来控制相应的div块的显示与隐藏。
接下来，我们就要把过程式的写法改写成面向对象的写法，在改写之前需要先对过程式的写法进行变型。变型后的代码如下：

//先变型:
//尽量不要出现函数嵌套函数
//可以有全局变量
//把onload中不是赋值的语句放到单独函数中
var btnArr = null;
var divArr = null;
window.onload = function () {
    init ();    
}
function change () {
    for (var i = btnArr.length - 1; i >= 0; i--) {
        btnArr[i].className = '';
        divArr[i].className = '';
    }
    this.className = 'active';
    console.log(this.index);
    divArr[this.index].className = 'active';
}
function init () {
    btnArr = document.getElementsByTagName('button');
    divArr = document.getElementsByTagName('div');
    for (var i = 0; i < btnArr.length; i++) {
        btnArr[i].index = i;
        btnArr[i].onclick = change;
    }
}

然后再将变型后的代码变成面向对象的代码：

// 改成面向对象写法
window.onload = function () {
    var tab = new Tab();
    tab.init();
}
// 全局变量就是属性
function Tab () {
    this.btnArr = null;
    this.divArr = null;
}
// 函数就是对象的方法（注意this，this指向当前对象）
Tab.prototype.change = function() {
    for (var i = btnArr.length - 1; i >= 0; i--) {
        btnArr[i].className = '';
        divArr[i].className = '';
    }
    this.className = 'active';
    console.log(this.index);
    divArr[this.index].className = 'active';
}

Tab.prototype.init = function() {
    btnArr = document.getElementsByTagName('button');
    divArr = document.getElementsByTagName('div');
    console.log(this);
    for (var i = 0; i < btnArr.length; i++) {
        btnArr[i].index = i;    
        console.log(this.change);
        btnArr[i].onclick = this.change;
    }
}
// onload中创建对象

就这样，我们就用面向对象的方法实现了一个简单的tab选项卡的效果。是不是很有成就感呀。
总结：

先用过程式的方法将tab选项卡实现一遍
从过程式的代码中抽出对象的属性与方法，对过程式的代码进行变型
将变型后的代码改写成面向对象的代码，注意this（指向当前对象）。

猜你喜欢