写在前面
之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器，得到了很多人的关注。鉴于很多人对这种手写插件的过程很好奇，所以写了几篇文章，来说说它的成长史~
在阅读本文之前，确保你有稍微看过 MultiPicker 的源码 喔~
点击查看源码 ，也可以在** npm **上找到他们：
一、 确认需求 & 构造函数的参数设计
想做自定义多级联动插件的最主要原因，当然还是因为在开发过程中频繁的遇到。
并且对多级联动的产品需求又是奇葩到不行，市面上的插件都满足不了我们产品的需求。所以，我不得不动手自己造。
在造轮子之前，先思考一个问题：
第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，一个卖萌出家的算法妹纸。
网友评论