最近转到了[百度师傅][ shifu ]团队,接受百度师傅的开发,刚开始就遇到一个不小的技术项目,本文简要记录下,备忘。
先来简单介绍下需求,最终做出来的效果如下图所示,你其实可以来到百度师傅的服务详情页体验下最终效果(今天就会上线啦):
上面的例子其实可以理解为三组单选按钮,只是这个单选按钮可以取消选中,三组必须全选中才能预约服务。
其中有些选项是不可选的,如上图,选中iphone4后,金色就不能选了。
整个按钮的信息,及按钮之间相互制约是否可选的信息都是从后端打过来了,这就需要我们有一组算法来在点击的时候实时计算当前按钮的点击情况。
这个其实不是必须的,简单介绍下百度师傅的技术选型,jquery + baidutemplate 。
一开始是没有思路的,我其实想到在js中维护一套,当前按钮状态的数据,每次按钮点击,计算按钮状态,然后重新渲染模版。
其实按钮状态->模版渲染是很简单的,难点在于计算按钮的状态。
先来说下数据结构,其实主要用到四个数据结构。
这个数据结构用来存放按钮的状态,上面例子中的数据结构片段如下:
"buttonGroup": [{ "variable": "type", "text": "选择类型", "list": [{ "value": 1, "text": "iPhone 4", "subText": "" "status": 1 }, { "value": 2, "text": "iPhone 4s", "subText": "" "status": 1 } ] }]
其中大部分都是展现文案,和变量名称。
其中status用来存储按钮的状态:
注意:value=1 不一定排在数组的第一个,value和数序无关,数组的顺序是按钮的展示顺序。
这个数据结构主要用来查找按钮在buttonGroup中的索引。上面例子中的按钮数据结构对应的map如下所示:
{ "type": { index: 0, vmap: { 1: 0, 2: 1 } } }
通过这个数据结构,我们拿到按钮的type就可快速找到这个type在按钮展示数组中的索引为0,通过当前选中按钮的值,比如iPhone 4被选中,其value为1,通过1可以在vmap中快读定位到其在buttonGroup中的索引为0。
这个数据结构用来存储可达的路径,典型的可大路径如下所示:
[{ "path": { "type": 1, "method": 1, "color": 1 }, "price": 17900, "regularPrice": 29900, "stockout": false }]
这个数据结构的意思代表,按钮组中对应的值可选中。
这个数据结构用来存储当前按钮的选中状态:
{ type: 1, method: 2, color: null }
其中null代表未选中,数字代表选中按钮的值。
看起来好晕的感觉,我们来举个例子吧:
比如上面的选中状态,第一组按钮值为1的被选中,第二组值为2的被选中,第三组未选中。
将type值为1的按钮置为选中
method类似 。。。
上面的算法还是可以改进的,有些数据结构可以省略,写了这么多年前端页面,第一次写这么复杂的逻辑,(/ □ /)。
最后做个广告,如果你有电脑除尘,重装系统,手机碎屏方面的需求,就来 百度师傅 吧。