首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMarch 03, 2020

本文实例讲述了JS面向对象编程实现的Tab选项卡。分享给大家供大家参考，具体如下：

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 id="tabBox">
    <input type="button" value="主页" class="active" />
    <input type="button" value="说说" />
    <input type="button" value="日志" />
    <div style="display:block;">这是主页内容</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选项卡案例详解

window.onload = function(){
      var tab = new Tab("tabBox");
    }
  
    /**
     * 选项卡
     * @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;
        //将this保存成一个变量，就可以在下面代码中调用对象的方法了
        var _this = this;
        //此处这种方式调用函数，就不会改变clickBtn方法的所属关系
        this.tabBtn[i].onclick = function(){
          //注意此处不能直接使用this，this指向this.tabBtn[i]
          _this.clickBtn();
        };
      }
    };
    //点击选项卡按钮
    Tab.prototype.clickBtn = function(){
      alert(this); //Object
      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';
    };

4. 以参数的形式将点击的按钮传入clickBtn中

window.onload = function(){
      var tab = new Tab("tabBox");
    }
  
    /**
     * 选项卡
     * @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;
        var _this = this;
        this.tabBtn[i].onclick = function(){
          //注意参数this代表的是this.tabBtn[i]，即input按钮
          _this.clickBtn(this);
        };
      }
    };
    //将点击的按钮以参数的形式传入
    Tab.prototype.clickBtn = function(btn){
      for(var j=0;j<this.tabBtn.length;j++){
        this.tabBtn[j].className='';
        this.tabDiv[j].style.display='none';
      }
      btn.className='active';
      this.tabDiv[btn.index].style.display='block';
    };

5.最终版 —— 将代码提取到一个单独的js文件中，在用的时候引入即可。一般花大时间去写一个面向对象的程序，就是为了能够复用，以及方便的使用。

Tab.js

/**
 * 选项卡
 * @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;
    var _this = this;
    this.tabBtn[i].onclick = function(){
      _this.clickBtn(this);
    };
  }
};
/**
 * 为Tab原型添加点击选项卡方法
 * @param {Object} btn 点击的按钮
 */
Tab.prototype.clickBtn = function(btn){
  for(var j=0;j<this.tabBtn.length;j++){
    this.tabBtn[j].className='';
    this.tabDiv[j].style.display='none';
  }
  btn.className='active';
  this.tabDiv[btn.index].style.display='block';
};

使用：tab.html 可以看到使用的时候，就可以很简单的创建两个选项卡出来了。

<!DOCTYPE html>
<html>
<head>
  <style>
    .tab input {
      background: #F6F3F3;
      border: 1px solid #FF0000;
    }
    .tab .active {
      background: #E9D4D4;
    }
    .tab div {
      width:300px; 
      height:250px; 
      display:none;
      padding: 10px;
      background: #E9D4D4;
      border: 1px solid #FF0000;
    }
  </style>
  <meta charset="utf-8" />
  <title>选项卡</title>
  <!-- 引入tab.js -->
  <script type="text/javascript" src="../js/tab.js" ></script>
  <script>  
    window.onload = function(){
      var tab1 = new Tab("tabBox1");     
      var tab2 = new Tab("tabBox2");
    }  
  </script>
</head>
 
<body>
  <div class="tab" id="tabBox1">
    <input type="button" value="主页" class="active" />
    <input type="button" value="说说" />
    <input type="button" value="日志" />
    <div style="display:block;">这是主页内容</div>
    <div>这是说说内容</div>
    <div>这是日志内容</div>
  </div>
  <br />
  <div class="tab" id="tabBox2">
    <input type="button" value="技术" class="active" />
    <input type="button" value="工具" />
    <input type="button" value="网站" />
    <div style="display:block;">Js、Vue</div>
    <div>VSCode</div>
    <div>CSDN</div>
  </div>
</body>
</html>

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

再来简单总结一下JS面向对象中的this，this一般会在两种情况下出问题，一是使用定时器、二是事件，从上面的例子中也可以看出来。注意下面的说法是在构造函数里哦，其它情况下，this指向的是调用者。

可以看到效果没有将姓名显示出来，其实看到这里原因应该很清楚了，就是第14行代码中this.name，此处的this指向谁？指向window，因为setInterval是属于window的。

<!DOCTYPE html>
<html>
  <meta charset="UTF-8" />
  <head>
    <script>
      
      function Person(name){
        this.name = name;
        //定时器
        setInterval(this.showName, 3000);
      }
      Person.prototype.showName = function(){
        alert(this); //window
        alert("姓名："+this.name);
      }
      
      var p1 = new Person("jiangzhou");
      
    </script>
  </head>
</html>

 解决办法：上面例子中已经列出来了，就是用一个function将要执行的代码包起来，使其所属关系不会发生变化，注意function里调用方法时使用的是外部变量'_this'。事件的处理在上面的例子中已经说明了。

function Person(name){
   this.name = name;
   var _this = this;
   setInterval(function(){
      this.showName();
   }, 3000);
}
Person.prototype.showName = function(){
   alert(this); //[Object Object]
   alert("姓名："+this.name); //姓名：jianghzou
}      
var p1 = new Person("jiangzhou");

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

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

- Author -

叶落森

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 Javascript
JS面向对象编程基础篇（三） 继承操作实例详解
Mar 03 #Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 #Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 #Javascript
JS面向对象编程基础篇（二） 封装操作实例详解
Mar 03 #Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 #Javascript
JS面向对象编程基础篇（一） 对象和构造函数实例详解
Mar 03 #Javascript
vue中改变滚动条样式的方法
Mar 03 #Javascript
mounted(1) frozenset(1) 脚手架(2) 子查询(1) el-table(1) set(1) Next.js(1) Mybatis-Plus(3) TableField(1) create(1)
You might like
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
PHP学习笔记（一） 简单了解PHP
2014/08/04 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
javascript 进阶篇1 正则表达式，cookie管理，userData
2012/03/14 Javascript
javascript数组的使用
2013/03/28 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
python实现简单的文字识别
2018/11/27 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
Diamondback自行车：拥有你的冒险
2019/04/22 全球购物
英国伦敦的睡衣品牌：Asceno
2019/10/06 全球购物
俄罗斯运动、健康和美容产品在线商店：Lactomin.ru
2020/07/23 全球购物
德国亚马逊官方网站：Amazon.de
2020/11/15 全球购物
一些关于MySql加速和优化的面试题
2014/01/30 面试题
好矿嫂事迹材料
2014/01/21 职场文书
不假外出检讨书
2014/01/27 职场文书
《石榴》教学反思
2014/03/02 职场文书
心理健康活动总结
2014/04/30 职场文书
服务承诺书格式
2014/05/21 职场文书
师德师风承诺书
2014/05/23 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
先进基层党组织材料
2014/12/25 职场文书
实习推荐信格式模板
2015/03/27 职场文书
如何写新闻稿
2015/07/18 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
ES6 解构赋值的原理及运用
2021/05/25 Javascript