之前写了一篇 MultiPicker -『为移动端而生』的自定义多级联动选择器，得到了很多人的关注。鉴于很多人对这种手写插件的过程很好奇，所以写一个它的成长史~
在阅读本文之前，确保你有稍微看过 MultiPicker 的源码 喔~
想做自定义多级联动插件的最主要原因，当然还是因为在开发过程中频繁的遇到。 并且对多级联动的产品需求又是奇葩到不行，市面上的插件都满足不了我们产品的需求。所以，我不得不动手自己造。
在造轮子之前，先思考一个问题：
比如
日期选择器、地区选择器、FAQ选择器，或者筛选条件选择器。
我发现，日期选择器和其他选择器有着本质的不同。
日期选择器可以通过系统函数计算得到，而其他选择器可以统称为需要自定义json的选择器。
所以我开始着手打造这两个选择器： 『日期选择器 - DateSelector』 & 『自定义json选择器 - MulitiPicker』。
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属性可以一直向下迭代，并不要求同一级联动的各个对象要具有相同的子联动。
实现弹层的思路：【插入DOM → 初始化联动的数据 → 绑定事件 】
① 在插入DOM的部分( initDomFuc )，采用字符串拼接的方式插入DOM（而不是使用字符串模板）。
联动的主要结构式如下图:
每个联动是一个 div，div 包裹着一个 ul，ul 中的每个 li 就是联动的值
其中div的高度是5个 li 的高度，ul的高度是实际的所有 li 的高度。
② 在初始化联动数据的部分( initReady )，在头尾分别插入两个空字符，能够起到占位符的作用，这样在计算手势的translate3d的时候更方便。
③ 为DOM元素绑定事件时，具体做法有两步：
第一步：为每个初始化好的ul绑定touch事件( initReady )；
第二步：为一些操作按钮绑定事件( initBinding )。
③ - 第一步：touch事件的种类无非就是 touchstart、touchmove 和 touchend。但需要在每次滑动的时候记录一些数据。这是为了实现一个滑动加速度的效果，下文会说到。
③ - 第二步：用到了自己封装的一个简单的事件监听函数on：
这个函数主要用在【触发】【取消】和【提交】这几个重要按钮上。
PS：在设计样式的过程中考虑到，完整使用【年月日时分】五种时间单位的场景居多，为了优化界面和用户体验，所以在日期选择器的设计中，需要设计一种带tab切换效果的完整版日期选择器。其他场景中不会出现。
我发现，无论用户使用哪个手指，只要用户的滑动弧长在短时间内比较大的话，说明用户比较想快速向上滑或是向下滑。比如，在选择出生年份的时候，用户肯定会想快速滑到上面的部分，就会用很快速的手势向下滑动一个比较大的弧长。这时候就应该有一个滑动加速度的效果。
那么如何实现呢，如何判断用户想要快速滑动呢？
很简单，只需要考虑，单位时间内的速度变化率，也就是加速度，就行了。
之前提到过，在touchmove的过程中会有一个 【speed数组】用来存储滑动时，手势的速度。
并在touchend中调用 initSpeed 函数，确定最后transition-duration的值。
initSpeed 的主要工作是计算 speed 中的速度方差，方差和加速度是成正相关的。
所以当方差大于0.1时，ul 的实际滑动距离是手势滑动距离的两倍，transition-duration的值为0.2s；
而当方差小于0.1的时候，就认为基本是匀速滑动，ul 的实际滑动距等于手势滑动距离，取 speed[0] 作为 transition-duration 的值。
确定好了滑动距离之后，就可以计算最后停留的位置 translate3d ( initPosition )。
滑动加速度的效果就基本实现了。
一个最明显的区别就是，日期选择器可以在多级之间反复调整，而自定义JSON 选择器只能从高级联动往下调整。
比如，在用日期选择器选择生日的时候。不小心操作失误了，选择成了1994-1-16
我想要修改年份为1995。当我滑动第一级联动时，后面的联动是不会改变的。
但是当我选择城市的时候，如果我选择了北京，下面的联动等级一定会全部配合 “北京” 这个高级联动，向下自适应改变。
选择了广东，下面的联动等级也一定会全部配合 “广东” 这个高级联动，向下自适应改变。
所以为了区别这两个不一样的联动场景，出现了两套不一样的联动算法。
前面说到，用户如果设置了【月日时分】这四个时间单位的话，他可能会输入beginTime：[3,27,12,12]， endTime 和 recentTime 也是类似。但是计算机如何快速识别这个开始时间，其实就是[2016, 3, 27, 12, 12] 呢？
如果把用户设置的时间点称为【虚拟时间】，而计算机能够处理的完整时间点称为【实际时间】，这个问题就简化了许多。
我做了一个小技巧，就是在我判断用户参数合法性的同时，把用户作为参数传入的【虚拟时间】( 如 ：beginTime、endTime、 recentTime），转变成一个代码能够快速识别的【真实时间】（如：begin_time、end_time、 recent_time）。
另外，idxArr、maxHeight、distance 对应下标的值是和【虚拟时间】对应下标的值保持一致。
在我最新的重构算法中，我的解决方案是:
当ul被滑动时，就从最高级的联动开始【递归调用】。被递归的函数叫做checkRange。
实现步骤如下：
① 每次touchend的时候，会先将当前滑动的结果保存，再调用checkRange(0);
② checkRange会根据你的参数，直接设置下一级联动应该有的数据范围：
③ 判断好下一级的数据范围后，需要判断是否滑动到了开始时间(即最顶)，或结束时间(即最底)：
这里的loop是自己封装的 for 循环，一定要理解这里的dir到底是如何计算的。
④ 判断好dir的值之后，就需要对前面第②步生成的数据范围进行调整：
如果滑到了开始时间的分界点，需要处理min的值；
如果滑到了结束时间的分界点，需要处理max的值；
处理好后，再调用 initRangeArr 更新dom。
⑤ 在initRangeArr中更新dom之后，需要配合数据，调整好 ul 的translate3d。通过一系列的计算，得到targetLong的值，用来设置translate3d。并且同步好所有控制结果的数据，不仅仅是更新recent_time、resultArr，还需要更新 maxHeight和 distance。
⑥ 然后递归调用checkRange；
PS：注意区分【虚拟时间】和【真实时间】的下标含义哦。
【虚拟时间】的下标是指，在界面上的每个ul的下标，比如有三个ul，那么就是 [0, 1, 2];
【真实时间】的下标是指，【0：年】【1：月】【2：日】.... 以此类推。
由于前面规范了自定义JSON的格式，所以，如果判断下一级联动的级数问题，就转化成为了**【如何计算下一级 child 的深度】**问题。
我的解决方案是：迭代调用 checkArrDeep 来，就能判断是否还有子联动，从而计算深度。
具体实现步骤如下：
① 先传入一个需要计算深度的对象给 checkArrDeep，判断如果还有child则迭代，并计算深度。
② 生成所有子联动对应的 li，并更新dom，同时把子联动的 translate3d 都设置成 (0, 0, 0);
这步和 日期选择器 有着本质的不同，这里的子联动一定会更新，并且所有子联动一定会 translate3d(0 ,0 ,0)；
PS: 这里有一个小技巧，就是一定要记录在更新联动之前的上一次联动的级数。我用
ulCount来记录上一次联动的级数，在完成所有更新操作之后，最后更新ulCount，以便下次迭代使用。③ 如果增加了联动级数（需要ulCount来判断），则为新增加的联动 ul 绑定新的touch事件。如果减少了联动级数，则清除dom。
④ 重新设置联动的宽度，并同步更新所有计算联动会使用到的数据，包括ulCount：
最完美的解决方案，就是让用户自己写callback，自己解决所有的数据格式问题。
用户可以在回调中 拼接自己想要的字符串 或 构造后台想要的json格式。很大程度上的增加了灵活度。
至此， 『日期选择器 - DateSelector』 和 『自定义json选择器 - MulitiPicker』就算完成了。