如何解决Javascript中的圈复杂度问题

我有以下代码来设置基于条件和设备的高度。但是，我得到一个错误 - 对于这个问题，环复杂度太高（28）。我该如何解决它？如何解决Javascript中的圈复杂度问题

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"}); 
 
        } 
 
       } 
 
      } 
 
     }

圈维基

来源

2015-12-09 Smitha

在我的答案中尝试重构逻辑。希望它能让你更好地控制代码。 –

复杂here。

圆形复杂性正在依赖于分支语句的方法进行计算。如果，其他，为，等等。

如果你重构你的方法多个方法，并保持每个方法，否则你的问题将减少你的问题将得到解决。

在你的代码中有很多if else和inner如果存在。尝试重构这些如下。

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"}); 
     } 
    } 
}

编辑：尝试你的逻辑重构，以便更好地执行如下命令。

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"});

来源

2015-12-09 10:27:58

从wikipedia：

它是通过一个程序的源代码的线性独立的路径的数量的定量测量。

每个控制语句（if/else，for等）都会增加函数的圈复杂度。

你应该寻找方法来将你的函数重构成多个更小的函数。

来源

2015-12-09 10:33:39 gvk

如何解决Javascript中的圈复杂度问题

回答

相关问题