zoukankan      html  css  js  c++  java
  • 前端如何避免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来查看打印信息进行调试。
    这四个流程走完,基本可以确定问题是在哪出现?如何引发的?

  • 相关阅读:
    ⑤SpringBoot之定时任务
    ④SpringBoot之thymeleaf使用
    ③SpringBoot中Redis的使用
    ②SpringBoot之Web综合开发
    Redis、Memcache和MongoDB
    ADB常用命令 & 无线调试Debug黑科技
    Flutter生命周期
    Flutter-Tips
    Git rebase命令
    Git 恢复本地误删的文件
  • 原文地址:https://www.cnblogs.com/zxyun/p/6950256.html
Copyright © 2011-2022 走看看