如何造一個移動端的聯動選擇器（一）

寫在前面

以前寫了一篇 MultiPicker -『爲移動端而生』的自定義多級聯動選擇器，獲得了不少人的關注。鑑於不少人對這種手寫插件的過程很好奇，因此寫了幾篇文章，來講說它的成長史~

在閱讀本文以前，確保你有稍微看過 MultiPicker 的源碼 喔~

點擊查看源碼 ，也能夠在 npm 上找到他們：

• 日期選擇器 - DateSelector - NPM.

• 自定義json選擇器 - MultiPicker. NPM.

1、 確認需求 & 構造函數的參數設計

想作自定義多級聯動插件的最主要緣由，固然仍是由於在開發過程當中頻繁的遇到。
而且對多級聯動的產品需求又是奇葩到不行，市面上的插件都知足不了咱們產品的需求。因此，我不得不動手本身造。

在造輪子以前，先思考一個問題：

第1個問題：『你都見過怎樣的多級聯動選擇器？』

好比 日期選擇器 、地區選擇器 、FAQ選擇器，或者 篩選條件選擇器。

我發現，日期選擇器和其餘選擇器有着本質的不一樣。
日期選擇器能夠經過系統函數計算獲得，而其餘選擇器能夠統稱爲須要自定義json的選擇器。

因此我開始着手打造這兩個選擇器：
『日期選擇器 - DateSelector』 & 『自定義json選擇器 - MulitiPicker』。

思考第2個問題：『參數要怎麼靈活和高效地設置？』

1.我發現，使用『日期選擇器』有兩個很是迫切、刁鑽的需求：

①：須要【年】【月】【日】【時】【分】這五種時間單位進行排列組合；

②：須要時間範圍精確到分鐘。好比，有一個特賣產品須要限制時間可選範圍爲【11月11日 - 11:11】開始，並於【12月12日 - 12:12 】結束。

在設置參數的時候考慮，能夠使用一個數組來表示時間點，數組的每一位都對應一個時間單位。
而且，考慮到不少只須要 部分時間單位 的用戶的用戶體驗，因此須要一個參數肯定用戶須要哪些時間單位，避免他們設置冗餘時間單位帶來的麻煩。

參數	字符類型	取值	說明
param	{Array}	eg:[1,1,0,0,0]	設置單位，元素分別對應設置['year','month','day','hour','minute'],1爲須要，0爲不須要,須要爲連續的1

好比，你只須要 【月日時分】這四個單位，你能夠這樣設置beginTime:

參數	字符類型	取值	說明
param	{Array}	eg:[0, 1, 1, 1, 1]	設置單位，元素分別對應設置['year','month','day','hour','minute'],1爲須要，0爲不須要,須要爲連續的1
beginTime	{Array}	eg:[3,27,12,12] 3月27日12點12分	設置開始時間點,空數組默認設置成1970年1月1日0時0分開始，數組的值對應param參數的對應值。

結束時間 endTime 和 recentTime 也是同理。

2.我發現，使用『自定義json選擇器』有一個很是迫切、刁鑽的需求：

①：用戶在自定義JSON的時候指望能夠存在不一樣級別的聯動。

好比，地區選擇器中可能同時存在【北京 → 朝陽】這樣的二級聯動，也可能存在【廣東 → 深圳 → 福田區】這樣的三級聯動。

因此要設計一種JSON的格式規範，既可以讓用戶更方便的表達本身想要的JSON，又能讓插件可以順利讀到JSON深度，從而動態適應聯動。
通過考慮，認爲最利落的JSON格式是對象數組，而且每一個對象的屬性有如下幾個：

屬性	字符類型	說明
id	{String}	該級聯動的惟一標識
value	{String}	該級聯動顯示的內容
child	{Array}	該級聯動是否須要子聯動，如須要則繼續傳入數組，如不須要子聯動，則不用設置child這個屬性

其中，child屬性能夠一直向下迭代，並不要求同一級聯動的各個對象要具備相同的子聯動。

預知後話

Github地址:『爲移動端而生』的自定義多級聯動選擇器

到此，需求已經明確。

預知後話，後兩天見分曉

我是嘉寶Appian，一個賣萌出家的算法妹紙。