如何将此JavaScript逻辑代码写入更高效/紧凑的方式？

问题描述：

在我正在开发的项目中，我有21个按钮，它们都具有活动状态和非活动状态。某些按钮的状态受到按下的其他按钮以及该按钮的按下的影响。在我的html中，我使用ng-click来调用函数updateActiveButtons（num）来激活或停用某些按钮。如何将此JavaScript逻辑代码写入更高效/紧凑的方式？

我能想到的最好方法是使用21个元素的数组，默认情况下这些元素都设置为false，然后在按下时更改它们。

问题是，我的代码是丑陋的，我知道必须有一个更好的方法来逻辑它。

这里是我的updateActiveButtons功能：

/* Array for active buttons 
0: Company Name 1: Country 2: Industry 3: Search 4: Company Name - Seller Name 5: Company Name - Buyer Name 6: Country - USA 7: Country - China 8: Country - Israel 
9: Country - Russia 10: Country - India 11: Country - Japan 12: Industry - Tech 13: Industry - Consumer 14: Industry - Pharma 15: Industry - Financial 16: Industry - Biotech 17: Industry - Industrial 
18: Date 19: Valuation 20: Industry - Business 
*/ 
$scope.activeButtonArray = new Array(21); 
for (var i = 0; i < $scope.activeButtonArray.length; i++) { $scope.activeButtonArray[i] = false; } 
//pos = position in array 
$scope.updateActiveButtons = function(pos) { 
    console.log($scope.activeButtonArray[20]); 
    if(pos != 0 || pos != 1 || pos != 2 || pos != 3 || pos != 4 || pos != 5) { 
     $scope.activeButtonArray[pos] = !$scope.activeButtonArray[pos]; 
    } else if(pos == 3 && !$scope.activeButtonArray[pos]) { 
     $scope.activeButtonArray[pos] = true; 
    } else if(pos == 3 && $scope.activeButtonArray[pos]) { 
     $scope.activeButtonArray[pos] = false; 
    } 
    if(pos == 18 || pos == 19) { 
     $scope.activeButtonArray[0] = false; 
     if($scope.activeButtonArray[6] == false && $scope.activeButtonArray[7] == false && $scope.activeButtonArray[8] == false && $scope.activeButtonArray[9] == false && $scope.activeButtonArray[10] == false && $scope.activeButtonArray[11] == false) { 
      $scope.activeButtonArray[1] = false; 
     } 
     if($scope.activeButtonArray[12] == false && $scope.activeButtonArray[13] == false && $scope.activeButtonArray[14] == false && $scope.activeButtonArray[15] == false && $scope.activeButtonArray[16] == false && $scope.activeButtonArray[17] == false && $scope.activeButtonArray[20] == false) { 
      $scope.activeButtonArray[2] = false; 
     } 
    } 
    if(pos == 0) { 
     $scope.activeButtonArray[0] = true; 
     if($scope.activeButtonArray[4] || $scope.activeButtonArray[5]) { 
      $scope.activeButtonArray[0] = true; 
     } 
     if($scope.activeButtonArray[6] == false && $scope.activeButtonArray[7] == false && $scope.activeButtonArray[8] == false && $scope.activeButtonArray[9] == false && $scope.activeButtonArray[10] == false && $scope.activeButtonArray[11] == false) { 
      $scope.activeButtonArray[1] = false; 
     } 
     if($scope.activeButtonArray[12] == false && $scope.activeButtonArray[13] == false && $scope.activeButtonArray[14] == false && $scope.activeButtonArray[15] == false && $scope.activeButtonArray[16] == false && $scope.activeButtonArray[17] == false && $scope.activeButtonArray[20] == false) { 
      $scope.activeButtonArray[2] = false; 
     } 
     if($scope.search.text == undefined || $scope.search.text == '') { 
      $scope.activeButtonArray[3] = false; 
     } 
    } 
    if(pos == 1) { 
     if($scope.activeButtonArray[4] == false && $scope.activeButtonArray[5] == false) { 
      $scope.activeButtonArray[0] = false; 
     } 
     if($scope.activeButtonArray[6] == true || $scope.activeButtonArray[7] == true || $scope.activeButtonArray[8] == true || $scope.activeButtonArray[9] == true || $scope.activeButtonArray[10] == true || $scope.activeButtonArray[11] == true) { 
      $scope.activeButtonArray[1] = true; 
     } 
     if($scope.activeButtonArray[12] == false && $scope.activeButtonArray[13] == false && $scope.activeButtonArray[14] == false && $scope.activeButtonArray[15] == false && $scope.activeButtonArray[16] == false && $scope.activeButtonArray[17] == false && $scope.activeButtonArray[20] == false) { 
      $scope.activeButtonArray[2] = false; 
     } 
     if($scope.search.text == undefined || $scope.search.text == '') { 
      $scope.activeButtonArray[3] = false; 
     } 
    } 
    if(pos == 2) { 
     if($scope.activeButtonArray[4] == false && $scope.activeButtonArray[5] == false) { 
      $scope.activeButtonArray[0] = false; 
     } 
     if($scope.activeButtonArray[6] == false && $scope.activeButtonArray[7] == false && $scope.activeButtonArray[8] == false && $scope.activeButtonArray[9] == false && $scope.activeButtonArray[10] == false && $scope.activeButtonArray[11] == false) { 
      $scope.activeButtonArray[1] = false; 
     } 
     if($scope.activeButtonArray[12] == true || $scope.activeButtonArray[13] == true || $scope.activeButtonArray[14] == true || $scope.activeButtonArray[15] == true || $scope.activeButtonArray[16] == true || $scope.activeButtonArray[17] == true || $scope.activeButtonArray[20] == true) { 
      $scope.activeButtonArray[2] = true; 
     } 
     if($scope.search.text == undefined || $scope.search.text == '') { 
      $scope.activeButtonArray[3] = false; 
     } 
    } 
    if(pos == 3) { 
     if($scope.activeButtonArray[4] == false && $scope.activeButtonArray[5] == false) { 
      $scope.activeButtonArray[0] = false; 
     } 
     if($scope.activeButtonArray[6] == false && $scope.activeButtonArray[7] == false && $scope.activeButtonArray[8] == false && $scope.activeButtonArray[9] == false && $scope.activeButtonArray[10] == false && $scope.activeButtonArray[11] == false) { 
      $scope.activeButtonArray[1] = false; 
     } 
     if($scope.activeButtonArray[12] == false && $scope.activeButtonArray[13] == false && $scope.activeButtonArray[14] == false && $scope.activeButtonArray[15] == false && $scope.activeButtonArray[16] == false && $scope.activeButtonArray[17] == false && $scope.activeButtonArray[20] == false) { 
      $scope.activeButtonArray[2] = false; 
     } 
    } 
    if(pos == 4) { 
     $scope.activeButtonArray[4] = true; 
     $scope.activeButtonArray[5] = false; 
    } 
    if(pos == 5) { 
     $scope.activeButtonArray[4] = false; 
     $scope.activeButtonArray[5] = true; 
    } 
}

