原生js使用面向物件的方法開發選項卡實體教程-有解無憂

本教程通過js面向物件的方法來封裝一個選項卡的實體，在實體中講解js的面向物件如何實作功能，

一般封裝好的選項卡程式，只需要一個div元素即可，其它元素都是通過json資料來生成，所以封裝好的選項卡實體，呼叫非常方便，先創建一個div元素，如下所示：

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

本教程不過多解釋面向物件的前世今生，直接通過實體說明具體的做法，先準備好需要的json資料，等下就可以直接在實體中生成選項卡，資料代碼如下所示：

var oData =https://www.cnblogs.com/jiangweiping/p/ [
  {
    label:'html',
    content:'HTML稱為超文本標記語言，是一種標識性的語言，它包括一系列標簽．通過這些標簽可以將網路上的檔案格式統一，使分散的Internet資源連接為一個邏輯整體，HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、影片、聲音、表格、鏈接等，'
  },
  {
    label:'css',
    content:'層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言，CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化，'
  },
  {
    label:'javascript',
    content:'JavaScript（簡稱“JS”） 是一種具有函式優先的輕量級，解釋型或即時編譯型的編程語言，雖然它是作為開發Web頁面的腳本語言而出名的，但是它也被用到了很多非瀏覽器環境中，JavaScript 基于原型編程、多范式的動態腳本語言，并且支持面向物件、命令式和宣告式（如函式式編程）風格，'
  },
];

現在可以按照慣例來分析功能，按步驟來撰寫具體代碼，

1. 創建建構式
原生javascript實體物件，一般都是通過建構式創建的，所以生成一個選項卡的實體物件之前，先創建一個建構式，如下所示：

//創建選項卡建構式，elem:DOM元素；data:生成選項卡的資料；option:選項卡物件相關選項屬性
function TabClass(elem,data){

}

2. 在建構式中設定屬性、創建標簽和內容元素，如下所示：

function TabClass(elem,data,option){
  //設定資料
  this.data =https://www.cnblogs.com/jiangweiping/p/ 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. 在建構式中設定默認選項屬性，如切換標簽的事件，默認顯示第幾個標簽等，如下所示：

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  data-index="' + i + '">' + e.label + '</li>';
      sContent += '<div  style="display:block">' + e.content + '</div>';
    }else{
      //通過資料中的label屬性生成標簽,data-index屬性是當前標簽的索引，用于切換標簽
      sLabel += '<li data-index="' + i + '">' + e.label + '</li>';
      //通過資料中的content屬性生成內容
      sContent += '<div >' + 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進行初始化，如下所示：

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'});

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/254378.html

標籤：JavaScript

上一篇：photo-sphere-viewer.js實作全景圖

下一篇：JavaScript-作用域