代码质量第4层——健壮的代码!
健壮性(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。工具会对要测试的页面进行一通乱点。如下图所示:
三、提升代码质量的下一步
提升代码质量的下一步就是提升代码的可读性。我会在下一篇文章中介绍。
代码质量第4层——健壮的代码!相关推荐
- 代码质量第5层-只是实现了功能
产品实现的功能是产品价值的体现形式.功能实现是基础.功能没有实现,其他方面做得再好也没有意义.那么,如何保证实现的功能覆盖了需求呢? 本文主要内容如下: 如何做到:实现的功能覆盖了需求. 仅仅实现了功 ...
- 代码质量第 5 层 - 只是实现了功能
产品实现的功能是产品价值的体现形式.功能实现是基础.功能没有实现,其他方面做得再好也没有意义.那么,如何保证实现的功能覆盖了需求呢? 产品实现的功能是产品价值的体现形式.功能实现是基础.功能没有实现, ...
- 提升代码质量,使用插件对 java 代码进行扫描检查分析
目录 前言 一.使用maven-checkstyle-plugin插件 1. maven-checkstyle-plugin 介绍 2.引入依赖 3.使用 二.使用 idea 插件 1.安装 2.使用 ...
- php代码质量怎么提高,如何提高PHP代码的质量?第一部分 自动化工具
重复的代码是不好的,每个人都知道.有时我们错误地创建了这样的代码,我们从来没有注意到它.有时我们这样做是因为我们懒惰.最好是配备一个工具,它可以在构建时提示这个问题.PHPCPD - PHP复制/粘贴 ...
- 代码质量会随着年龄增长吗
出于技术能力.编码能力.架构能力.低层能力等的提高,程序员喜欢思考,我也在常常想着怎么提高,随着年级的增长,代码质量如何提高呢,怎么才算是提高呢? 代码质量如何提高? 说到代码质量的提高,就先从代码质 ...
- 【代码质量】码农提升代码质量的三重境界
前言:文章的开头,我要先讲个段子(真实案例),玩过拳皇的同学应该对下面这张图不陌生(一不小心暴露年龄了): 本以为这种也就是作为笑料,有意为之,然而就在我工作的第三年,确实碰到了这样的代码,老夫掰起脚 ...
- 【代码审计】使用SonarQube进行代码质量分析管理
2019独角兽企业重金招聘Python工程师标准>>> 在之前的开发中,代码的工作量化和质量化都是一个问题,随着近几年互联网行业的快速发展,代码已经可以来工作量化和质量化,今天我们来 ...
- 提高 Java 代码质量
高质量代码中往往缺陷更少!确保高的 Java 代码质量有两个步骤:尽早并经常地编写各个层次的测试用例,以及持续的监测质量状况.那么我们又该如何实践呢?本专题汇集了大量来自代码质量专家们的专业经验.最佳 ...
- Java代码质量监控工具Sonar安装
1. 代码质量七宗罪 Sonar是一个代码质量管理系统.它的帮助文档开篇明义,提出了代码质量的七宗罪.总结的比較到位.最好还是一看: 1. Bug和隐藏Bug(Bugs and Pot ...
最新文章
- 打印机在计算机里被删掉,不小心把设置里打印机删掉了怎么办
- datagrid如何获取一行数据中的某个字段值_使用Mysql 数据库 新手常见问题
- Spring Boot (七)MyBatis代码自动生成和辅助插件
- [Leetcode] Binary Tree Maximum Path Sum
- 7360清零方法_兄弟、联想、美能达、富士施乐全系列打印机加粉清零方法
- 使用Spring Security和OAuth 2.0保护Spring微服务架构
- 数据驱动工程:跟踪使用,合理决策
- 好的架构不是设计出来的,而是演进出来的
- Visio2010正确的安装步骤
- Python实现APP自动化发微信群消息。这才是内卷的极致。
- 项目管理的扫地僧---PRINCE2,学过PMP的必进!
- android手机怎么改字体,手机字体怎么改 安卓手机字体修改教程
- ionic在app内部打开pdf文件
- 王者荣耀android换ios,2021王者荣耀安卓账号可以转苹果吗 2021年安卓账号转移到ios方法...
- 锚定品质,金科走出清晰的“产品主义”路径
- Java 比较字符串之间大小
- Mac下彻底卸载node和npm
- SVN使用教程(一)
- 常用linuxm命令
- 内网DNS欺骗与防护
热门文章
- 消息 css 代码,CSS3 通知类消息动画
- 多节锂电串联保护板ic_两节锂电池保护IC,芯片电路图如何设计
- python从安装开始加粉_清华教授用了12小时讲完的Python,整整400集,拿走不谢!...
- 工作中5个实用的Linux命令
- 如何彻底解决pip install慢的问题
- idea 正则表达式搜索替换
- Linux学习笔记(二)文本编辑器
- POJ2492 A Bug s Life 题解
- [NC14301]K-th Number
- 商品促销php设计,php – 什么是生成大量独特促销代码的最佳方式?