computed和do-while的使用
这几天一直在改上次live上出的bug(在此表扬下写bug小能手),今天在测试的时候又遇到了一点问题,在此记录一下。
computed的使用
我们现在用的前端框架是KO
(KnockOut,老项目在使用,新项目使用的是React),我要吐槽一下ko
(上古框架),使用ko
需要先绑定,当前端页面特别复杂的时候,什么parent
、root
这些层级结构,让你傻傻分不清,例如下面这个:
parent根本就没有一点语义话的感觉,回到正题。
React
里面有可计算属性computed
,ko
里面也有,通过其它的值去计算当前需要的值。
先介绍一下背景:
具体的关系如下图:
现在看起来一切还正常,但是当你选了这个人又不想给他发消息的话,可以将他从发送列表中删除,例如下面这样。
回到代码上的逻辑,最初的写法是:
- 先判断当前删除的pill是不是默认的user。
- 再判断pill是不是整个大的tab,例如上面的Operation Manager,是的话删除当前tab下所有存在发送列表里面的user。
- 最后删除剩下的pill。
第二步删除里面的用的是do-while
,进行操作的。
但是他取出符合条件的user是随机取得,这里就会出现一个bug,还记得前面的可计算属性吗?imChecked
,他会一直遍历整个user列表去执行指定的逻辑。如果他取出的user一直是默认带上的user,发送列表不仅仅存在默认的user,当你从发送列表去除这个默认的user,但是可计算属性通过其它值又把默认的user加上去了,这个时候就有意思了,一个操作是不断的删除,一个操作是一直添加,生成一个完美闭环,然后又遇到do-while
,导致一直循环,栈溢出,页面卡死。
为什么会出现这样的情况?
- 考虑不在周全 + 测试也不严谨。
- 当使用这种可能会无限循环的语句,需要异常处理(try-catch or 使用标识符跳出 or 其它)。
- 从业务角度来说,我觉得设计也是有缺陷的,上面的动图,他突然就出现了默认带上的user(本来是要删除的),默认带上也应该是用户第一次操作带上,而不是每次操作带上。
东西是好东西,但是注意使用场景。
我这个小菜鸟太难了。。。。。