查看原文
其他

代码质量第4层——健壮的代码!

The following article is from 云加社区 Author 金伟强

导语 | 腾讯云加社区精品内容栏目《云荐大咖》,特邀行业佼者,聚焦前沿技术的落地与理论实践,持续为您解读云时代热点技术,探秘行业发展新机。



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


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


  • 接口返回异常或报错时,页面白屏。


  • 用户做一些非常规操作时,页面白屏。


一、如何写出健壮的前端代码


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


  • 异常处理。


  • 输入检查。


  • 写法优化。


  • 第三方库的选择。


下面,我们具体来说。


(一)异常处理


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


  • 主动捕获运行时异常


用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>


(二)输入检查


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


  • 接口返回格式检查


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


  • 接口的返回结果变更,但未通知前端。


  • 一些特殊的请求参数,导致接口的返回和预期值不同。


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


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)}


  • 组件属性检查


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



(三)写法优化


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


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


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


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



(四)第三方库的选择


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


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


  • 刚出来不久的。


  • 还没出稳定版的。如果库遵循的是语意化版本规范,主版本号为0的都不是稳定版。


  • 使用人数很少的。下载量少,star数低。


  • 没有代码测试的。



二、健壮性的测试方法


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


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


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




三、提升代码质量的下一步


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


参考阅读:



技术原创及架构实践文章,欢迎通过公众号菜单「联系我们」进行投稿。


高可用架构
改变互联网的构建方式

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存