原生js使用面向對象的方法開發選項卡實例教程

本教程經過js面向對象的方法來封裝一個選項卡的實例,在實例中講解js的面向對象如何實現功能。javascript

通常封裝好的選項卡程序,只須要一個div元素便可。其它元素都是經過json數據來生成,因此封裝好的選項卡實例,調用很是方便。先建立一個div元素,以下所示:css

<div class="tab_box" class="tabContainer"></div>

 

本教程不過多解釋面向對象的前世此生,直接經過實例說明具體的作法。先準備好須要的json數據,等下就能夠直接在實例中生成選項卡。數據代碼以下所示:html

var oData = [
  {
    label:'html',
    content:'HTML稱爲超文本標記語言,是一種標識性的語言。它包括一系列標籤.經過這些標籤能夠將網絡上的文檔格式統一,使分散的Internet資源鏈接爲一個邏輯總體。HTML文本是由HTML命令組成的描述性文本,HTML命令能夠說明文字,圖形、動畫、聲音、表格、連接等。'
  },
  {
    label:'css',
    content:'層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。CSS不只能夠靜態地修飾網頁,還能夠配合各類腳本語言動態地對網頁各元素進行格式化。'
  },
  {
    label:'javascript',
    content:'JavaScript(簡稱「JS」) 是一種具備函數優先的輕量級,解釋型或即時編譯型的編程語言。雖然它是做爲開發Web頁面的腳本語言而出名的,可是它也被用到了不少非瀏覽器環境中,JavaScript 基於原型編程、多範式的動態腳本語言,而且支持面向對象、命令式和聲明式(如函數式編程)風格。'
  },
];

 

如今能夠按照慣例來分析功能,按步驟來編寫具體代碼。java

1. 建立構造函數
原生javascript實例對象,通常都是經過構造函數建立的。因此生成一個選項卡的實例對象以前,先建立一個構造函數,以下所示:node

//建立選項卡構造函數,elem:DOM元素;data:生成選項卡的數據;option:選項卡對象相關選項屬性
function TabClass(elem,data){

}

 

2. 在構造函數中設置屬性、建立標籤和內容元素,以下所示:編程

function TabClass(elem,data,option){
  //設置數據
  this.data = data;
  //設置選項卡包裹
  this.wrap = elem;
  //建立標籤包裹
  this.labelBox = document.createElement('ul');
  //設置標籤包裹class
  this.labelBox.className = 'label_box';
  //建立內容包裹
  this.contentBox = document.createElement('div');
  //設置內容包裹class
  this.contentBox.className = 'content_box';
}

 

3. 在構造函數中設置默認選項屬性,如切換標籤的事件,默認顯示第幾個標籤等。以下所示:json

function TabClass(elem,data,option=null){

  /*...*/

  //設置默認屬性
  this.options = {
    //默認切換標籤是點擊事件
    event:'click',
    //默認當前標籤顯示第一個
    index:0
  }
  //修改選項屬性
  if(option instanceof Object){
    for(let k in option){
      this.options[k] = option[k];
    }
  }
}

 

4. 在構造函數的原型上建立creatDataElem方法。
在creatDataElem方法中,經過json數據生成標籤和內容元素,並把全部元素放到包裹元素中。以下所示:瀏覽器

TabClass.prototype.creatDataElem = function(){
  //聲明標籤html代碼字符串變量
  var sLabel = '';
  //聲明內容html代碼字符串變量
  var sContent = '';
  //經過循環數據,生成標籤和內容元素
  this.data.forEach((e,i)=>{
    //判斷選項中默認當前標籤和顯示內容
    if(i==this.options.index){  
      sLabel += '<li class="active" data-index="' + i + '">' + e.label + '</li>';
      sContent += '<div class="content" style="display:block">' + e.content + '</div>';
    }else{
      //經過數據中的label屬性生成標籤,data-index屬性是當前標籤的索引,用於切換標籤
      sLabel += '<li data-index="' + i + '">' + e.label + '</li>';
      //經過數據中的content屬性生成內容
      sContent += '<div class="content">' + e.content + '</div>';
    }
  });
  //把標籤和內容分別放到包裹元素中
  this.labelBox.innerHTML = sLabel;
  this.contentBox.innerHTML = sContent;
  //把標籤和內容放到外包元素中
  this.wrap.appendChild(this.labelBox);
  this.wrap.appendChild(this.contentBox);
}

 

5. 在構造函數的原型上建立init方法,用於初始化選項卡實例對象。
在init方法中,調用creatDataElem方法生成DOM元素;給標籤包裹元素綁定事件,用於切換標籤等。以下所示:網絡

TabClass.prototype.init = function(){
  //聲明_self變量,用於在事件函數中指向實例對象
  var _self = this;
  //調用creatDataElem方法生成DOM元素
  this.creatDataElem();
  //在標籤上綁定事件
  this.labelBox.addEventListener(this.options.event,function(event){
    //獲取點擊的DOM元素
    var eTarget = event.target;
    //判斷當前點擊的不是當前標籤
    if(eTarget.nodeName.toLowerCase() == 'li' && eTarget.className != 'active'){
      //修改當前標籤
      _self.options.index = eTarget.dataset.index;
      //從新生成DOM元素
      _self.creatDataElem();
    }
  });
}

 

6. 在TabClass構造函數中調用this.init進行初始化,以下所示:app

function TabClass(elem,data,option){
  
  /* ...  */
  
  /* ...  */
  
  //初始化實例對象
  this.init();
}

 

如今能夠獲取外包元素,並生成選項卡實例,代碼以下:

var eContainer = document.getElementById('tabContainer');
new TabClass(eContainer,oData);

 

能夠根據我的喜愛編寫樣式實現選項卡布局,具體效果以下所示:

 

 

封裝成對象以後,使用起來就很是方便,若是想要默認顯示第二個標籤,並綁定mouseover事件,能夠添加選項,以下調用:

var eContainer = document.getElementById('tabContainer');
new TabClass(eContainer,oData,{index:1,event:'mouseover'});
相關文章
相關標籤/搜索