Question

///我有一个函数，它根据输入到//字段中的输入用户返回搜索结果。该代码是使用嵌套的if-else语句构建的，该语句最终增加了代码的认知//复杂性。我想通过减少if-else //语句来减少代码复杂度。 //这是我的代码

(function($) {
  $(document).ready(function() {
    myFunction();
  });
  function myFunction() {
    $('#searchInput').keyup(function() {
      var  i;
      var input = document.getElementById("searchInput");
      var filter = input.value.toUpperCase();
      var table = document.getElementById("tabledisplay");
      var tr = table.getElementsByTagName("tr");
      var e = document.getElementById("searchtype");
      var strUser = e.options[e.selectedIndex].value;
      for (i = 0; i < tr.length; i++) {
        if (strUser == 'Date') {
          td = tr[i].getElementsByTagName("td")[1];
          if (td) {
          var txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
              tr[i].style.display = "";
            }
            else {
            tr[i].style.display = "none";
            }
          }
        }
        else if (strUser == 'City') {
          td = tr[i].getElementsByTagName("td")[2];
          if (td) {
            txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
              tr[i].style.display = "";
            }
            else {
            tr[i].style.display = "none";
            }
          }
        }
        else if (strUser == 'State') {
          td = tr[i].getElementsByTagName("td")[3];
          if (td) {
            txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
              tr[i].style.display = "";
            }
            else {
            tr[i].style.display = "none";
            }
          }
        }
        else if (strUser == 'Inspection Number') {
          td = tr[i].getElementsByTagName("td")[5];
          if (td) {
            txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
              tr[i].style.display = "";
            }
            else {
            tr[i].style.display = "none";
            }
          }
        }
      }
    });
  }
})(jQuery, Drupal, drupalSettings);

Answer 1

考虑if(块之间的唯一区别是以下行：

 td = tr[i].getElementsByTagName("td")[2]

您可能只是有一个对象，例如：

const fields = {Date: 1, City: 2, State: 3..

然后仅使用该块一次，将strUser作为键名：

td = tr[i].getElementsByTagName("td")[fields[strUser}]

Answer 2

有一个对象来查找字符串索引

const indexes = {
  Date: 1,
  City: 2,
  State: 3,
  'Inspection Number': 5
}

(function($) {
  $(document).ready(function() {
    myFunction();
  });
  function myFunction() {
    $('#searchInput').keyup(function() {
      var  i;
      var input = document.getElementById("searchInput");
      var filter = input.value.toUpperCase();
      var table = document.getElementById("tabledisplay");
      var tr = table.getElementsByTagName("tr");
      var e = document.getElementById("searchtype");
      var strUser = e.options[e.selectedIndex].value;
      for (i = 0; i < tr.length; i++) {
        if (strUser in indexes) {
          index = indexes[strUser]
          td = tr[index].getElementsByTagName("td")[index];
          if (td) {
          var txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
              tr[i].style.display = "";
            }
            else {
            tr[i].style.display = "none";
            }
          }
        }
      }
    });
  }
})(jQuery, Drupal, drupalSettings);

Answer 3

重复了很多代码。您可以编写另一个函数，我认为有两个参数可以解决此问题。

对于if / else语句，对于一个线性if / else块，您可以利用三元数。对于顶级if / else语句，可以使用switch语句。

(function ($) {
  $(document).ready(function () {
    myFunction();
  });

  function tdFunc(td = false, index, filter) {
    if (!td) return false;

    let txtValue = td.textContent || td.innerText;
    txtValue.toUpperCase().indexOf(filter) > -1 ?
        tr[index].style.display = "" :
        tr[index].style.display = "none";
  }

  function myFunction() {
    $("#searchInput").keyup(function () {
      var i;
      var input = document.getElementById("searchInput");
      var filter = input.value.toUpperCase();
      var table = document.getElementById("tabledisplay");
      var tr = table.getElementsByTagName("tr");
      var e = document.getElementById("searchtype");
      var strUser = e.options[e.selectedIndex].value;

      Array.from(tr).forEach((el, i) => {

        switch(strUser) {
            case 'Date':
                tdFunc(
                    tr[i].getElementsByTagName("td")[1], 
                    i,
                    filter
                );
                break;
            case 'City':
                tdFunc(
                    tr[i].getElementsByTagName("td")[2], 
                    i,
                    filter
                );
                break;
            case 'State':
                tdFunc(
                    tr[i].getElementsByTagName("td")[2], 
                    i,
                    filter
                );
                break;
            case 'Inspection Number':
                tdFunc(
                    tr[i].getElementsByTagName("td")[5], 
                    i,
                    filter
                );
                break;
        }
      });
    });
  }
})(jQuery, Drupal, drupalSettings);

您可以进一步增强它，但这只是一个简单的示例。

是否想减少嵌套语句，以减少认知复杂性？

3 个答案: