前端是網頁或者app的前臺部分，通俗地說是使用者瀏覽網站或者使用app的時候，看到的頁面或者介面，是直接呈現給使用者的。因此前端對使用者體驗至關重要。

那麼在有限的頁面空間裡，前端如何保持良好的使用者體驗，又儘量多地展現內容以滿足業務需求呢？上圖是某寶官網首頁的區域性，通過觀察可以看出通過選項卡切換，在同一個區域實現了三個不同內容的切換展示。選項卡切換是怎麼實現的呢？

現在我們來搭建簡易版本的選項卡頁面結構，以小見大，拆解選項卡切換的功能實現。

選項卡切換功能，就是當我們選中某個選單的時候，頁面只顯示對應選單的內容。這個功能可以拆解成以下六個步驟：

第一步：1.獲取需要操作的所有元素；

第二步：2.宣告一個變數儲存前一個選中的選項卡選單的索引值；

第四步：4.清除前一個選中的選項卡選單和內容的樣式；

第五步：5.設定當前選項卡選單和內容的樣式；

第六步：6.儲存當前選項卡選單的索引值。

//1.獲取需要操作的所有元素//1.1獲取所有的選項卡選單let oItems = document.querySelectorAll(".tab-item");//1.1獲取所有的選項卡內容let oContents = document.querySelectorAll(".tab-content");//2.宣告一個變數儲存前一個選中的選項卡選單的索引值let previousIndex = 0;//3.給每個選項卡選單新增滑鼠點選事件for (let i = 0; i < oItems.length; i++) {  //3.1獲取當前的選項卡選單和內容  let currentItem = oItems[i];  let currentContent = oContents[i];  //3.2給當前的選項卡選單新增滑鼠點選事件  currentItem.onclick = function () {    //4.清除前一個選中的選項卡的樣式    //4.1獲取前一個選中的選項卡選單和內容    let preItem = oItems[previousIndex];     let preContent = oContents[previousIndex];    //4.2刪除前一個選中的選項卡選單和內容的樣式    preItem.className = preItem.className.replace("selected", "");    preContent.className = preContent.className.replace("current", "");    //5.設定當前選項卡的樣式    this.className = this.className + " selected";    currentContent.className = currentContent.className + " current";     //6.儲存當前選項卡選單的索引值    previousIndex = i;  }}

選項卡切換功能實現如下圖：

上面的程式碼雖然實現了選項卡切換功能，但是有侷限性。因為只實現了滑鼠點選切換，無法滿足業務需求，要實現其他切換方式，需要重新寫程式碼，不利於維護。面向物件的程式設計思想是軟體開發的方法，可以擴充套件到前端開發的互動式介面。應用面向物件的思想，拆解成九個步驟：

第一步：1.定義一個類，通過這個類可以建立選項卡；

第二步：2.獲取選項卡選單和內容；

第三步：3.宣告變數儲存前一個選中選項卡選單的索引值；

第六步：6.設定當前選項卡選單和內容的樣式，新增類名，注意類名前面要留空格；

第七步：7.儲存當前選項卡選單的索引值；

第八步：8.通過定義的類建立選項卡，需要傳入選項卡選單和內容的類名；

由於點選切換和移入切換實現樣式改變的程式碼是一樣的，所以可以進一步優化，把設定樣式的程式碼抽出來作為一個私有方法，這樣點選切換和移入切換選項卡，內部設定樣式的時候呼叫同一個方法即可，優化頁面效能，提高使用者體驗。

// 應用面向物件的思想重寫的選項卡切換程式碼//1.定義一個類，通過這個類可以建立選項卡class Tab {  //注意：形式引數oItemsSelector和oContentsSelector，用來傳入選項卡選單和內容的類名  constructor(oItemsSelector, oContentsSelector) {    //2.獲取選項卡選單和內容    this.oItems = document.querySelectorAll(oItemsSelector);    this.oContents = document.querySelectorAll(oContentsSelector);    //3.宣告變數儲存前一個選中選項卡選單的索引值    this.previousIndex = 0;  }  //4.新增事件  //4.1新增點選事件  addClickEvent() {    for (let i = 0; i < this.oItems.length; i++) {      //4.1.1獲取當前的選項卡選單和內容      let item = this.oItems[i];      //4.1.2給當前的選項卡新增滑鼠點選事件      item.onclick = () => {        //4.2.3呼叫設定樣式的方法        this._change(i);      }    }  }  //4.2新增滑鼠移入事件  addEnterEvent() {    for (let i = 0; i < this.oItems.length; i++) {      //4.2.1獲取選項卡選單      let item = this.oItems[i];      //4.2.2給選項卡新增滑鼠移入事件      item.onmouseenter = () => {        //4.2.3呼叫設定樣式的方法        this._change(i);      }    }  }  //注意：優化程式碼，設定樣式的程式碼是一樣的，可以抽出  _change(i) {    //5.獲取當前的選項卡選單和內容    let currentItem = this.oItems[i];    let currentContent = this.oContents[i];    //6.刪除前一個選中的選項卡選單和內容的樣式    //6.1獲取前一個選項卡的選單和內容    let preItem = this.oItems[this.previousIndex];    let preContent = this.oContents[this.previousIndex];    //6.2清除前一個選項卡選單和內容的樣式，刪除類名    preItem.className = preItem.className.replace("selected", "");    preContent.className = preContent.className.replace("current", "");    //7.設定當前選項卡選單和內容的樣式，新增類名，注意類名前面要留空格    currentItem.className = currentItem.className + " selected";    currentContent.className += " current";    //8.儲存當前選項卡選單的索引值    this.previousIndex = i;  }}//9.通過定義的類建立選項卡，需要傳入選項卡選單和內容的類名let tab = new Tab(".tab-item", ".tab-content");//9.1執行建立好的選項卡的滑鼠點選事件，實現滑鼠點選切換選項卡tab.addClickEvent();//9.2執行建立好的選項卡的滑鼠移入事件，實現滑鼠移入切換選項卡tab.addEnterEvent();