一个简单H5投票页面的踩坑记录

一个简单H5投票页面的踩坑记录

前端时间公司要做一个投票相关的传统H5页面，要求对于每组投票要有限制，但又不能完全限制。听到这里我就懵逼了，这怎么做呢。最后制定的规则是：每人每天只能投10票。感觉好像这样的功能都在后端，前端只需要处理用户的操作逻辑就ok了。最后证明自己很傻很天真！

魔怔开启

后端同学说需求方不需要用户登录，你直接Cookie存一下就可以了。开始我以为是让我把Cookie附带传给他呢，就因为这最后接口写好后发现他的意思是我在前端存储这些信息！！！既然这样，没办法就自己吭哧吭哧搞呗。

重新梳理需求&制定方案

既然要存储数据，那就从头至尾重新梳理下需求：
1.不需要用户登录，要求每个人限投10票（其实只有用设备来识别）
2.投完票后再次进入页面要显示“已投票”
3.奖项列表页和公司详情页投票有关联性
基于以上的需求，以及后端同学给的数据结构。拟定的前端存储的数据结构
后端给的数据结构是这样的

奖项投票数据

{
    "reward_name": "奖项7",
    "reward_id": 1222,
    "votes_count": 10, #  可投票的候选数
    "candidates": [
        [
            "产品68",  # 公司名称
            "16856",   # candidate_id
            "23" # 投票数
        ],
        [
            "公司67",
            "16854",
            "1"
        ],
        [
            "产品66",
            "16852",
            "4252"
        ]
     ]
}

公司详情投票

{
    "candidate_id": 16894,
    "rewards": [
        [
            "2017最受机构青睐私募基金公司·股票型",   #奖项名称
            "77",                               #奖项ID
            "0",                                #奖项可参与投票的公司数量，为0时，不可投票
            "32"                                # 被投票数
        ]
    ],
    "products": [
        {
            "name": "兴业信托•朱雀18期",
            "candidate_id": 16900,
            "rewards": [
                [
                    "2017最具人气私募基金·股票型（三年期）",
                    "80",
                    "10",                       # 结构及其含义 同上
                    "32"                        # 被投票数
                ]
            ]
        }
    ],
    "candidate_name": "上海朱雀资产管理公司"
}

说实话，这样的数据结构在我看来相当不友好。要不是后端同学当面说明真是完全不知所以，沟通了一下发现需求方给的数据更加扯淡，最后能抽象成这样已经很不错了。没办法，既然接口好了，那就将就一下吧。
想了想如果用Cookie的话，对于简单的数据结构还可以。但是显然这这里不太适合，因为最后的这数据结构不可能太简单。我设计的前端数据存储结构是这样：

{
	"rewards_id": 23, //奖项id
  "count": 10, //可投票数
  "candidates":[45, 34, 44, 32] //已投公司
}

这样的话准备用localStorage来进行存储，但是明天怎么清空本地存储记录呢。那同样存个时间戳，每次登陆的时候去检测是否超过一天，如果超过就全部清空本地存储。看来这样可行。
每次投完票，就去遍历localstore。查看rewards_id是否存在，存在则去检索其中的candidates是否有id，没有就加进去，票数-1，发送请求。否则就return false
代码如下

	//投票操作
  $('.presents-box').on('click', '.js-vote', function() {
  	var that = $(this);
    var rewards_id = that.parents().parents().parents().attr('reward_id');
  	var candidates_id = that.attr('candidates_id');
    var flag = true;

    localArr = JSON.parse(localStorage.getItem('presents'));
    if(localArr != null) {
      for(var i in localArr) {
        if(localArr[i].rewards_id == rewards_id) {
          if(localArr[i].count > 0) {
            localArr[i].candidates.push(candidates_id);
            localArr[i].count -= 1;
            localStorage.setItem('presents', JSON.stringify(localArr));
          } else {
            alert('您已不能再投票！');
            return false;
          }
          flag = false;
        }
      }
      if(flag) {console.log((parseInt($('.detail-votes').attr('count')) - 1))
        var obj = {
          rewards_id: parseInt(rewards_id),
          count: (parseInt($('.detail-votes').attr('count')) - 1),
          candidates:[candidates_id]
        };
        localArr.push(obj);
        localStorage.setItem('presents', JSON.stringify(localArr));
      }
    }

  	//投票请求
  	$.ajax({
  		type: 'post',
  		url: 'http://www.nbd.com.cn/activity/jdj2/votes?reward_id='+rewards_id+'&candidate_id='+candidates_id,
  		success: function(res) {
  			that.parents().parents().addClass('voted');
        that.removeClass('js-vote');
        that.text('已投票');
  		}
  	});
  });

重刷新要显示已投结果，就用上面存储的本地数据去操作dom。这样需求就基本实现了，收工。
投票后的结果如图，

刷新后结果不变，跳转到公司详情页的投票页，已投也会显示。如图，

开始踩坑

第一脚坑

这样测试了几个数据，没什么问题。但当真是数据上去之后就出现了问题，投票好像老是不对。开始快速查原因，从逻辑开始，好像逻辑没有问题，只有一步一步打印结果。最后发现这个坑是我自己造成的

就是字段的名字给写错了，真是自己的坑自己填。

第二脚坑

在安卓上没有任何问题，当在ios上记录存储数据好像就有些问题了，刷新后不能记录。一开始我以为是平台差异性，在操作dom上会有些许差异。然后真机测试发现没有问题。那是怎么回事呢？设备上不好调试，但这种现象又只出现在真机设备上。之后copy一份在真机上调试打印数据，一点一点排查最终发现问题所在。

oldTime是存储的本地时间，当第一次时localStorage是null，并且在iOS上是string。而在Android上是null，所以在Android上没问题，在iOS上每次都是true。所以都会清除掉存储的本地数据。然后就做了如下修改，

var arr = JSON.parse(localStorage.getItem('presents')),
    nowTime = nowTime = new Date().getDate(),
    oldTime = JSON.parse(localStorage.getItem('time')),
    newArr = [];

//iOS上
oldTime = !!(navigator.userAgent).match(/(i[^;]+;( U;)? CPU.+Mac OS X/) && (oldTime == 'null') ? null : oldTime;

//固定时间间隔清除localStorage
if(Math.abs(nowTime - oldTime) >= 1 || oldTime == null ) {
  localStorage.clear();
  arr = JSON.parse(localStorage.getItem('presents'));
}

其实说坑也算不上很大，但是遇到的时候也是蛮坑人的。还有就是写代码变量名一定要明晰，造成不必要的麻烦。