拆分 if else 语句以进行代码重构答案

【问题标题】：Split if else statements for code refactoring拆分 if else 语句以进行代码重构
【发布时间】：2016-11-13 04:27:20
【问题描述】：

代码：每次只显示一条错误消息。

function isValidFields() {

        if (!$("#x").val()) {
            utilsService.setErrorClass('x');
            $scope.validationMessage.xErrorMessage = true;

        } else if (!$("#a").val()) {
            utilsService.setErrorClass('a');
            $scope.validationMessage.yErrorMessage = true;

        } else if (!$("#b").val()) {
            utilsService.setErrorClass('b');
            $scope.validationMessage.zgErrorMessage = true;

        } else if (!$("#c").val()) {
            utilsService.setErrorClass('c');
            $scope.validationMessage.cgErrorMessage = true;

        } else if (!$("#d").val()) {
            utilsService.setErrorClass('d');
            $scope.validationMessage.dgErrorMessage = true;


        } else if (!$("#e").val()) {
            utilsService.setErrorClass('e');
            $scope.validationMessage.egErrorMessage = true;


        } else if (!$("#f").val()) {
            utilsService.setErrorClass('f');
            $scope.validationMessage.fgErrorMessage = true;

        } else {
            $scope.validationMessage = {};
            return true;
        }
    }

使上述代码更具可读性并避免许多 if else 语句并避免代码重复的最佳方法是什么。

【问题讨论】：

我能看到 HTML 和 Angular 控制器的样子吗？所有这些都可以用角度来完成，这将大大清理它（选择一项技术）

标签： javascript angularjs if-statement logic

【解决方案1】：

你可以用这样的东西..

//mock scope
let $scope = {
  validationMessage: {
    xErrorMessage: null
  }
};

//mock utilServer
let utilsService = {
  setErrorClass: (id) => console.log(id)
}

function isValidFields() {
  let ids = ['x', 'a', 'b', 'c', 'd', 'e', 'f'];

  // find the id of the first element with an empty value
  let first = ids.reduce((last, curr) => {
    return last || ((!$("#" + curr).val()) ? curr : null)
  }, null);

  // all elements had values
  if (!first) {
    $scope.validationMessage = {};
    return true;
  }

  utilsService.setErrorClass(first);
  $scope.validationMessage.xErrorMessage = true;
}

input, button {
  display: block;
  margin: 10px;
  padding: 10px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onClick="isValidFields()">try it</button>

<input typ="text" id="x">
<input typ="text" id="a">
<input typ="text" id="b">
<input typ="text" id="c">
<input typ="text" id="d">
<input typ="text" id="e">
<input typ="text" id="f">

请注意，这应该等同于原始代码，但根据 val() 返回的值类型，它会很脆弱。

【讨论】：

，reduce 方法似乎不正常，每次我提交带有数组顺序的表单（作为表单字段顺序）时，我都需要检查一个字段。如果一个失败它应该停止，它也应该显示第二个错误。
reduce 只会返回 1 个值，即第一个空元素的 id。我用模拟更新了代码，以便您可以逐步验证。
setErrorClass: (id) => console.log(id) 你能告诉我它是什么设计模式吗？
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

【解决方案2】：

您可以通过以下方式做到这一点：

function isValidFields() {
 var fields = ['x','a','b','c','d','e','f'];
    $scope.validationMessage = {};
    for(var i=0;i<fields.length;i++){
        if(!$("#"+fields[i]).val()) {
            utilsService.setErrorClass(fields[i]);
            $scope.validationMessage[fields[i]+'ErrorMessage'] = true;
            return true;
        }
    }
}

【讨论】：