[英]Split if else statements for code refactoring
代碼:每次僅顯示一條錯誤消息。
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語句並避免代碼重復的最佳方法。
你可以這樣子。
//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()
返回的值的類型,它將是脆弱的。
您可以通過以下方式執行此操作:
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;
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.