如何解決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中的圈複雜度問題

回答

相關問題