愚人节专题项目前端开发小结

加入17173后参与的第一个项目——《愚人节超级大忽悠》。

需求文档

程序需求说明

第一步：用户填写昵称，为方便后面设定独立的地址
第二步：进行选择
第三步：显示答案
- 回答正确显示：你太聪明了，想忽悠你，小编还要再下点功力。敢继续吗？
- 错误回答：答错了，获得猪头一个！
第四步：一共十道题，答完以后显示如下：
- 结果1、这么刁钻的题都答对了，你真是绝“顶”聪明！都说聪明的人容易秃头，小心为妙！
- 结果2、你太牛X了，居然获得N个猪头，获得“超级大猪头”称号！
- 这里要为每个玩家生成一个独立的地址。并统计这个独立地址带来多少新的玩家。（这里强调新的玩家，只是打开是没用的，要开始玩的才算新玩家。）

其他说明

已有XXXX个玩家参与了测谎挑战——统计所有参与此活动的用户数量
XX个玩家成为大猪头——统计有出错的用户（出错一题或N题，没有区别）都在此处统计。
XX个玩家挑战成功——统计在活动中没有任何出错的用户
XXX个玩家拉来新猪——玩家将自己的地址转发给朋友，引导朋友来参与游戏的用户。即多少个玩家推广了他的地址。

需求分解

整个流程拆分为三个功能模块实现，

填写昵称分配ID；
答题和谜底展示；
最终结果展示（猪圈和拉猪榜数据更新）和分享链接生成。

其中一、三步比较简单，发请求、更新数据即可；第二步占整个流程比重较大，逻辑和交互也相对复杂。
考虑到活动仅供娱乐，不涉及奖励和账号信息，可以说安全性要求较低，所以选择将题库、用户信息及答题进度等信息保存在浏览器端而不是服务端。增加答题过程流畅度。

前端实现

如前文所述，信息保存在浏览器端，为避免混乱，定义了命名空间为gSess 的全局变量，包含用户输入的昵称、后台分配的ID、邀请人ID（可选）、答题进度、打错数量、题库这六个属性；

数据结构的定义：将题库抽象为数组，题目抽象为对象；题库数组的元素为题目，题目对象的属性为题目信息（包含题目附图、题目、答案、答案附图等）。这样确保了题目数量和题目信息的可扩展性，到开发后期看来是明智的——虽然需求文档预期题目数量为10，但实际执行过程中需求变动为11，这样只需把题库数组中对应元素删除即可；更重要的是，联调测试阶段，可以根据测试需求控制变量，从而简化测试操作。比如在测试是否进猪圈（答错1题或以上）时，就让题库中只有一道题，通过控制这一题的对/错即可达到测试目的，否则只好记住每一题的正确答案才能模拟“挑战成功”的情况，费时更费力。