本教程通過js面向對象的方法來封裝一個選項卡的實例,在實例中講解js的面向對象如何實現功能。
一般封裝好的選項卡程序,只需要一個div元素即可。其它元素都是通過json數據來生成,所以封裝好的選項卡實例,調用非常方便。先創建一個div元素,如下所示:
<div class="tab_box" class="tabContainer"></div>
本教程不過多解釋面向對象的前世今生,直接通過實例說明具體的做法。先準備好需要的json數據,等下就可以直接在實例中生成選項卡。數據代碼如下所示:
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 基於原型編程、多範式的動態腳本語言,並且支持面向對象、命令式和聲明式(如函數式編程)風格。' }, ];
現在可以按照慣例來分析功能,按步驟來編寫具體代碼。
1. 創建構造函數
原生javascript實例對象,一般都是通過構造函數創建的。所以生成一個選項卡的實例對象之前,先創建一個構造函數,如下所示:
//創建選項卡構造函數,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. 在構造函數中設置默認選項屬性,如切換標籤的事件,默認顯示第幾個標籤等。如下所示:
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進行初始化,如下所示:
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'});