寫在前面
之前寫了一篇 MultiPicker -『為移動端而生』的自定義多級聯(lián)動選擇器，得到了很多人的關(guān)注。鑒于很多人對這種手寫插件的過程很好奇，所以寫了幾篇文章，來說說它的成長史~
在閱讀本文之前沾乘，確保你有稍微看過 MultiPicker 的源碼 喔~
點擊查看源碼 ，也可以在** npm **上找到他們：
一浑测、 確認(rèn)需求 & 構(gòu)造函數(shù)的參數(shù)設(shè)計
想做自定義多級聯(lián)動插件的最主要原因媳危，當(dāng)然還是因為在開發(fā)過程中頻繁的遇到。
并且對多級聯(lián)動的產(chǎn)品需求又是奇葩到不行吝沫，市面上的插件都滿足不了我們產(chǎn)品的需求。所以滥崩，我不得不動手自己造。
在造輪子之前讹语，先思考一個問題：
第1個問題：『你都見過怎樣的多級聯(lián)動選擇器钙皮？』
比如
日期選擇器、地區(qū)選擇器顽决、FAQ選擇器短条，或者篩選條件選擇器。
我發(fā)現(xiàn)才菠，日期選擇器和其他選擇器有著本質(zhì)的不同茸时。
日期選擇器可以通過系統(tǒng)函數(shù)計算得到，而其他選擇器可以統(tǒng)稱為需要自定義json的選擇器鸠儿。
所以我開始著手打造這兩個選擇器：
『日期選擇器 - DateSelector』 & 『自定義json選擇器 - MulitiPicker』屹蚊。
思考第2個問題：『參數(shù)要怎么靈活和高效地設(shè)置厕氨？』
1.我發(fā)現(xiàn)进每，使用『日期選擇器』有兩個非常迫切、刁鉆的需求：
①：需要【年】【月】【日】【時】【分】這五種時間單位進行排列組合命斧；
②：需要時間范圍精確到分鐘田晚。比如，有一個特賣產(chǎn)品需要限制時間可選范圍為【11月11日 - 11:11】開始国葬，并于【12月12日 - 12:12 】結(jié)束贤徒。
在設(shè)置參數(shù)的時候考慮，可以使用一個數(shù)組來表示時間點汇四，數(shù)組的每一位都對應(yīng)一個時間單位接奈。
并且，考慮到很多只需要 部分時間單位 的用戶的用戶體驗通孽，所以需要一個參數(shù)確定用戶需要哪些時間單位序宦，避免他們設(shè)置冗余時間單位帶來的麻煩。
| 參數(shù) | 字符類型 | 取值 | 說明 |
|---|---|---|---|
| param | {Array} | eg:[1,1,0,0,0] | 設(shè)置單位背苦，元素分別對應(yīng)設(shè)置['year','month','day','hour','minute'],1為需要互捌，0為不需要,需要為連續(xù)的1 |
比如，你只需要 【月日時分】這四個單位行剂，你可以這樣設(shè)置beginTime:
| 參數(shù) | 字符類型 | 取值 | 說明 |
|---|---|---|---|
| param | {Array} | eg:[0, 1, 1, 1, 1] | 設(shè)置單位秕噪，元素分別對應(yīng)設(shè)置['year','month','day','hour','minute'],1為需要，0為不需要,需要為連續(xù)的1 |
| beginTime | {Array} | eg:[3,27,12,12] 3月27日12點12分 | 設(shè)置開始時間點,空數(shù)組默認(rèn)設(shè)置成1970年1月1日0時0分開始厚宰，數(shù)組的值對應(yīng)param參數(shù)的對應(yīng)值腌巾。 |
結(jié)束時間 endTime 和 recentTime 也是同理。
2.我發(fā)現(xiàn)，使用『自定義json選擇器』有一個非常迫切壤躲、刁鉆的需求：
①：用戶在自定義JSON的時候期望可以存在不同級別的聯(lián)動城菊。
比如，地區(qū)選擇器中可能同時存在【北京 → 朝陽】這樣的二級聯(lián)動碉克，也可能存在【廣東 → 深圳 → 福田區(qū)】這樣的三級聯(lián)動凌唬。
所以要設(shè)計一種JSON的格式規(guī)范，既能夠讓用戶更方便的表達(dá)自己想要的JSON漏麦，又能讓插件能夠順利讀到JSON深度客税，從而動態(tài)適應(yīng)聯(lián)動。
經(jīng)過考慮撕贞，認(rèn)為最利落的JSON格式是對象數(shù)組更耻，并且每個對象的屬性有以下幾個：
| 屬性 | 字符類型 | 說明 |
|---|---|---|
| id | {String} | 該級聯(lián)動的唯一標(biāo)識 |
| value | {String} | 該級聯(lián)動顯示的內(nèi)容 |
| child | {Array} | 該級聯(lián)動是否需要子聯(lián)動，如需要則繼續(xù)傳入數(shù)組捏膨，如不需要子聯(lián)動秧均，則不用設(shè)置child這個屬性 |
其中，child屬性可以一直向下迭代号涯，并不要求同一級聯(lián)動的各個對象要具有相同的子聯(lián)動目胡。
預(yù)知后話
Github地址:『為移動端而生』的自定義多級聯(lián)動選擇器
到此，需求已經(jīng)明確链快。
預(yù)知后話誉己，后兩天見分曉
我是嘉寶Appian，一個賣萌出家的算法妹紙域蜗。
