如何增强前端代码的健壮性

前言

        所谓前端的代码健壮性 是指我们的代码在正确和规范的环境中运行时 保证其正确 快速 高效 但是还有一些特殊的环境 比方说后端返回值出现问题  用户操作出现问题 没有网络 页面某些部分没有请求出数据 仍然要保证我们的代码能够正确的运行 给用户一些提示和反馈 不至于大面积的崩溃 出现一些让人意想不到的结果

一些常见问题的处理

1 处理数据异常

        我们在从后端获取数据时 一般情况是正常的 但是后端有时候处理不得当 会产生一些空数据或者null 这个时候我们在取res.xxx或者数组为空数组时循环或者取数组某些项肯定会报错 尤其是程序间有关联时 前面某一步出现异常报错 整个程序就会瘫痪无法运行

         此时我们就需要对数据提前进行异常的预处理 一种是判空处理，如(res || []).length，（res || {}).name等  一种是用try{}catch{}包裹正常的代码 catch里抛出异常处理 以保障其他代码不被影响 顺利运行

2 数据检验

        利用一些判断或者正则 对表单判空 对手机号 密码 邮箱 姓名 数字 小数点等等一些项目中需要进行判断的地方提前判断 防止用户错误的输入导致程序提交后报错失败

3 能应对用户一些怪异的行为

        我们写代码时 可能会先入为主的想象用户会按照我们设定的思路和顺序进行操作 其实现实可能完全相反 用户尤其容易出现交叉或者完全相反的顺序来 或者多次点击按钮  对于交叉顺序或者相反顺序操作的用户 我们可以用判断或者做一些其他的操作 限制用户的行为 告知按照xx顺序来操作

        对于多次疯狂点击按钮的 我们可以限制其点击次数 也可以使用防抖和节流

        通过以上代码端的控制 最大程度上保证我们的程序在应对一些怪异的用户行为时 仍然是可用的

4 注意响应式的问题

        其实现在很多客户可能会要求所有屏幕和设备共用一套代码 这样相比两套代码 我们可以节约不少的代码段 缺点就是要写大量的响应式样式 在写pc端的时候要注意屏幕的安全范围 主体内容要在正常屏幕内保证在安全范围以内 不要超出去 我在做项目的过程中 一般会将pc端的安全范围控制在1200px 有一些客户群体有特殊要求 比如喜欢用超大屏设备或者超小屏设备的 再另行调整

5 注意浮点数运算

        计算机内的浮点数计算和我们数学上理解的浮点数运算不是一回事 比如计算机中 0.1+0.2!==0.3 这在数学上当然是不对的  常见的手法有用+‘xxx’或parseInt或parseFloat来做字符串转数字，用toFixed来限定小数点的位数等