“代码是写给人看的,只是偶尔让机器执行一下。”——Donald Knuth
你知道如何快速的检查你的代码质量吗?你是否想要提高你的代码水平,让你的代码更加优雅和高效?
那么你一定不要错过了圈复杂度这一重要标准!圈复杂度是公认的衡量代码质量的重要指标,它主要反映代码中的路径数量,分支越多,圈复杂度越高,代码就越难测试和维护。
如果你想让你的代码质量更上一个台阶,那么在阅读本文之后,请务必加入这个规则到你的 eslint 的配置之中,并以此来检查你的代码是否能够通过圈复杂度的验证。
圈复杂度
先来看一个代码的例子。
可以看到,这段代码比较复杂有很多的分支,并且看到它报错了,将鼠标放上去看到这是一个 eslint 的错误,它的规则叫 complexity,也就是复杂度。
这个错误告诉我们,函数“calPrice”的复杂度为 14,但是最大的复杂度要求是 10。
"rules": {
"complexity": ["error",10]
}
在 ESLint 里加上这个,就表示最高的复杂度只能是 10,超过 10 就报错了。
那么这个复杂度就是我们大名鼎鼎的圈复杂度了。
圈复杂度是公认的衡量代码质量的重要标准,记作V(G),它主要反映代码中的路径数量,简单来说就是分支,分支越多,圈复杂度越高,代码越难测试和维护。
这张表格是无数的开发者总结出来的一个经验。
我们认为圈复杂度控制在 1~10,这个代码的质量是非常高的,如果说很难控制的话,最好也不要超过 20,超过 20 的话就很难维护了。
那么这个数字通常是使用两种公式来计算的:
其中,
e
表示流程图中的边数,n
表示流程图中的节点数。其中,
R
表示平面被流程图划分的区域数量。
示例一:
我们看到上图中的函数没有任何分支,全都是顺序执行,不管函数里有一行还是一百行的代码,由于它是顺序执行并不产生分支,所以说它的圈复杂度只有一条路径,也就是圈复杂度为 1。
套用公式一:可以看到边为1,节点数为 2,那么 也就是圈复杂度为 1
套用公式二:可以看到只有一个区域,所以 也就是圈复杂度为 1
示例二:
这个图就相对复杂了点,我们直接套用公式算一下。
套用公式一:可以看到边为6,节点数为 5,那么 也就是圈复杂度为 3
套用公式二:可以看到有三个区域,一个最外围的区域,两个封闭的区域,所以 也就是圈复杂度为 3
示例三:
直接套入公式算一下。
套用公式一:可以看到边为 7,节点数为 6,那么 也就是圈复杂度为 3
套用公式二:可以看到有三个区域,一个最外围的区域,两个封闭的区域,所以 也就是圈复杂度为 3
这就是圈复杂度的计算方式,那么基于这样的一个计算标准呢,我们就可以知道为什么我们的代码会报错了,因为代码的圈复杂度算出来是 14,而最高要求 10。
总结
随着我们前端的逐渐成熟,各公司对代码质量的要求也在逐渐提高,最近收到不少同学反应各种 eslint 规则通不过的问题,那么其中呢就遇到了好几个同学是圈复杂度的问题。
我们应该时刻关注我们的代码质量,避免写出过于复杂和冗余的代码,应该尽量保持代码的简洁和清晰,遵循一些编程规范和原则,比如单一职责、开闭原则、最小惊讶等,也应该利用eslint这样的工具来帮助我们检查和优化代码,降低圈复杂度,提高代码可读性和可维护性。
当然圈复杂度只是衡量代码质量的一个方面,还有很多其他的指标和方法可以帮助我们提高代码水平。
前端在不断的发展和技术在不停的进步,我们需要更加地学习和更新我们的知识和技能,以适应不断变化的需求和环境。