寫在前面
之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯動選擇器，得到了很多人的關注。鑒于很多人對這種手寫插件的過程很好奇，所以寫了幾篇文章，來說說它的成長史~
在閱讀本文之前，確保你有稍微看過 MultiPicker 的源碼 喔~
點擊查看源碼 ，也可以在** npm **上找到他們：
一、 確認需求 & 構造函數的參數設計
想做自定義多級聯動插件的最主要原因，當然還是因為在開發(fā)過程中頻繁的遇到。
并且對多級聯動的產品需求又是奇葩到不行，市面上的插件都滿足不了我們產品的需求。所以，我不得不動手自己造。
在造輪子之前，先思考一個問題：
第1個問題：『你都見過怎樣的多級聯動選擇器？』
比如
日期選擇器、地區(qū)選擇器、FAQ選擇器，或者篩選條件選擇器。
我發(fā)現，日期選擇器和其他選擇器有著本質的不同。
日期選擇器可以通過系統(tǒng)函數計算得到，而其他選擇器可以統(tǒng)稱為需要自定義json的選擇器。
所以我開始著手打造這兩個選擇器：
『日期選擇器 - DateSelector』 & 『自定義json選擇器 - MulitiPicker』。
思考第2個問題：『參數要怎么靈活和高效地設置？』
1.我發(fā)現，使用『日期選擇器』有兩個非常迫切、刁鉆的需求：
①：需要【年】【月】【日】【時】【分】這五種時間單位進行排列組合；
②：需要時間范圍精確到分鐘。比如，有一個特賣產品需要限制時間可選范圍為【11月11日 - 11:11】開始，并于【12月12日 - 12:12 】結束。
在設置參數的時候考慮，可以使用一個數組來表示時間點，數組的每一位都對應一個時間單位。
并且，考慮到很多只需要 部分時間單位 的用戶的用戶體驗，所以需要一個參數確定用戶需要哪些時間單位，避免他們設置冗余時間單位帶來的麻煩。
| 參數 | 字符類型 | 取值 | 說明 |
|---|---|---|---|
| param | {Array} | eg:[1,1,0,0,0] | 設置單位，元素分別對應設置['year','month','day','hour','minute'],1為需要，0為不需要,需要為連續(xù)的1 |
比如，你只需要 【月日時分】這四個單位，你可以這樣設置beginTime:
| 參數 | 字符類型 | 取值 | 說明 |
|---|---|---|---|
| param | {Array} | eg:[0, 1, 1, 1, 1] | 設置單位，元素分別對應設置['year','month','day','hour','minute'],1為需要，0為不需要,需要為連續(xù)的1 |
| beginTime | {Array} | eg:[3,27,12,12] 3月27日12點12分 | 設置開始時間點,空數組默認設置成1970年1月1日0時0分開始，數組的值對應param參數的對應值。 |
結束時間 endTime 和 recentTime 也是同理。
2.我發(fā)現，使用『自定義json選擇器』有一個非常迫切、刁鉆的需求：
①：用戶在自定義JSON的時候期望可以存在不同級別的聯動。
比如，地區(qū)選擇器中可能同時存在【北京 → 朝陽】這樣的二級聯動，也可能存在【廣東 → 深圳 → 福田區(qū)】這樣的三級聯動。
所以要設計一種JSON的格式規(guī)范，既能夠讓用戶更方便的表達自己想要的JSON，又能讓插件能夠順利讀到JSON深度，從而動態(tài)適應聯動。
經過考慮，認為最利落的JSON格式是對象數組，并且每個對象的屬性有以下幾個：
| 屬性 | 字符類型 | 說明 |
|---|---|---|
| id | {String} | 該級聯動的唯一標識 |
| value | {String} | 該級聯動顯示的內容 |
| child | {Array} | 該級聯動是否需要子聯動，如需要則繼續(xù)傳入數組，如不需要子聯動，則不用設置child這個屬性 |
其中，child屬性可以一直向下迭代，并不要求同一級聯動的各個對象要具有相同的子聯動。
預知后話
Github地址:『為移動端而生』的自定義多級聯動選擇器
到此，需求已經明確。
預知后話，后兩天見分曉
我是嘉寶Appian，一個賣萌出家的算法妹紙。
