JS面向对象编程实现的Tab选项卡案例详解

JS面向对象编程实现的Tab选项卡案例详解

下面是一个简单面向过程的Tab选项卡。

<!DOCTYPE html> <html> <head> <style> #tabBox input { background: #F6F3F3; border: 1px solid #FF0000; } #tabBox .active { background: #E9D4D4; } #tabBox div { width:300px; height:250px; display:none; padding: 10px; background: #E9D4D4; border: 1px solid #FF0000; } </style> <meta charset="utf-8" /> <title>选项卡</title> <script> window.onload=function(){ var tabBox = document.getElementById('tabBox'); var tabBtn = tabBox.getElementsByTagName('input'); var tabDiv = tabBox.getElementsByTagName('div'); for(var i=0;i<tabBtn.length;i++){ tabBtn[i].index = i; tabBtn[i].onclick = function (){ for(var j=0;j<tabBtn.length;j++){ tabBtn[j].className=''; tabDiv[j].style.display='none'; } this.className='active'; tabDiv[this.index].style.display='block'; }; } }; </script> </head> <body> <div> <input type="button" value="主页" /> <input type="button" value="说说" /> <input type="button" value="日志" /> <div>这是主页内容</div> <div>这是说说内容</div> <div>这是日志内容</div> </div> </body> </html>

下面来慢慢改成面向对象的形式。

1.首先将嵌套的函数拿到window.onload外面,不能有函数嵌套,可以有全局变量。如下:所有的改写最终效果都不变。

<script> //将在嵌套函数里的变量提取到全局中 var tabBtn = null; var tabDiv = null; window.onload = function(){ var tabBox = document.getElementById('tabBox'); tabBtn = tabBox.getElementsByTagName('input'); tabDiv = tabBox.getElementsByTagName('div'); for(var i=0;i<tabBtn.length;i++){ tabBtn[i].index = i; //此处调用函数即可 tabBtn[i].onclick = clickBtn; } }; //将嵌套函数提取到全局中 function clickBtn(){ for(var j=0;j<tabBtn.length;j++){ tabBtn[j].className=''; tabDiv[j].style.display='none'; } this.className='active'; tabDiv[this.index].style.display='block'; }; </script>

2.将全局的变量变为对象的属性,全局的函数变为对象的方法;将window.onload里的代码提取到一个构造函数里面,在window.onload里创建对象即可;(下面的代码执行起来是有问题的)。

这里必须注意:在构造函数Tab里的this跟之前this所代表的是不同的(此处是通过new来创建对象的);在上面的示例中,this指的是调用者;在构造函数里,this指向的是var tab = new Tab() ,即tab这个对象,注意是对象。

说一下这段代码的问题:我们在Tab的原型上添加clickBtn方法后,clickBtn方法里的this本应该是指向var tab = new Tab()的,但是我们在 this.tabBtn[i].onclick = this.clickBtn; 将clickBtn添加给了this.tabBtn[i],即input按钮,clickBtn的所属由Tab对象变成了input按钮。

clickBtn的所属变成input按钮后,那么clickBtn里的this指向按钮,那再来看clickBtn里的代码,this.tabBtn、this.tabDiv,input按钮里有这两个属性吗?没有,所以会出错!

JS面向对象编程实现的Tab选项卡案例详解

JS面向对象编程实现的Tab选项卡案例详解

   

<script> window.onload = function(){ var tab = new Tab("tabBox"); } /** * 将之前window.onload里的代码提到一个构造函数里 * [可以将这个Tab构造函数想象成一个Tab类] * @param {Object} id:选项卡id以参数的形式传入 */ function Tab(id){ var tabBox = document.getElementById(id); //将之前的全局变量变为对象的属性 this.tabBtn = tabBox.getElementsByTagName('input'); this.tabDiv = tabBox.getElementsByTagName('div'); for(var i=0;i<this.tabBtn.length;i++){ this.tabBtn[i].index = i; //此处这种方式调用函数,已经将clickBtn的所属变成this.tabBtn[i] this.tabBtn[i].onclick = this.clickBtn; } }; //将之前的全局函数添加到构造函数的原型里,作为对象的一个方法 Tab.prototype.clickBtn = function(){ alert(this); //HTMLInputElement for(var j=0;j<this.tabBtn.length;j++){ this.tabBtn[j].className=''; this.tabDiv[j].style.display='none'; } this.className='active'; this.tabDiv[this.index].style.display='block'; }; </script>

3.将clickBtn的调用放在一个函数里,这样就不会改变clickBtn的所属了。alert(this);此时弹出的是一个Object,说明clickBtn的所属关系没变,还是Tab对象。但是还有另一个问题,此时clickBtn里的this指向tab对象,那么this.className、this.index,此处的this指的是tab对象,那么对象中有这两个属性吗?没有,还会出错!所以第4步继续改造。

JS面向对象编程实现的Tab选项卡案例详解

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/1b83427ee05fa35e19dfc62e59842027.html