健壮性(Robustness) 是指程序在遇到规范以外的输入,错误和异常时,仍能正常运行。简单来说,健壮代码的适应性很强,不会因为一些异常,就导致程序崩溃。
不健壮的前端代码体现为:
要写出健壮的前端代码,就要处理规范以外的输入,错误和异常。具体来说,有 4 点:
下面,我们具体来说。
不做异常做处理,轻则导致功能出错,重则导致页面白屏。异常处理,可以分为如下几种情况。
用 try-catch
捕获同步代码的运行时错误。如果是异步代码,需要转化成 await
的写法。如:
未被处理的 JavaScript 运行时错误(包括语法错误)发生时, window 会触发 error 事件。这么处理:
当一项资源(如<img>
或<script>
)加载失败时,加载资源的元素会触发 error 事件。这么处理:
Promise 被 reject 时,可以在 then 的第二个参数或 catch 中处理。如:
Promise reject 没有被处理的话,window 会触发 unhandledrejection
事件。可以统一来处理:
可以在 Axios 接口返回的拦截器中,加入接口报错的通用处理。例如:
React 的生命周期函数 ComponentDidCatch
可以捕获子组件的异常。因此,可以在根组件外包裹一个组件来处理错误。如:
使用:
当输入不满足条件时,要尽早返回或主动报错。这里的输入包括:接口的返回结果,函数的参数,组件的属性等。
接口的返回会出现和前端预期不一致的情况。原因可能是:
因此,我们要对接口返回格式做检查。我们来看个例子:
如果接口返回的不是数组,程序就会报错。可以做类似这样的优化:
JavaScript 是弱类型语言,函数的参数可以传任意值或不传参。因此,不对函数参数检查,会出现一些和预期不一致的情况。比如,期望实现两数求和的功能:
对函数参数做检查,可以这么优化:
推荐使用 TypeScript。可以用它检查函数参数。上面的代码用 TypeScript 这么写:
对组件的属性检查和函数参数检查类似,就不做赘述了。
很多写法优化能提升代码健壮性。这里介绍 2 点。
1 switch
都需要有 default
来做异常或默认情况的处理。
2 访问对象或数组前要做判断
如:a.b.c
改成 a && a.b && a.b.c
。如果用了 TypeScript,可以这么写: a?.b?.c
。
使用第三库,可以减少造轮子,从而提升开发效率。但如果第三方包不健壮,用到第三方包的功能也就不健壮了。
健壮的第三方库是成熟,稳定的。最好不要选择以下情况的第三方库:
可以用猴子测试来测试代码的健壮性。
猴子测试(Money Test),也称搞怪测试。在软件测试中,测试者可以进行各种稀奇古怪的操作模式,用以测试软件的健壮性。
这里推荐一个适用于浏览器的猴子测试工具:gremlins.js。工具会对要测试的页面进行一通乱点。如下图所示:
提升代码质量的下一步就是提升代码的可读性。我会在下一篇文章中介绍。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。