经验-computed和do-while的使用


computed和do-while的使用

​ 这几天一直在改上次live上出的bug(在此表扬下写bug小能手),今天在测试的时候又遇到了一点问题,在此记录一下。

computed的使用

​ 我们现在用的前端框架是KO(KnockOut,老项目在使用,新项目使用的是React),我要吐槽一下ko(上古框架),使用ko需要先绑定,当前端页面特别复杂的时候,什么parentroot这些层级结构,让你傻傻分不清,例如下面这个:

​ parent根本就没有一点语义话的感觉,回到正题。

React里面有可计算属性computedko里面也有,通过其它的值去计算当前需要的值。

​ 先介绍一下背景:

具体的关系如下图:

现在看起来一切还正常,但是当你选了这个人又不想给他发消息的话,可以将他从发送列表中删除,例如下面这样。

回到代码上的逻辑,最初的写法是:

  1. 先判断当前删除的pill是不是默认的user。
  2. 再判断pill是不是整个大的tab,例如上面的Operation Manager,是的话删除当前tab下所有存在发送列表里面的user。
  3. 最后删除剩下的pill。

第二步删除里面的用的是do-while,进行操作的。

但是他取出符合条件的user是随机取得,这里就会出现一个bug,还记得前面的可计算属性吗?imChecked,他会一直遍历整个user列表去执行指定的逻辑。如果他取出的user一直是默认带上的user,发送列表不仅仅存在默认的user,当你从发送列表去除这个默认的user,但是可计算属性通过其它值又把默认的user加上去了,这个时候就有意思了,一个操作是不断的删除,一个操作是一直添加,生成一个完美闭环,然后又遇到do-while,导致一直循环,栈溢出,页面卡死。

为什么会出现这样的情况?

  • 考虑不在周全 + 测试也不严谨。
  • 当使用这种可能会无限循环的语句,需要异常处理(try-catch or 使用标识符跳出 or 其它)。
  • 从业务角度来说,我觉得设计也是有缺陷的,上面的动图,他突然就出现了默认带上的user(本来是要删除的),默认带上也应该是用户第一次操作带上,而不是每次操作带上。

东西是好东西,但是注意使用场景。

我这个小菜鸟太难了。。。。。


文章作者: 木叶勇
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 木叶勇 !
 上一篇
JavaScript-宏任务、微任务 和 EventLoop JavaScript-宏任务、微任务 和 EventLoop
宏任务、微任务 和 EventLoop让我们来讲一个小故事 6月份在火辣辣的长沙,走在热浪滔天的五一广场,口干舌燥,想来一杯冰凉凉的奶茶,但买奶茶的人特别多,作为一个文明人,我当然选择排队。前面有一个火辣辣的美眉,她点了一杯波霸珍珠奶茶,然
2020-06-16
下一篇 
静态模块打包工具-webpack 静态模块打包工具-webpack
Webpack开始npm init –y //初始化npm npm install –-save-dev webpack webpack-cli //安装webpack,webpack-cli是命令行运行//webpack npm ins
  目录