代码质量第 4 层 - 健壮的代码

点击 一键订阅《云荐大咖》专栏,获取官方推荐精品内容,学技术不迷路!

代码质量第 4 层 - 健壮的代码_第1张图片

健壮性(Robustness) 是指程序在遇到规范以外的输入,错误和异常时,仍能正常运行。简单来说,健壮代码的适应性很强,不会因为一些异常,就导致程序崩溃。

不健壮的前端代码体现为:

接口返回异常或报错时,页面白屏。
用户做一些非常规操作时,页面白屏。

如何写出健壮的前端代码

要写出健壮的前端代码,就要处理规范以外的输入,错误和异常。具体来说,有 4 点:

1.异常处理。
2.输入检查。
3.写法优化。
4.第三方库的选择。

下面,我们具体来说。

1. 异常处理

不做异常做处理,轻则导致功能出错,重则导致页面白屏。异常处理,可以分为如下几种情况。

主动捕获运行时异常
用 try-catch 捕获同步代码的运行时错误。如果是异步代码,需要转化成 await 的写法。如:

try {
  doSth()
  await doSth2()
} catch (e) {
  // 处理异常
}

处理意料之外的全局运行时异常
未被处理的 JavaScript 运行时错误(包括语法错误)发生时, window 会触发 error 事件。这么处理:

window.addEventListener(
  'error',
  (e) => {/* 处理异常 */}
)

当一项资源(如