手把手教你打造一款別緻的時間線外掛

首先呢，我要感謝一下和我配合的設計師同學，給了我一份如此漂亮的時間線設計稿。拿到設計稿後，我們首先要做的是去分析整個作品的結構，及設計意圖。當然這些工作我們可以提前完成，在設計師設計的時候進行充分溝通，而當我們動手去實現的時候就更為得心應手了。開始之前，我們還是先看看最終的互動效果：

第一步，分析控制元件結構，說多了反而容易引起誤導，直接看圖吧，直觀明瞭：

接下來，我來說說我為什麼要這麼去劃分。簡單的說，在我看來分析一個控制元件的結構，其實就是嘗試去發現一些規律性的東西。如上圖，在月份欄很明顯是在每月第一日的位置上方顯示當月標籤，因此第一行自然可以獨立成一個在特定位置顯示月份資訊的獨立區域。而第二行更明顯，將時間線上的每一天從左往右挨個兒顯示就行了，很顯然這一行上只會出現具體天的資料，所以我也將它獨立成一個區域。再往下，我們先看最下面的刻度區域，這裡存在一定的迷惑性，由於每月第一天的那條線高度剛好填充滿，而兩個月的第一天剛好將整條刻度劃分成一個一個的小區間，但事實上，我覺得它們其實就是一條橫向連通的刻度線，所以應該整個一行是一個整體。最後再來說說灰色、藍色重疊的那條區域，我們可以把藍色區域包含在灰色區域之中，也可以分成兩個同級的區域重疊在一起。但這裡需要注意一點：藍色區域表明的是一個時間區間，它的水平位置和寬度是隨時可變的，所以，考慮到後面定位的方便，未知的需求變化，我更傾向分成兩個獨立區域重疊起來。

第二步，細化每個區域中的共同點，不同點。月份欄，沒有問題，就是在每月第一天的位置顯示月份標籤，唯一不同的是每月第一天的橫座標（left）。日期欄基本與月份欄情況一致，多一點不同在於實現過程中考慮突出顯示【今天】。灰色線很簡單，從左到右一拉到底，藍色線很顯然是在選中某個事件標籤的時候才會出現，所以期初也不用考慮。最後還是刻度欄相對複雜一點，水平位置上的差異不再多說，每月第一天需要追加高刻度樣式，而且為了方便後面與事件標籤關聯，我們需要在生成刻度的時候，在每個刻度上存上對應的日期。大致就是這樣，下面就可以著手編碼了。

第三步，搭框架。就好像畫素描一樣，先勾勒出整個作品的骨架，再慢慢細化。

程式碼很簡單，先建立一個時間線全域性容器，再往裡面寫入第一步和第二步中我們分析出來的幾個獨立區塊，最後想整個時間線放入頁面中準備好的節點（wrap）中。

第四步，寫靜態資料，細節優化。根據前面的分析，各個部分的容器都已經準備就緒，接著就該將各部分應該呈現的內容寫入到對應的位置中去了，這一步程式碼會稍微多些。而且根據自己的需求，可能在某些判斷邏輯上會略顯不同，先看看我的示例程式碼吧：

第五步，整合服務端資料。經過以上程式碼的處理，我們只需簡單呼叫createTimeline(fromDate, toDate)就可以在頁面上得到一條靜態的時間軸，看起來像：

而我們在前面的工作中已經對每一個刻度標記了對應日期，現在只需從服務端將哪些日期對於有相應的特殊事件獲取回來並和時間軸上的刻度進行關聯，我們的工作就差不多了。這裡我們就不去模擬服務端的請求了，我們直接構造一份靜態資料來製作演示效果。我們假設服務端返回的資料結構如下：

我們可以使用下面的程式碼，將資料繫結到時間軸刻度上：

現在，我們的時間軸看起來更豐滿了：

第六步，繫結事件，實現點選對應標籤選中對應區間段及其他操作。同樣，有了如今的介面及元素，我們就該考慮如何實現點選某個標籤選中該標籤到下一個標籤這個區間了。其實，在我們繫結服務端資料的時候，我們已經做了一些準備，在第五步的程式碼中我們不難發現，我給每一個標籤對應的刻度元素新增了一個has-snap的標記class。那麼，接下來就簡單多了，選中區間無非就是當前被點選標籤對應的刻度到下一個含有has-snap標記的刻度之間的距離了。因此，我又設計了一個根據日期字串物件實現選中區間的方法，如下：

接著，就該是對每一個標籤繫結事件，讓每個標籤被點選的時候實現選中等效果了。這裡順便將時間軸的拖拽及回彈功能也一併提供了：

好了，到這裡我們的時間軸功能就全部完成了。只需要對上面的方法進行包裝，我們就可以得到一個功能比較完善的時間軸外掛了。例項演示：一個乾淨清爽的時間線例項