面向对象可以说是一种思维方式,它将世界上的万事万物抽象出来变成一个一个的单元,面向对象也是一种编程的技术,适用于大型信息系统的开发。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(指向当前对象)。