I have the following code to set height based on conditions and devices. But, I get an error - Cyclomatic complexity is too high (28) for this. How can I resolve it?
我有以下代码根据条件和设备设置高度。但是，我得到了一个错误——圈复杂度太高了(28)。我如何解决它?
function adjustHeightForAttributes() {
var elementHeight = document.getElementById('listSearchOptions');
var childNoLen = $('.attributelistContainer .requestedAttr span').length;
if (childNoLen >= 1) {
$('.attributelistContainer').css({"overflow-y":"auto"});
}
// Establishing media check
var widthMinCheck = window.matchMedia("(min-width: 768px)").matches;
var widthMaxCheck = window.matchMedia("(max-width: 1024px)").matches;
var orientationCheck = window.matchMedia("(orientation: landscape)").matches;
var orientationCheckPortrait = window.matchMedia("(orientation: portrait)").matches;
//True / False values check
var bothFalse = vm.searchByRoomNo === false && childNoLen === 0;
var bothTrue = vm.searchByRoomNo === true && childNoLen >= 1;
var roomSearchTrue = vm.searchByRoomNo === true && childNoLen === 0;
var childLenTrue = vm.searchByRoomNo === false && childNoLen >= 1;
//Check if scroll exists
var scrollExists = $('#listSearchOptions')[0].scrollHeight > $('#listSearchOptions')[0].clientHeight;
if (widthMinCheck && widthMaxCheck && orientationCheck) {
console.log("oreintationCheck.. " + orientationCheck);
if (bothFalse) {
if(scrollExists) {
console.log("Height..in adjustSearchAttributesheight6." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"height":"auto", "max-height":""});
}
else {
console.log("Height..in adjustSearchAttributesheight7." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"height":"52vh","max-height":"52vh"});
}
}
if (childLenTrue) {
if (scrollExists) {
console.log("Height..in adjustSearchAttributesheight1." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"38vh"});
}
else {
console.log("Height..in adjustSearchAttributesheight2." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"40vh"});
}
}
if (bothTrue) {
if (scrollExists) {
console.log("Height..in adjustSearchAttributesheight3." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"30vh"});
}
else {
console.log("Height..in adjustSearchAttributesheight4." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"32vh"});
}
}
if (roomSearchTrue) {
if ($('#listSearchOptions')[0].scrollHeight > $('#listSearchOptions')[0].clientHeight) {
console.log("Height..in adjustSearchAttributesheight5." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"44vh"});
}
else {
console.log("Height..in adjustSearchAttributesheight5." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"46vh"});
}
}
}
else if (orientationCheckPortrait) {
if (bothFalse) {
if (scrollExists) {
console.log("Height..in adjustSearchAttributesheight6." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"height":"auto", "max-height":""});
}
else {
console.log("Height..in adjustSearchAttributesheight7." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"42vh"});
}
}
if (childLenTrue) {
if ($('#listSearchOptions')[0].scrollHeight > $('#listSearchOptions')[0].clientHeight) {
console.log("Height..in adjustSearchAttributesheight1." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"38vh"});
}
else {
console.log("Height..in adjustSearchAttributesheight2." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"40vh"});
}
}
if (bothTrue) {
if (scrollExists) {
console.log("Height..in adjustSearchAttributesheight3." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"30vh"});
}
else {
console.log("Height..in adjustSearchAttributesheight4." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"32vh"});
}
}
if (roomSearchTrue) {
if ($('#listSearchOptions')[0].scrollHeight > $('#listSearchOptions')[0].clientHeight) {
console.log("Height..in adjustSearchAttributesheight5." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"45vh"});
}
else{
console.log("Height..in adjustSearchAttributesheight5." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"48vh"});
}
}
}
else{
if (bothFalse) {
if (scrollExists) {
console.log("Height..in adjustSearchAttributesheight6." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"height":"auto", "max-height":""});
}
else {
console.log("Height..in adjustSearchAttributesheight7." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"42vh"});
}
}
if (childLenTrue) {
if ($('#listSearchOptions')[0].scrollHeight > $('#listSearchOptions')[0].clientHeight) {
console.log("Height..in adjustSearchAttributesheight8." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"27.2vh"});
}
else {
console.log("Height..in adjustSearchAttributesheight9." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"27vh"});
}
}
if (roomSearchTrue) {
if (scrollExists) {
console.log("Height..in adjustSearchAttributesheight10." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"34vh"});
}
else {
console.log("Height..in adjustSearchAttributesheight11." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"36vh"});
}
}
if (bothTrue) {
if (scrollExists) {
console.log("Height..in adjustSearchAttributesheight12." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"18.5vh"});
}
else {
console.log("Height..in adjustSearchAttributesheight13." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"20.8vh"});
}
}
}
}2 个解决方案
#1
2
Wiki of Cyclomatic complexity is here.
圈复杂度的维基在这里。
Cyclomatic complexity is being counted on a method depend on branch statement. Like if, else, for , while etc.
圈复杂度被计算在一个方法依赖于分支语句。比如if, else, for, while等等。
If you refactor your method to multiple method and keep less number of if else in each method your problem will be solved.
如果您将方法重构为多个方法，并在每个方法中保留较少的If值，那么您的问题将得到解决。
In your code there is lots of if else and inner if is there. Try to refactor those as follows.
在你的代码中有很多if else和inner if。试着重构它们如下所示。
function bothTrue_scrollExists(bothTrue, scrollExists)
if (bothTrue) {
if (scrollExists) {
console.log("Height..in adjustSearchAttributesheight12." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"18.5vh"});
}
else {
console.log("Height..in adjustSearchAttributesheight13." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"20.8vh"});
}
}
}
EDIT: Try to refactor your logic to better implementation as follows.
编辑:尝试将您的逻辑重构为更好的实现如下。
var s = '';
if (widthMinCheck && widthMaxCheck && orientationCheck) {
s = s + 'A';
}
else if (orientationCheckPortrait) {
s = s + 'B';
}
else{
s = s + 'C';
}
//////////////////////////////////////////
if (bothFalse) {
s=s+'_'+'BF';
}
else if (childLenTrue){
s=s+'_'+'CT';
}
else if (roomSearchTrue){
s=s+'_'+'RS';
}
else if (bothTrue){
s=s+'_'+'BT';
}
//////////////////////////////////////////
if (scrollExists) {
s=s+'_'+'SE';
}
else {
s=s+'_'+'NS';
}
var data = {
'A_BF_NS' : 52,
'B_BF_SE' : 38//Put other combinations here
};
console.log("Height..in adjustSearchAttributesheight." + $('#listSearchOptions')[0].clientHeight);
var height = (data[s])? data[s] : 'auto';
$('#listSearchOptions').css({"max-height":height+"vh"});
#2
0
From wikipedia:
从*:
It is a quantitative measure of the number of linearly independent paths through a program's source code.
它是对程序源代码中线性无关路径数量的量化度量。
Each control statement (if/else, for etc) will add to the cyclomatic complexity of a function.
每个控制语句(if/else, for etc)都会增加函数的圈复杂度。
You should look for ways to refactor your function into multiple smaller functions.
您应该寻找将函数重构为多个更小的函数的方法。
#1
2
Wiki of Cyclomatic complexity is here.
圈复杂度的维基在这里。
Cyclomatic complexity is being counted on a method depend on branch statement. Like if, else, for , while etc.
圈复杂度被计算在一个方法依赖于分支语句。比如if, else, for, while等等。
If you refactor your method to multiple method and keep less number of if else in each method your problem will be solved.
如果您将方法重构为多个方法，并在每个方法中保留较少的If值，那么您的问题将得到解决。
In your code there is lots of if else and inner if is there. Try to refactor those as follows.
在你的代码中有很多if else和inner if。试着重构它们如下所示。
function bothTrue_scrollExists(bothTrue, scrollExists)
if (bothTrue) {
if (scrollExists) {
console.log("Height..in adjustSearchAttributesheight12." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"18.5vh"});
}
else {
console.log("Height..in adjustSearchAttributesheight13." + $('#listSearchOptions')[0].clientHeight);
$('#listSearchOptions').css({"max-height":"20.8vh"});
}
}
}
EDIT: Try to refactor your logic to better implementation as follows.
编辑:尝试将您的逻辑重构为更好的实现如下。
var s = '';
if (widthMinCheck && widthMaxCheck && orientationCheck) {
s = s + 'A';
}
else if (orientationCheckPortrait) {
s = s + 'B';
}
else{
s = s + 'C';
}
//////////////////////////////////////////
if (bothFalse) {
s=s+'_'+'BF';
}
else if (childLenTrue){
s=s+'_'+'CT';
}
else if (roomSearchTrue){
s=s+'_'+'RS';
}
else if (bothTrue){
s=s+'_'+'BT';
}
//////////////////////////////////////////
if (scrollExists) {
s=s+'_'+'SE';
}
else {
s=s+'_'+'NS';
}
var data = {
'A_BF_NS' : 52,
'B_BF_SE' : 38//Put other combinations here
};
console.log("Height..in adjustSearchAttributesheight." + $('#listSearchOptions')[0].clientHeight);
var height = (data[s])? data[s] : 'auto';
$('#listSearchOptions').css({"max-height":height+"vh"});
#2
0
From wikipedia:
从*:
It is a quantitative measure of the number of linearly independent paths through a program's source code.
它是对程序源代码中线性无关路径数量的量化度量。
Each control statement (if/else, for etc) will add to the cyclomatic complexity of a function.
每个控制语句(if/else, for etc)都会增加函数的圈复杂度。
You should look for ways to refactor your function into multiple smaller functions.
您应该寻找将函数重构为多个更小的函数的方法。