前端如何避免bug的产生?

项目环境:react生态圈

界面功能基本和:增(新增一条数据)、删(删除一条数据)、查(展示列表)、改(修改数据)挂钩。

一、展示数据列表相关[判空,控制显示距离,分页是否有效,搜索是否有效]

1.渲染数据的时候要做非空判断,有数据展示列表,没有数据展示一个空的div

2.需要展示哪些字段,最好能提前订好,然后就是排列顺序,如果有特殊要求,提前提出来,当然还有就是比如:内容字段很长,是否需要做截取展示也需要考虑进去

3.列表需要展示大量数据,是否对接了分页接口,分页组件功能是否正常

4.一般会提供关键字的搜索功能,搜索功能是否有效,多条件是否有效,需要自我验证一次

二、删除功能

1.一般系统里面功点对应的是:启用和禁用,组件是switch开关,虽然功能很简单,不过需要对接后台接口,做完功能后,测试一遍,然后F5刷新一下界面,看看更改是否生效

三、新增功能

1.新增一条数据,两种模式:一弹出模态框做,这个针对数据少的情况;二跳转到一个新的界面做,针对数据量较多的情况。新增数据需要注意:是否有字段需要定义验证规则,是否非空,是否必填,是否有字段自己的规则,是否需要做异步校验,

2.保存成功后一般是跳转回到列表展示界面,如果保存失败,需要提示用户哪里有问题(这里指后台也做了对应的规则验证,数据提交到后台没有通过的情况下保错)。

四、修改功能

1.是否有不可更改字段,如果有,则此字段不可被客户修改

2.修改时,如果有时间的地方,需要注意时间的逻辑关系,开始时间是小于等于结束时间

3.修改时,和新增一样,需要注意字段是否有自己的验证规则,如果有,请保持和新增的规则一致

4.保存成功返回到列表展示界面,如果保存失败,需要提示用户哪里有问题(这里指后台也做了对应的规则验证,数据提交到后台没有通过的情况下保错)。

前端开发是可以看到的。这个看到是指页面的不正常,要么是dom不正常,要么是js报错,要么是数据有问题,基本上就在这三个方面之内。
如果有问题,

第1,先在脑子里把工作任务的业务流程在脑子里过一遍,看看是不是开发的顺序有问题;
第2,在脑子里,把开发流程分成一段一段的来考虑,看看它是在哪个阶段发生的问题。是加载?还是进入?还是生成?
第3,看看这个bug,是js引起的,还是data引起的?这是在确定问题是谁的责任。
第4,如果是js引起的,那么要在bug出现的前后不同位置,分别打上console.log来查看打印信息进行调试。
这四个流程走完,基本可以确定问题是在哪出现?如何引发的?

原文地址:https://www.cnblogs.com/zxyun/p/6950256.html