我如何将这个javascript逻辑代码编写成更高效/紧凑的方式
How can I write this javascript logic code into a more efficient/compact way?
在我正在工作的一个项目中，我有21个按钮，都有活动和非活动状态。某些按钮的状态受到正在按下的其他按钮以及正在按下的按钮的影响。在我的html中，我使用ng-click调用函数updateActiveButtons(num)来激活或停用某些按钮。
我能想到的最好的方法是使用一个包含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;
}
}
我有很多重复的代码，它们以一种感觉不太好或不专业的方式出现。我不会把这个给客户看的。谁有什么建议，我可以做得更好吗?
一种方法是用方法/函数代替整个条件(或块)
if($scope.activeButtonArray[4] || $scope.activeButtonArray[5]) {
$scope.activeButtonArray[0] = true;
}
是
if (somethingIsSomething($scope))
这有一个额外的好处，那就是更加自我记录，这样你就可以"读"到你正在做的事情。
我喜欢pixelearth关于创建另一个函数的建议，所以我这样做了。
我决定创建一个函数，它接受一个数组、一个起始点和一个结束点作为参数，如果在该范围内的任何一个数组值为真，则返回真。
函数如下:
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))
相关文章：
- 为什么这在IE中的工作方式与在Firefox中不同
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- Windows8应用程序(html&Javascript）:从图片库(除了文件选择器）显示图像的另一种方式
- 在localhost Dev Box上测试JSONP请求的最佳方式
- 使用javascript存储变量的最安全方式
- 以可优化的方式使用requirejs加载模板
- 在Highcharts中，我们可以通过任何方式在渲染图表之前获得plotWidth和plotHeight
- 任何方式使AJAX调用Gmail API，而无需通过JS库
- 为react组件传递道具的最佳方式
- 让Webpack管理Quirky AMD定义的最佳方式
- 在承诺链中处理早期回报的最佳方式
- 如何“;过滤器”;或者以其他方式重构该数据
- 在JavaScript中，最紧凑、最优雅、最高效的四舍五入方式是什么
- 更优雅/高效的方式来连续获取 6 个连续的先前 DOM 元素
- 将表单中的多个值字段发送到aspx web表单的高效且轻松的方式
- 谷歌地图.以高效的方式用PHP变量创建大量的infoWindow
- 使用jQuery更高效的方式根据条件查找每个表行中的第n个单元格
- 用Ruby在网页中执行JS的最高效方式(HtmlUnit, Celerity, PhantomJS, CasperJS
- 我如何将这个javascript逻辑代码编写成更高效/紧凑的方式
- 如何以高效的方式定期更新PHP/HHVM作为后端的单页应用程序?
