前端技术分享-码匠 极客编程技术分享

您当前位于：JavaScript高级 ——> 面向对象系列-面向对象案例实战，Tab切换功能
上一篇：面向对象系列-混合模式是什么，如何实现？ 下一篇：原生JavaScript 计时器高级知识 实战案例

面向对象系列-面向对象案例实战，Tab切换功能

2015/05/03 19:53:59 | 作者：HTML5学堂（码匠） | 分类：JavaScript高级 | 关键词：面向对象,Tab切换

面向对象系列讲解——Tab切换实战

HTML5学堂：在上一篇文章当中，我们讲解了混合模式的书写方法，解释了如何使用new去解决这种工厂模式的缺陷，如何利用原型解决“方法”的重复创建。本文我将以Tab切换为实例，为大家讲解如何一步步将自己的代码修改为面向对象的代码。

进行Tab切换的基本结构和样式搭建

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>面向对象 - HTML5学堂 - 独行冰海</title>
  6. <style>
  7.     .tit span{
  8.         float: left;
  9.         width: 100px;
  10.         background: #ccf;
  11.     }
  12.     .tit .select{
  13.         background: #99f;
  14.     }
  15.     .con div{
  16.         display: none;
  17.         width: 300px;
  18.         height: 200px;
  19.         background: #cfc;
  20.     }
  21.     .con .show{
  22.         display: block;
  23.     }
  24. </style>
  25. </head>
  26. <body>
  27.     <div class="tit" id='tabTit'>
  28.         <span class='select'>1</span>
  29.         <span>2</span>
  30.         <span>3</span>
  31.     </div>
  32.     <div class='con' id='tabCon'>
  33.         <div class='show'>H5course</div>
  34.         <div>HTML5学堂</div>
  35.         <div>面向对象 - Tab切换</div>
  36.     </div>
  37. </body>
  38. <script>
  39.     var tabTit = document.getElementById('tabTit').getElementsByTagName('span');
  40.     var tabCon = document.getElementById('tabCon').getElementsByTagName('div');
  41.     for (var i = 0; i < tabTit.length; i++) {
  42.         tabTit[i].index = i;
  43.         tabTit[i].onclick = function(){
  44.             for (var i = 0; i < tabTit.length; i++) {
  45.                 tabTit[i].className = '';
  46.                 tabCon[i].className = '';
  47.             };
  48.             this.className = 'select';
  49.             tabCon[this.index].className = 'show';
  50.         }
  51.     };
  52. </script>
  53. </html>

第一步，不要出现函数中嵌套着函数,将函数提取出来（注意，上面用了不同于自己之前书写的tab的一种写法，为每个元素创建了一个属性index，存储索引值）

拆分后

  1. <script>
  2.     var tabTit = document.getElementById('tabTit').getElementsByTagName('span');
  3.     var tabCon = document.getElementById('tabCon').getElementsByTagName('div');
  4.     for (var i = 0; i < tabTit.length; i++) {
  5.         tabTit[i].index = i;
  6.         tabTit[i].onclick = tabFun;
  7.     };
  8.     function tabFun(){
  9.         for (var i = 0; i < tabTit.length; i++) {
  10.             tabTit[i].className = '';
  11.             tabCon[i].className = '';
  12.         };
  13.         this.className = 'select';
  14.         tabCon[this.index].className = 'show';
  15.     }
  16. </script>

第2步，创建构造函数、函数变方法、变量变属性、设置基本参数：

  1. /*
  2. * HTML5学堂 - H5course
  3. * 创建构造函数
  4. * 面向对象系列讲解——Tab切换实战
  5. */
  6. function TabSwitch(titId, titEle, conId, conEle){
  7.     this.tabTit = document.getElementById(titId).getElementsByTagName(titEle);
  8.     this.tabCon = document.getElementById(conId).getElementsByTagName(conEle);
  9.     for (var i = 0; i < this.tabTit.length; i++) {
  10.         this.tabTit[i].index = i;
  11.         this.tabTit[i].onclick = this.tabFun;
  12.     }
  13. }
  14. TabSwitch.prototype.tabFun = function(){
  15.     // 在这里，this指向发生了变化
  16.     for (var i = 0; i < this.tabTit.length; i++) {
  17.         this.tabTit[i].className = '';
  18.         this.tabCon[i].className = '';
  19.     };
  20.     this.tabTit[i].className = 'select';
  21.     this.tabCon[this.tabTit[i].index].className = 'show';
  22. }
  23. new TabSwitch('tabTit', 'span', 'tabCon', 'div');

欢迎沟通交流~HTML5学堂

第3步，修改调用方法，防止this指向有误，将方法提取到外部，利用原型进行书写，同时注意参数的传递：

  1. function TabSwitch(titId, titEle, conId, conEle){
  2.     var _this = this;
  3.     this.tabTit = document.getElementById(titId).getElementsByTagName(titEle);
  4.     this.tabCon = document.getElementById(conId).getElementsByTagName(conEle);
  5.     for (var i = 0; i < this.tabTit.length; i++) {
  6.         this.tabTit[i].index = i;
  7.         this.tabTit[i].onclick = function(){
  8.             // 调用的应当是tabSwitch的方法
  9.             // 传递的应该是被点击的这个元素
  10.             _this.tabFun(this);
  11.         }
  12.     }
  13. }
  14. TabSwitch.prototype.tabFun = function(objTab){
  15.     for (var i = 0; i < this.tabTit.length; i++) {
  16.         this.tabTit[i].className = '';
  17.         this.tabCon[i].className = '';
  18.     };
  19.     objTab.className = 'select';
  20.     this.tabCon[objTab.index].className = 'show';
  21. }
  22. new TabSwitch('tabTit', 'span', 'tabCon', 'div');

到此为止，我们的tab切换的面向对象代码已经构建完成了，当然如果使用了不同的结构，tab切换具体的内容也要进行相应的调整。个人比较推荐的结构如下：

  1. <div class="tit" id='tabTit'>
  2.     <span class='select'>1</span>
  3.     <span>2</span>
  4.     <span>3</span>
  5. </div>
  6. <div class='con' id='tabCon'>
  7.     <div class='show'>H5course</div>
  8.     <div>HTML5学堂</div>
  9.     <div>面向对象系列讲解——Tab切换实战</div>
  10. </div>

这样的基本结构，我们可以直接使用children（在获取标签的时候），而不需要进行4个参数的传递，只需要传递tabTit和tabCon即可。这样也更有利于我们代码的扩展性和重用性。

在下一篇文章当中，我将继续为大家讲解面向对象的基本知识，将采用拖拽作为实例进行面向对象的讲解，之所以使用拖拽，目的在于给大家介绍一下面向对象中的“继承”的基本知识和用法。谢谢大家~

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

上一篇：面向对象系列-混合模式是什么，如何实现？ 下一篇：原生JavaScript 计时器高级知识 实战案例