圈复杂度就是可以用来衡量一个模块判定结构的复杂程度,数量上表现为独立线性路径条数。举一个最简单的例子,一个函数有 if else 语句,这个时候,执行这个函数就需要两条路径来执行,一个是 if 另一个是 else,那么,这个函数的圈复杂度就为 2 。
圈复杂度越高,说明代码维护性低而且不易理解,这个时候测试成本变高同时也容易出现问题。我们需要做的就是在代码中优化,降低圈复杂度,让开发者对程序易于理解和维护。
圈复杂度也是衡量一个项目的代码质量,在大型的项目中,对圈复杂度也是有一定的要求,超出了这个标准可能就会出现告警状态,所以,圈复杂度是需要每个开发者重视的。
以下是 if else 语句的一个写法,其实只要不是一个新手,一般都不会写出下面这样的代码,但还是拿这个来做个例子。
// bad
const env = "dev";
if (env === "test") {
// do something
} else if (env === "dev") {
// do something
} else if (env === "online") {
// do something
} else {
// do something
}
我记得第一次做活动H5的时候就出现过这样的代码,在写完的时候就已经觉得别扭,所以,后来我做了一个修改。改成了用 swtich 的方法:
// bad
switch (env) {
case "dev":
// do something
break;
case "test":
// do something
break;
case "online":
// do something
break;
default:
// do something
break;
}
但是,这样的优化其实也只是在感觉上好了一点,没有了那么多的 if else ,而是只关注每个 case 的 函数。看上去是整洁了一些,但是,圈复杂度还是没有变化。所以,需要改成:
// good
const env = "online";
const list = {
dev: pageDevEvent,
test: pageTestEvent,
online: pageOnlineEvent,
};
list[env]();
圈复杂度大大降低 ,不论在 list 里面加多少配置,他的圈复杂度都是 1 。
表达式逻辑计算的增加也会增加圈复杂度,优化一些结构复杂的逻辑表达式,也能在一定程度上降低圈复杂度。举例:
// bad
const version = 4;
const client = "iOS";
if (
(client === "iOS" && version > 2) ||
(client === "And" && version > 3)) {
//do something
console.log("11");
}
通过优化判断改为:
const isHighVerIos = client === "iOS" && version > 1;
const isHighVerAnd = client === "And" && version > 2;
if (isHighVerIos || isHighVerAnd) {
//do something
}
下面是另一个例子,也是我最近看到的随手就记录了下来。虽然,让我眼前一亮,但是,实际上业务代码不知道会不会这么写,这么写其实有点另类。
// bad
const eventName = "dev";
if (eventName === "dev" || eventName === "test") {
}
通过 includes 方法来判断是否含有对应的参数
//good
const eventName = "dev";
console.log(["dev", "test"].includes(eventName));
试试吧,这个写法应该能改过来,毕竟和之前的方法不太一样,这个看起来会有点逼格。
//bad
function next(){
const env = getBoolen();
if(env){
return true;
}else{
return false;
}
}
//good
function next(){
return getBoolen();
}
这个注意一下就好,一般 return 会有多个的情况,这样的函数还没有怎么见过。函数最多也就1到2个 return。要是整了好几个 return 那就是代码有问题了,就算没有问题看着都会难受吧。
可以使用 eslint 帮助检查 代码的圈复杂度,超出了某个值就会报错
"complexity": ["error", { "max": 8 }]
上面的配置就是超出了 8 就会出现报错信息。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。