JS面向對象編程實現(xiàn)的Tab選項卡案例詳解

更新時間：2020年03月03日 12:16:30 作者：葉落森

這篇文章主要介紹了JS面向對象編程實現(xiàn)的Tab選項卡,結合具體案例形式詳細分析了JS基于面向對象程序設計實現(xiàn)Tab選項卡的相關操作技巧,需要的朋友可以參考下

本文實例講述了JS面向對象編程實現(xiàn)的Tab選項卡。分享給大家供大家參考，具體如下：

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;">這是主頁內(nèi)容</div>
    <div>這是說說內(nèi)容</div>
    <div>這是日志內(nèi)容</div>
  </div>
</body>
</html>

下面來慢慢改成面向對象的形式。

1.首先將嵌套的函數(shù)拿到window.onload外面，不能有函數(shù)嵌套，可以有全局變量。如下：所有的改寫最終效果都不變。

<script>
    //將在嵌套函數(shù)里的變量提取到全局中
    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;
        //此處調用函數(shù)即可
        tabBtn[i].onclick = clickBtn;
      }
    };
    
    //將嵌套函數(shù)提取到全局中
    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.將全局的變量變?yōu)閷ο蟮膶傩?，全局的函?shù)變?yōu)閷ο蟮姆椒?；將window.onload里的代碼提取到一個構造函數(shù)里面，在window.onload里創(chuàng)建對象即可；(下面的代碼執(zhí)行起來是有問題的)。

這里必須注意：在構造函數(shù)Tab里的this跟之前this所代表的是不同的(此處是通過new來創(chuàng)建對象的)；在上面的示例中，this指的是調用者；在構造函數(shù)里，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按鈕里有這兩個屬性嗎？沒有，所以會出錯！

<script>   
    window.onload = function(){
      var tab = new Tab("tabBox");
    }
  
    /**
     * 將之前window.onload里的代碼提到一個構造函數(shù)里
     * [可以將這個Tab構造函數(shù)想象成一個Tab類]
     * @param {Object} id：選項卡id以參數(shù)的形式傳入
     */
    function Tab(id){
      var tabBox = document.getElementById(id);
      //將之前的全局變量變?yōu)閷ο蟮膶傩?
      this.tabBtn = tabBox.getElementsByTagName('input');
      this.tabDiv = tabBox.getElementsByTagName('div');
      
      for(var i=0;i<this.tabBtn.length;i++){
        this.tabBtn[i].index = i;
        
        //此處這種方式調用函數(shù)，已經(jīng)將clickBtn的所屬變成this.tabBtn[i]
        this.tabBtn[i].onclick = this.clickBtn;
      }
    };
    //將之前的全局函數(shù)添加到構造函數(shù)的原型里，作為對象的一個方法
    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的調用放在一個函數(shù)里，這樣就不會改變clickBtn的所屬了。alert(this);此時彈出的是一個Object，說明clickBtn的所屬關系沒變，還是Tab對象。但是還有另一個問題，此時clickBtn里的this指向tab對象，那么this.className、this.index，此處的this指的是tab對象，那么對象中有這兩個屬性嗎？沒有，還會出錯！所以第4步繼續(xù)改造。

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;
        //此處這種方式調用函數(shù)，就不會改變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. 以參數(shù)的形式將點擊的按鈕傳入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(){
          //注意參數(shù)this代表的是this.tabBtn[i]，即input按鈕
          _this.clickBtn(this);
        };
      }
    };
    //將點擊的按鈕以參數(shù)的形式傳入
    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 可以看到使用的時候，就可以很簡單的創(chuàng)建兩個選項卡出來了。

<!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;">這是主頁內(nèi)容</div>
    <div>這是說說內(nèi)容</div>
    <div>這是日志內(nèi)容</div>
  </div>
  <br />
  <div class="tab" id="tabBox2">
    <input type="button" value="技術" class="active" />
    <input type="button" value="工具" />
    <input type="button" value="網(wǎng)站" />
    <div style="display:block;">Js、Vue</div>
    <div>VSCode</div>
    <div>CSDN</div>
  </div>
</body>
</html>

再來簡單總結一下JS面向對象中的this，this一般會在兩種情況下出問題，一是使用定時器、二是事件，從上面的例子中也可以看出來。注意下面的說法是在構造函數(shù)里哦，其它情況下，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>

解決辦法：上面例子中已經(jīng)列出來了，就是用一個function將要執(zhí)行的代碼包起來，使其所屬關系不會發(fā)生變化，注意function里調用方法時使用的是外部變量'_this'。事件的處理在上面的例子中已經(jīng)說明了。

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.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

vue雙向綁定簡要分析
這篇文章主要介紹了vue雙向綁定的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
JavaScript實現(xiàn)簡易購物車最全代碼解析(ES6面向對象)
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易購物車最全代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
javascript 常用功能總結
javascript 常用功能總結，學習js的朋友可以參考下
2012-03-03
js中hash和ico的關聯(lián)分析
這篇文章主要介紹了js中hash和ico的關聯(lián)分析,以實例形式分析了location.hash與ico的加載順序關系,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
如何基于uni-app實現(xiàn)微信小程序一鍵登錄與退出登錄功能
uni-app 是使用vue的語法+小程序的標簽和API的一套框架,是一套代碼多端使用,目前是大前端的一種趨勢,下面這篇文章主要給大家介紹了關于如何基于uni-app實現(xiàn)微信小程序一鍵登錄與退出登錄功能的相關資料,需要的朋友可以參考下
2022-09-09
TopList標簽和JavaScript結合兩例
TopList標簽和JavaScript結合兩例...
2007-08-08
js腳本加載失敗問題解決辦法
在項目中經(jīng)常會用到動態(tài)加載js,下面這篇文章主要給大家介紹了關于js腳本加載失敗問題的解決辦法,文中通過實例代碼介紹的非常詳細,對大家學習或者使用js具有一定的參考學習價值,需要的朋友可以參考下
2023-06-06
引用其它js時如何同時處理多個window.onload事件
引用其它js時，其js卻使用了window.onload事件，這樣的話，引入的頁面的onload事件就有可能執(zhí)行不了，那么該如何解決呢？祥看下文
2014-09-09
JS實現(xiàn)進度條順滑版詳細方案
最近在小程序里，做了一個類似微博刷視頻的需求，其中有一部分功能需要實現(xiàn)自定義進度條，在做完第一版之后發(fā)現(xiàn)進度條不順滑，而后想查查網(wǎng)上看有沒有什么好的方案，但最終沒找到合適的。下面給大家分享JS進度條順滑版實現(xiàn)代碼，需要的朋友參考下吧
2021-08-08
純JS實現(xiàn)動態(tài)時間顯示代碼
本篇文章主要是對純JS實現(xiàn)動態(tài)時間顯示的代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02