JS面向对象编程实现的Tab选项卡案例详解
本文实例讲述了JS面向对象编程实现的Tab选项卡。分享给大家供大家参考,具体如下:
Tab选项卡案例
下面是一个简单面向过程的Tab选项卡。
选项卡 这是主页内容
下面来慢慢改成面向对象的形式。
1.首先将嵌套的函数拿到window.onload外面,不能有函数嵌套,可以有全局变量。如下:所有的改写最终效果都不变。
2.将全局的变量变为对象的属性,全局的函数变为对象的方法;将window.onload里的代码提取到一个构造函数里面,在window.onload里创建对象即可;(下面的代码执行起来是有问题的)。
这里必须注意:在构造函数Tab里的this跟之前this所代表的是不同的(此处是通过new来创建对象的);在上面的示例中,this指的是调用者;在构造函数里,this指向的是vartab=newTab(),即tab这个对象,注意是对象。
说一下这段代码的问题:我们在Tab的原型上添加clickBtn方法后,clickBtn方法里的this本应该是指向vartab=newTab()的,但是我们在this.tabBtn[i].onclick=this.clickBtn;将clickBtn添加给了this.tabBtn[i],即input按钮,clickBtn的所属由Tab对象变成了input按钮。
clickBtn的所属变成input按钮后,那么clickBtn里的this指向按钮,那再来看clickBtn里的代码,this.tabBtn、this.tabDiv,input按钮里有这两个属性吗?没有,所以会出错!
3.将clickBtn的调用放在一个函数里,这样就不会改变clickBtn的所属了。alert(this);此时弹出的是一个Object,说明clickBtn的所属关系没变,还是Tab对象。但是还有另一个问题,此时clickBtn里的this指向tab对象,那么this.className、this.index,此处的this指的是tab对象,那么对象中有这两个属性吗?没有,还会出错!所以第4步继续改造。
window.onload=function(){ vartab=newTab("tabBox"); } /** *选项卡 *@param{Object}id:选项卡id */ functionTab(id){ vartabBox=document.getElementById(id); this.tabBtn=tabBox.getElementsByTagName('input'); this.tabDiv=tabBox.getElementsByTagName('div'); for(vari=0;i4.以参数的形式将点击的按钮传入clickBtn中
window.onload=function(){ vartab=newTab("tabBox"); } /** *选项卡 *@param{Object}id:选项卡id */ functionTab(id){ vartabBox=document.getElementById(id); this.tabBtn=tabBox.getElementsByTagName('input'); this.tabDiv=tabBox.getElementsByTagName('div'); for(vari=0;i5.最终版——将代码提取到一个单独的js文件中,在用的时候引入即可。一般花大时间去写一个面向对象的程序,就是为了能够复用,以及方便的使用。
Tab.js
/** *选项卡 *@param{Object}id选项卡id */ functionTab(id){ vartabBox=document.getElementById(id); this.tabBtn=tabBox.getElementsByTagName('input'); this.tabDiv=tabBox.getElementsByTagName('div'); for(vari=0;i使用:tab.html可以看到使用的时候,就可以很简单的创建两个选项卡出来了。
选项卡 这是主页内容