我有很多的重复代码的方式，只是不觉得做得非常好或专业出来。我不会自豪地把这个发送给客户。有没有人有任何建议，我可以做得更好？

我投票关闭这个问题作为题外话，因为它属于http://codereview.stackexchange.com – vol7ron

答

论的方法是将取代通过方法/函数整个条件（或块）

所以

if($scope.activeButtonArray[4] || $scope.activeButtonArray[5]) { 
     $scope.activeButtonArray[0] = true; 
    }

变得

if (somethingIsSomething($scope))

这具有更加自的附加益处 - 记录所以你可以“读”你在做什么。

我明白你在说什么。我喜欢这个函数的概念，该函数将采用该数组以及数组中的起点和终点。如果一个或多个为真，则返回true，如果所有都为false，则返回false。 –

是啊，如果你总是想要检查一个范围的所有真或假的。 – pixelearth

我真的想检查是否有任何一个是真的，但概念是一样的，你让我回答我的答案，谢谢。我将发布我做的答案，但是我会将你标记为正确，因为你已经带领我去了。 –

答

我喜欢pixelearth的建议，只是创建了另一个功能，所以我做了。

我决定创建一个函数，它将一个数组，一个起点和一个终点作为参数，如果该范围内的任何数组值都为真，则返回true。

下面是函数：

var arrayContainsTrue = function(arr, start, end) { 
    for(var i = start; i <= end; i++) { 
     if(arr[i] == true) { 
      return true; 
     } 
    } 
    return false; 
}

，然后以缩短我的代码，我只是做这个（基于需要哪些不同的起点和终点）：

if(!arrayContainsTrue($scope.activeButtonArray, 6, 11))

如何将此JavaScript逻辑代码写入更高效/紧凑的方式？

相关推荐