关于提升程序编码效率的思考

最近在做一个需求，前台页面使用Vue+ElementUI实现，

        需求详情：绿框中的图片由后台数据库加载后渲染到页面，绿框里面勾选了多少个图片，那么红框中就实时显示勾选了多少图片，支持用户增加勾选或减少勾选

        当使用Checkbox多选框组件的时候，查了一下API，只有@change事件，坑人的事情来了，当触发@change的时候，它传入的是勾选的值，而不能对单个勾选做出响应，也就是我不知道它上一刻到底是勾选了还是没勾选

        比如，页面一开始默认勾选了[0,1,2]，我再勾选一个3，参数传入的数据就是：[0,1,2,3]；我取消勾选了2，参数传入的数据就是[0,1]。

        但是问题来了，我上次的勾选值你没给记录啊，我还要拿着上次的值去后台取消勾选啊

开始磨人之路：

• 新建一个currentList去记录当前勾选的值，和el-ui的model的值相同
  • 记录的是当前实时勾选了多少复选框
• 新建了一个choiceList去记录当前勾选的值
  • 去后台更新勾选新增的记录
• 新建一个cancelList去记录取消勾选的值
  • 去后台更新勾选取消的记录
• 新建了一个preList记录一开始页面加载的值
  • 和currentList比较，如果currentList的值在preList里面不存在，那说明新增的一条的记录是勾选，把索引加到choiceList里面
• 新建了一个totalList记录用户一共点击过复选框的值
  • 和current比较，如果totalList的值不在current里面，说明用户取消了勾选，把索引加到cancelList里面

        既然数据机构做好了，那就开始把，于是一整天的时间都在维护这五个List上面了，过程之曲折，逻辑之复杂（还有其他页面效果也掺杂在js里面）

        当用户勾选复选框的时候，触发change()方法，在preList和currentList循环里面，对choiceList进行添加一条记录，同时因为choiceList加了一条记录，那么cancelList就要减去一条记录；在totalList和currentList循环里面，cancelList减去一条记录，同时因为cancelList减去了一条记录，那么choiceList就要加去一条记录。

        总是以为弄好了，实测总是这里的List多一个，那里的List少一个，于是面多加水，水多加面，大量的经历用于维护这五个List，连循环里面的代码都拿出来再单独维护一套，代码越写越多，写到后面越来越不自信。

        写到晚上加班，头昏脑涨，去饮水机打水，突然“分而治之”思想灵光乍现，重新调整数据结构

• 新建一个addArray记录用户到底勾选了多少个复选框
• 新建一个reduceArray记录用户到底取消了多少个复选框
• 把choiceList清空，把addArray的值映射到choiceList里面
• 把cancelList清空，把reduceArray的值映射到choiceList里面

搞定，原来的两三百行代码，最后只用二三十行

总结：一开始总是想做出联动效果

        这个图片打了勾，那么增加一条打钩的索引记录，减少一条取消的索引记录       

        这个图片取消了勾，那么减少一条打钩的索引记录，增加一条取消的记录

        这么复杂的联动程序，我管他呢，我只记录好你打了多少勾，取消了多少勾，然后每次触发change()，我把记录索引的List全部清空，不去维护，直接全部映射进去。