关于前端:代码质量第-4-层-健壮的代码

38次阅读

共计 2804 个字符,预计需要花费 8 分钟才能阅读完成。

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

健壮性(Robustness) 是指程序在遇到标准以外的输出,谬误和异样时,仍能失常运行。简略来说,强壮代码的适应性很强,不会因为一些异样,就导致程序解体。

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

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

如何写出强壮的前端代码

要写出强壮的前端代码,就要解决标准以外的输出,谬误和异样。具体来说,有 4 点:

1. 异样解决。
2. 输出查看。
3. 写法优化。
4. 第三方库的抉择。

上面,咱们具体来说。

1. 异样解决

不做异样做解决,轻则导致性能出错,重则导致页面白屏。异样解决,能够分为如下几种状况。

被动捕捉运行时异样
用 try-catch 捕捉同步代码的运行时谬误。如果是异步代码,须要转化成 await 的写法。如:

try {doSth()
  await doSth2()} 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 层 – 只是实现了性能

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

正文完
 0