引言
最近自己思考和書寫了一些小的元件方法，由此來總結一下一個簡單的js效果，由於我們的專案是比較成熟的專案，很多常用的元件，效果，外掛等專案中都應有盡有，幾乎很少自己再去實現某些效果，基本上過多的是去書寫應用邏輯，處理資料等，由於本週專案上出現了一個小bug,上線後我又臨時修改，原因竟然是由於當時那個左右滑動的tab樣式和方法是我直接將原來的程式碼複製過來的，沒多看，但是就是因為一個小處粘錯了，所以一個很邊緣的問題出現了，所以這件事件也告訴我，儘量不要複製程式碼，複製程式碼是一件不利於自己思考和學習的事情，而且後來我回過頭來再去修改的時候才發現以前的程式碼在書寫風格上有很多需要修改的，下面來總結一下MVVM框架下實現左右滑動切換tab的效果
首先看一張圖實現效果
下面這個圖是我做的思路圖
（1）班級的顯示個數不超過區域的寬度，所以正常顯示
（2) 當返回的資料過多，需要展示的狀態有如下三種(假設頁面最多可以顯示6個，資料有8個)
思路
第一步：在書寫這個效果的時候，首先在頁面佈局上要整理清楚思路,ul標籤顯示列表，我們使用的mvvm框架是司徒正美老師的框架Avalon,但是用的版本是1.5版本的
上面的DOM結構由此元件的5個屬性來決定它的展示，首先看到第一個屬性那就是，btnControl屬性，這個屬性的值決定是否要顯示左右切換的按鈕，可以看到下面那兩個按鈕的DOM渲染也是使用這個屬性控制，第二個屬性newTabs,這是一個tab項的陣列，它會隨著點選切換tab而及時變更，所以顯示的tab項會及時變更，第三四個屬性分別是leftEnabled,rightEnabled,這兩個屬性控制按鈕是否可點選，第五個屬性是一個方法，arrowClick用來點選切換
第二步：根據之前上面的DOM結構和最開始給的思路示意圖可以清晰地分析出
1.預設狀態下元件的btnControl，leftEnabled，rightEnabled屬性值均為false
2.在元件init初始化方法中，根據獲取到的原始tab列表判定btnControl這個屬性的true和flase值
this.btnControl = (this.tab_list.length>6);複製程式碼3.元件初始化時知道了tab_list的長度，由不同的長度做不同的邏輯
此處的邏輯單獨寫在一個方法中，因為當呼叫切換方法時，還需要此段邏輯的處理，通過一個變數startPos的值來擷取需要展示的tab項，startPos值代表了顯示在頁面上的第一項在陣列中的索引，因為顯示在頁面上的第一項會隨著點選的左右切換而變化，其實第一項顯示的內容就是陣列在擷取時的開始位置，此處需要思考清楚
4.初始化左右切換按鈕的狀態
初始化好了按鈕的狀態，根據不同的值，顯示不同的樣式類，控制按鈕的圖片樣式和是否可點選狀態
5.點選切換的方法
根據傳進來的不同切換變數，改變startPos值，每次切換完畢之後，都需要跟新要顯示的tab陣列和按鈕的狀態
第三步：以上這幾個步驟就是實現這一效果的全部思路和方法，由於專案框架不同，此處不提供所有的實現方法程式碼，第三步驟就是動手去實現和書寫這樣的效果，最好的做法其實是封裝一個元件，可以讓全專案組的成員都可以使用，可是目前我們的tab切換和tabpage載入有很高的耦合度，馬上拆出來我還沒有這個能力，這些想法也是得益於自己去思考如何實現這個功能，思考多了，想多了，總結多了自然能力也就上來了，到時候去做這樣具有挑戰的任務也就更有底氣了，新的一年裡過去兩週了寫了4篇文章，2篇技術文章，2篇讀書筆記，跟我年初給自己定的目標保持在一個節奏上，希望其他做技術的小夥伴，也多思考，多總結，多分享
完結
希望我的思路和總結可以幫助到其他人，也希望你多多給我提出意見，讓我們一起在學習的路上共同發現和成長，2107年歡迎你和我一起做一個不斷努力學習的知識分子
Cayley 一個不斷努力學習的女程式設計師