组里面下任务，下发了几个老系统里面的js文件来做重构设计。
抽了其中一小段出来搞了一下，感觉还是有收获的，先贴上自己重构的代码，后续还会有讨论的分享。
主要的业务逻辑是在表单提交之前做很多的逻辑验证，金额以及日期的选择，由于是后台系统，所以交互上面不是特别看重，错误提示都直接alert了。
这段代码主要问题是if..else的嵌套太多，此外感觉有一些地方原来写的不严谨。
我的第一反应是将过多的嵌套去掉，增强代码的可读性, 所以这是第一个重构迭代的主要目标；
第二轮，就会想想是不是可以把一些东西抽象一下。
优化的代码也可以直接看这里。
对于if..else..语句的优化，可以参考这篇文章。
下面直接看代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | /**
* 原始代码
*/
var beforeSubmit = function(e, ajaxTip){
var scopeDays = countDays('date1', 'date2');
var oDate1 = D.get('date1').value;
var oDate2 = D.get('date2').value;
var regCal = /^\d{4}-((0[1-9]{1})|(1[0-2]{1}))-((0[1-9]{1})|([1-2]{1}[0-9]{1})|(3[0-1]{1}))$/;
if (/^\s*\d+(\.\d{0,2})?\s*$|^\s*$/.test(D.get("minAmount").value)) {
if (parseFloat(D.get("minAmount").value.trim()) == 0) {
alert("最小金额为0.01");
E.stopEvent(e);
return;
}
} else {
alert("金额格式错误，必须为数字，且至多2位小数。");
E.stopEvent(e);
return;
}
if (/^\s*\d+(\.\d{0,2})?\s*$|^\s*$/.test(D.get("maxAmount").value)) {
if (parseFloat(D.get("maxAmount").value.trim()) == 0) {
alert("最小金额为0.01");
E.stopEvent(e);
return;
}
} else {
alert("金额格式错误，必须为数字，且至多2位小数。");
E.stopEvent(e);
return;
}
if (oDate1 == '') {
alert('请输入开始日期！');
E.stopEvent(e);
} else {
if (oDate2 == '') {
alert('请输入结束日期！');
E.stopEvent(e);
} else {
if (regCal.test(oDate1) == false || regCal.test(oDate2) == false) {
alert('抱歉，日期格式输入不正确，格式应为：yyyy-mm-dd（如：2010-10-08）');
E.stopEvent(e);
} else {
if (oDate1 > oDate2) {
alert("开始日期应当在结束日期之前！");
E.stopEvent(e);
} else {
if (scopeDays > 186) {
alert("抱歉,日期查询范围不能超过6个月！");
E.stopEvent(e);
} else {
if (ajaxTip(scopeDays)) {
document.getElementsByName("pageStr")[0].value = 1;//重置查询时候页码设为第一页
D.get('JSFormSearch').disabled = true;
D.get('JSFormSearch').form.submit();
}
}
}
}
}
}
}; |
—————————————————————
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | /**
* 改造迭代一
*/
var beforeSubmit = function(e, ajaxTip){
var scopeDays = countDays('date1', 'date2'),
oDate1 = D.get('date1').value,
oDate2 = D.get('date2').value,
regCal = /^\d{4}-((0[1-9]{1})|(1[0-2]{1}))-((0[1-9]{1})|([1-2]{1}[0-9]{1})|(3[0-1]{1}))$/,
regAmount = /^\s*\d+(\.\d{0,2})?\s*$|^\s*$/,
minAmount = D.get("minAmount").value,
maxAmount = D.get("maxAmount").value;
E.stopEvent(e);
if (!regAmount.test(minAmount) || !regAmount.test(maxAmount)) {
alert("金额格式错误，必须为数字，且至多2位小数。");
return;
}
if (parseFloat(minAmount.trim()) == 0 || parseFloat(maxAmount.trim()) == 0) {
alert("最小金额为0.01");
return;
}
if (oDate1 == '') {
alert('请输入开始日期！');
return;
}
if (oDate2 == '') {
alert('请输入结束日期！');
return;
}
if (regCal.test(oDate1) == false || regCal.test(oDate2) == false) {
alert('抱歉，日期格式输入不正确，格式应为：yyyy-mm-dd（如：2010-10-08）');
return;
}
if (oDate1 > oDate2) {
alert("开始日期应当在结束日期之前！");
return;
}
if (scopeDays > 186) {
alert("抱歉,日期查询范围不能超过6个月！");
return;
}
if (ajaxTip(scopeDays)) {
document.getElementsByName("pageStr")[0].value = 1;//重置查询时候页码设为第一页
D.get('JSFormSearch').disabled = true;
D.get('JSFormSearch').form.submit();
}
}; |
—————————————————————
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | /**
* 改造迭代二
*/
var beforeSubmit = function(e, ajaxTip){
var scopeDays = countDays('date1', 'date2'),
oDate1 = D.get('date1').value,
oDate2 = D.get('date2').value,
regCal = /^\d{4}-((0[1-9]{1})|(1[0-2]{1}))-((0[1-9]{1})|([1-2]{1}[0-9]{1})|(3[0-1]{1}))$/,
regAmount = /^\s*\d+(\.\d{0,2})?\s*$|^\s*$/,
minAmount = D.get("minAmount").value,
maxAmount = D.get("maxAmount").value,
stat = '';
var errorObj = {
'errAmountFormat' : "金额格式错误，必须为数字，且至多2位小数。",
'errMinAmount' : "最小金额为0.01",
'errNullStartDate' : '请输入开始日期！',
'errNullEndDate' : '请输入结束日期！',
'errDateFormat' : '抱歉，日期格式输入不正确，格式应为：yyyy-mm-dd（如：2010-10-08）',
'errDateOrder' : "开始日期应当在结束日期之前！",
'errDateMaxScope' : "抱歉,日期查询范围不能超过6个月！",
'errUnexpected' : "未知错误"
};
E.stopEvent(e);
stat = (function(){
if (!regAmount.test(minAmount) || !regAmount.test(maxAmount)) { return 'errAmountFormat'; }
if (parseFloat(minAmount.trim()) == 0 || parseFloat(maxAmount.trim()) == 0) { return 'errMinAmount'; }
if (oDate1 == '') { return 'errNullStartDate'; }
if (oDate2 == '') { return 'errNullEndDate'; }
if (regCal.test(oDate1) == false || regCal.test(oDate2) == false) { return 'errDateFormat'; }
if (oDate1 > oDate2) { return 'errDateOrder'; }
if (scopeDays > 186) { return 'errDateMaxScope'; }
if (!ajaxTip(scopeDays)) { return 'errUnexpected'; }
return 'ok';
})();
if (stat !== 'ok') {
alert(errorObj[stat]);
} else {
document.getElementsByName("pageStr")[0].value = 1;//重置查询时候页码设为第一页
D.get('JSFormSearch').disabled = true;
D.get('JSFormSearch').form.submit();
}
return;
}; |
