1. 导读
你们是否也有过下面的主意?
你们的项目中是否也存在下面的问题?
针对上面的问题,本文的主角 圈杂乱度 重磅上台,本文将从圈杂乱度原理动身,介绍圈杂乱度的核算办法、怎么下降代码的圈杂乱度,怎么获取圈杂乱度,以及圈杂乱度在公司项目的实践运用。
2. 圈杂乱度
2.1 界说
圈杂乱度 (Cyclomatic complexity) 是一种代码杂乱度的衡量规范,也称为条件杂乱度或循环杂乱度,它能够用来衡量一个模块断定结构的杂乱程度,数量上体现为独立现行途径条数,也可了解为掩盖一切的或许状况最少运用的测验用例数。简称 CC 。其符号为 VG 或是 M 。
圈杂乱度 在 1976 年由 Thomas J. McCabe, Sr. 提出。
圈杂乱度大阐明程序代码的判别逻辑杂乱,或许质量低且难于测验和保护。程序的或许过错和高的圈杂乱度有着很大联系。
2.2 衡量规范
代码杂乱度低,代码纷歧定好,但代码杂乱度高,代码必定欠好。
3.1 操控流程图
操控流程图,是一个进程或程序的笼统体现,是用在编译器中的一个笼统数据结构,由编译器在内部保护,代表了一个程序履行进程中会遍历到的一切途径。它用图的方式表明一个进程内一切基本块履行的或许流向, 也能反映一个进程的实时履行进程。
下面是一些常见的操控流程:
3.2 节点断定法
有一个简略的核算办法,圈杂乱度实践上便是等于断定节点的数量再加上1。向上面说到的:if else 、switch case 、 for循环、三元运算符等等,都归于一个断定节点,例如下面的代码:
function testComplexity(*param*) {
let result = 1;
if (param > 0) {
result--;
}
for (let i = 0; i < 10; i++) {
result += Math.random();
}
switch (parseInt(result)) {
case 1:
result += 20;
break;
case 2:
result += 30;
break;
default:
result += 10;
break;
}
return result > 20 ? result : result;
}
上面的代码中一共有1个if句子,一个for循环,两个case句子,一个三元运算符,所以代码杂乱度为 4+1+1=6。别的,需求留意的是 || 和 && 句子也会被算作一个断定节点,例如下面代码的代码杂乱为3:
function testComplexity(*param*) {
let result = 1;
if (param > 0 && param < 10) {
result--;
}
return result;
}
3.3 点边核算法
M 双氧水-前端代码质量-圈复杂度原理和实践= E − N + 2P
仿制代码
前两个,边和节点都是数据结构图中最基本的概念:
P代表图中独立组件的数目,独立组件是什么意思呢?来看看下面两个图,左边为连通图,右侧为非连通图:
一个连通图即为图中的一个独立组件,所以左边图中独立组件的数目为1,右侧则有两个独立组件。
关于咱们的代码转化而来的操控流程图,正常状况下一切节点都应该是连通的,除非你在某些节点之前履行了 return,明显这样的代码是过错的。所以每个程序流程图的独立组件的数目都为1,所以上面的公式还能够简化为 M = E − N + 2 。
4. 下降代码的圈杂乱度
咱们能够经过一些代码重构手法来下降代码的圈杂乱度。
重构需谨慎,示例代码只是代表一种思维,实践代码要远远比示例代码杂乱的多。
4.1 笼统装备
经过笼统装备将杂乱的逻辑判别进行简化。例如下面的代码,依据用户的选择项履行相应的操作,重构后下降了代码杂乱度,而且假如之后有新的选项,直接参加装备即可,而不需求再去深化代码逻辑中进行改动:
4.2 单一责任 - 提炼函数
单一责任准则(SRP):每个类都应该有一个单一的功用,一个类应该只要一个发作改变的原因。
在 JavaScript 中,需求用到的类的场景并不太多,单一责任准则则是更多地运用在目标或许办法等级上面。
函数应该做一件事,做好这件事,只做这一件事。 — 代码整齐之道
关键是怎么界说这 “一件事” ,怎么将代码中的逻辑进行笼统,有用的提炼函数有利于下降代码杂乱度和下降保护本钱。
4.3 运用 break 和 return 替代操控符号
咱们常常会运用一个操控符号来标明当时程序运转到某一状况,许多场景下,运用 break 和 return 能够替代这些符号并下降代码杂乱度。
4.4 用函数替代参数
setField 和 getField 函数便是典型的函数替代参数,假如么有 setField、getField 函数,咱们或许需求一个很杂乱的 setValue、getValue 来完结特点赋值操作:
4.5 简化条件判别 - 逆向条件
某些杂乱的条件判别或许逆向考虑后会变的更简略。
4.6 简化条件判别 -兼并条件
将杂乱冗余的条件判别进行兼并。
4.7 简化条件判别 - 提取条件
将杂乱难明的条件进行语义化提取。
5. 圈杂乱度检测办法
5.1 eslint规矩
eslint供给了检测代码圈杂乱度的rules:
咱们将敞开 rules 中的 complexity 规矩,并将圈杂乱度大于 0 的代码的 rule severity 设置为 warn 或 error 。
rules: {
complexity: [
'warn',
{ max: 0 }
]
}
这样 eslint 就会自动检测出一切函数的代码杂乱度,并输出一个相似下面的 message。
Method 'testFunc' has a complexity of 12. Maximum allowed is 0
Async function has a complexity of 6. Maximum allowed is 0.
...
5.2 CLIEngine
咱们能够凭借 eslint 的 CLIEngine ,在本地运用自界说的 eslint 规矩扫描代码,并获取扫描成果输出。
初始化 CLIEngine :
const eslint = require('eslint');
const { CLIEngine } = eslint;
const cli = new CLIEngine({
parserOptions: {
ecmaVersion: 2018,
},
rules: {
complexity: [
'error',
{ max: 0 }
]
}
});
运用 executeOnFiles 对指定文件进行扫描,并获取成果,过滤出一切 complexity 的 message 信息。
const reports = cli.executeOnFiles(['.']).results;
for (let i = 0; i < reports.length; i++) {
const { messages } = reports[i];
for (let j = 0; j < messages.length; j++) {
const { message, ruleId } = messages[j];
if (ruleId === 'complexity') {
console.log(message);
}
}
}
5.3 提取message
经过 eslint 的检测成果将有用的信息提取出来,先测验几个不同类型的函数,看看 eslint 的检测成果:
function func1() {
console.log(1);
}
const func2 = () => {
console.log(2);
};
class TestClass {
func3() {
console.log(3);
}
}
async function func4() {
console.log(1);
}
履行成果:
Function 'func1' has a complexity of 1. Maximum allowed is 0.
Arrow function has a complexity of 1. Maximum allowed is 0.
Method 'func3' has a complexity of 1. Max双氧水-前端代码质量-圈复杂度原理和实践imum allowed is 0.
Async function 'func4' has a complexity of 1. Maximum allowed is 0.
能够发现,除了前面的函数类型,以及后边的杂乱度,其他都是相同的。
函数双氧水-前端代码质量-圈复杂度原理和实践类型:
截取办法类型:
const REG_FUNC_TYPE = /^(Method |Async function |Arrow function |Function )/g;
function getFunctionType(message) {
let hasFuncType = REG_FUNC_TYPE.test(message);
return hasFuncType && RegExp.$1;
}
将有用的部分提取出来:
const MESSAGE_PREFIX = 'Maximum allowed is 1.';
const MESSAGE_SUFFIX = 'has a complexity of ';
function getMain(message) {
return message.replace(MESSAGE_PREFIX, '').replace(MESSAGE_SUFFIX, '');
}
提取办法称号:
function getFunctionName(message) {
const main = getMain(message);
let test = /'([a-zA-Z0-9_$]+)'/g.test(main);
return test ? RegExp.$1 : '*';
}
截替代码杂乱度:
function getComplexity(message) {
const main = getMain(message);
(/(\d+)\./g).test(main);
return +RegExp.$1;
}
除了 message ,还有其他的有用信息:
filePath.replace(process.cwd(), '').trim()
仿制代码
6.架构规划
将代码杂乱度检测封装成根底包,依据自界说装备输出检测数据,供其他运用调用。
上面的展现了运用 eslint 获替代码杂乱度的思路,下面咱们要把它封装为一个通用的东西,考虑到东西或许在不同场景下运用,例如:网页版的剖析陈述、cli版的指令行东西,咱们把通用的才能笼统出来以 npm包 的方式供其他运用运用。
在核算项目代码杂乱度之前,咱们首要要具有一项根底才能,代码扫描,即咱们要知道咱们要对项目里的哪些文件做剖析,首要 eslint 是具有这样的才能的,咱们也能够直接用 glob 来遍历文件。可是他们都有一个缺点,便是 ignore 规矩是不同的,这关于用户来讲是有必定学习本钱的,因而我这儿把手动封装代码扫描,运用通用的 npm ignore 规矩,这样代码扫描就能够直接运用 .gitignore这样的装备文件。别的,代码扫描作为代码剖析的根底才能,其他代码剖析也是能够共用的。
7. 根底才能 - 代码扫描
本文触及的 npm 包和 cli指令源码均可在我的开源项目 awesome-cli中检查。
awesome-cli 是我新建的一个开源项目:风趣又有用的指令行东西,后边会继续保护,敬请重视,欢迎 star。
代码扫描(c-scan)源码:github.com/ConardLi/aw…
代码扫描是代码剖析的底层才能,它首要协助咱们拿到咱们想要的文件途径,应该满意咱们以下两个需求:
7.1 运双氧水-前端代码质量-圈复杂度原理和实践用
npm i c-scan --save
const scan = require('c-scan');
scan({
extensions:'**/*.js',
rootPath:'src',
defalutIgnore:'true',
ignoreRules:[],
ignoreFileName:'.gitignore'
});
7.2 返回值
契合规矩的文件途径数组:
7.3 参数
const DEFAULT_IGNORE_PATTERNS = [
'node_modules/**',
'build/**',
'dist/**',
'output/**',
'common_build/**'
];
7.4 中心完成
依据 glob ,自界说 ignore 规矩进行二次封装。
/**
* 获取glob扫描的文件列表
* @param {*} rootPath 跟途径
* @param {*} extensions 扩展
* @param {*} defalutIgnore 是否敞开默许疏忽
*/
function getGlobScan(rootPath, extensions, defalutIgnore) {
return new Promise(resolve => {
glob(`${rootPath}${extensions}`,
{ dot: true, ignore: defalutIgnore ? DEFAULT_IGNORE_PATTERNS : [] },
(err, files) => {
if (err) {
console.log(err);
process.exit(1);
}
resolve(files);
});
});
}
/**
* 加载ignore装备文件,并处理成数组
* @双氧水-前端代码质量-圈复杂度原理和实践param {*} ignoreFileName
*/
async function loadIgnorePatterns(ignoreFileName) {
const ignorePath = path.resolve(process.cwd(), ignoreFileName);
try {
const ignores = fs.readFileSync(ignorePath, 'utf8');
return ignores.split(/[\n\r]|\n\r/).filter(pattern => Boolean(pattern));
} catch (e) {
return [];
}
}
/**
* 依据ignore装备过滤文件列表
* @param {*} files
* @param {*} ignorePatterns
* @param {*} cwd
*/
function filterFilesByIgnore(files, ignorePatterns, ig淋巴结肿大图片noreRules, cwd = process.cwd()) {
const ig = ignore().add([...ignorePatterns, ...ignoreRules]);
const filtered = files
.map(raw => (path.isAbsolute(raw) ? raw : path.resolve(cwd, raw)))
.map(raw => path.relative(cwd, raw))
.filter(filePath => !ig.ignores(filePath))
.map(raw => path.resolve(cwd, raw));
return filtered;
}
8. 根底才能 - 代码杂乱度检测
代码杂乱度检测(c-complexity)源码:github.com/ConardLi/aw…
代码检测根底包应该具有以下几个才能:
8.1 运用
npm i c-complexity --save
const cc = require('c-complexity');
cc({},10);
8.2 返回值
8.3 参数
9. 运用 - 代码杂乱度检测东西
代码杂乱度检测(conard cc)源码:github.com/ConardLi/aw…
9.1 指定最小提示杂乱度
能够触发提示的最小杂乱度。
9.2 指定扫描参数
自界说扫描规矩
10. 运用 - 代码杂乱度陈述
部分截图来历于咱们内部的项目质量监控渠道,圈杂乱度作为一项重要的目标,关于衡量项目代码质量起着至关重要的效果。
代码杂乱杂乱度改变趋势
守时使命爬替代码每日的代码杂乱度、代码行数、函数个数,经过每日数据制作代码杂乱度和代码行数改变趋势折线图。
经过 [ 杂乱度 / 代码行数 ] 或 [ 杂乱度 / 函数个数 ] 的改变趋势,判别项目开展是否健康。
代码杂乱度文件散布
核算各杂乱度散布的函数数量。
代码杂乱度文件概况
核算每个函数的代码杂乱度,从高到低顺次列出高杂乱度的文件散布,并给出重构主张。
实践开发中并纷歧定一切的代码都需求被剖析,例如打包产品、静态资源文件等等,这些文件往往会误导咱们的剖析成果,现在剖析东西会默许疏忽一些规矩,例如:.gitignore文件、static目录等等,实践这些规矩还需求依据实践项目的状况去不断完双氧水-前端代码质量-圈复杂度原理和实践善,使剖析成果变得更精确。
小结
期望看完本篇文章能对你有如下协助:
文中如有过错,欢迎在谈论区纠正,假如这篇文章协助到了你,欢迎点赞和重视。
作者:ConardLi
链接:https://juejin.im/post/5da34216e51d4578502c24c5
来历:掘金