代码质量第 4 层

Posted 2022-01-01 腾讯云加社区

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

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

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

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

如何写出健壮的前端代码

---

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

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

下面，我们具体来说。

1. 异常处理

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

主动捕获运行时异常

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

try 
  doSth()
  awaitdoSth2()
 catch (e) 
  // 处理异常

处理意料之外的全局运行时异常

未被处理的 JavaScript 运行时错误（包括语法错误）发生时, window 会触发 error 事件。这么处理:

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

当一项资源（如<img>或<script>）加载失败时，加载资源的元素会触发 error 事件。这么处理:

const img = new Image();
img.addEventListener(
  \'error\',
  (e) => /* 处理异常 */
)
img.src = \'xxx\'

异步代码: Promise reject 的处理

Promise 被 reject 时，可以在 then 的第二个参数或 catch 中处理。如:

p().then(onSuccess, onReject)
p().catch(onReject)

Promise reject 没有被处理的话，window 会触发 unhandledrejection 事件。可以统一来处理:

window.addEventListener(
  \'unhandledrejection\',
  (e) => /* 处理异常 */
)

用 Axios 时，接口报错的通用处理

可以在 Axios 接口返回的拦截器中，加入接口报错的通用处理。例如:

axios.interceptors.response.use(function (response) 
  return response;
, err => 
  // 报错处理
  if(err.response) 
    switch (err.response.status) 
      case 400: err.message = \'请求错误(400)\'; break;
      case 500: err.message = \'服务器错误(500)\'; break;
      // ...
    
  
  return Promise.reject(error);
)

Vue 的异常处理

app.config.errorHandler = (err, vm, info) => 
  // 处理异常

React 的异常处理

React 的生命周期函数 ComponentDidCatch 可以捕获子组件的异常。因此，可以在根组件外包裹一个组件来处理错误。如:

class ErrorBoundary extends React.Component 
  componentDidCatch(error, info) 
    // 处理异常
  

使用:

<ErrorBoundary>
  <App />
</ErrorBoundary>

2 输入检查

当输入不满足条件时，要尽早返回或主动报错。这里的输入包括：接口的返回结果，函数的参数，组件的属性等。

接口返回格式检查

接口的返回会出现和前端预期不一致的情况。原因可能是：

• 接口的返回结果变更，但未通知前端。
• 一些特殊的请求参数，导致接口的返回和预期值不同。

因此，我们要对接口返回格式做检查。我们来看个例子:

const res = await fetchList()
const list = res.map(...)

如果接口返回的不是数组，程序就会报错。可以做类似这样的优化：

const res = await fetchList()
const list = Array.isArray(res) ? res.map(...) : []

函数参数检查

JavaScript 是弱类型语言，函数的参数可以传任意值或不传参。因此，不对函数参数检查，会出现一些和预期不一致的情况。比如，期望实现两数求和的功能：

function sum (a, b) 
  return a + b


sum(3, 4) // 7。和预期一致
sum() // NaN。和预期不一致
sum(\'3\', 4) // \'34\'。和预期不一致

对函数参数做检查，可以这么优化：

function sum (a, b) 
  if(isNaN(parseFloat(a)) || isNaN(parseFloat(b))) 
    throw \'param error. param should be a num\'
  
  return parseFloat(a) + parseFloat(b)

推荐使用 TypeScript。可以用它检查函数参数。上面的代码用 TypeScript 这么写：

function sum (a: number | string, b: number | string) 
  return parseFloat(a as string) + parseFloat(b as string)

组件属性检查

对组件的属性检查和函数参数检查类似，就不做赘述了。

3 写法优化

很多写法优化能提升代码健壮性。这里介绍 2 点。

1 switch 都需要有 default 来做异常或默认情况的处理。

2 访问对象或数组前要做判断

如：a.b.c 改成 a && a.b && a.b.c。如果用了 TypeScript，可以这么写： a?.b?.c。

4 第三方库的选择

使用第三库，可以减少造轮子，从而提升开发效率。但如果第三方包不健壮，用到第三方包的功能也就不健壮了。

健壮的第三方库是成熟，稳定的。最好不要选择以下情况的第三方库：

• 刚出来不久的。
• 还没出稳定版的。如果库遵循的是 语意化版本规范，主版本号为 0 的都不是稳定版。
• 使用人数很少的。下载量少，star数低。
• 没有代码测试的。

健壮性的测试方法

---

可以用猴子测试来测试代码的健壮性。

猴子测试(Money Test)，也称搞怪测试。在软件测试中，测试者可以进行各种稀奇古怪的操作模式，用以测试软件的健壮性。

这里推荐一个适用于浏览器的猴子测试工具：gremlins.js。工具会对要测试的页面进行一通乱点。如下图所示：

提升代码质量的下一步

---

提升代码质量的下一步就是提升代码的可读性。我会在下一篇文章中介绍。

 

 

 

金伟强往期精彩文章推荐：

聊聊代码质量 - 《学得会，抄得走的提升前端代码质量方法》前言

代码质量第 5 层 - 只是实现了功能

《云荐大咖》是腾讯云加社区精品内容专栏。云荐官特邀行业佼者，聚焦于前沿技术的落地及理论实践之上，持续为您解读云时代热点技术、探索行业发展新机。点击一键订阅，我们将为你定期推送精品内容。

海量技术实践经验，尽在云加社区！ https://cloud.tencent.com/developer