请帮我重构一下这个Javascript代码。 预定的消息发送有一个很大的形式(发送日期,重新记录类型,按日期/ qauntity结束,信用系统 - 需要计算运行时预定发送计划的总成本)。 我正在为这个表单编写Javascript验证器。
有验证算法 1)检查发送日期时间是否在过去时刻 2)检查“按日期结束”字段时间是否大于第一个发送日期时间 3)验证进度计划的总成本
(大约有6个步骤,但我只写了3个步骤 - 我认为这足以解决问题)
“保存预定计划”按钮在“点击”事件中有一个javascript侦听器。这个监听器调用这个函数:
ScheduledValidator.checkIfSendDateTimeIsNotInPast(params, form);
这是它的声明:
ScheduledValidator.checkIfSendDateTimeIsNotInPast = function (params, form) {
var conn = new Ext.data.Connection();
conn.request({
url: CONST.BASE_URL + 'url',
params: params,
callback: function (options, success, response) {
response = Ext.util.JSON.decode(response.responseText);
if (response.success == false) {
// display error messages
} else {
ScheduledValidator.checkIfEndDateIsGreaterThatSendDate(params, form);
}
}
});
}
我们稍后会有嵌套请求:
ScheduledValidator.checkIfEndDateIsGreaterThatSendDate = function (params, form) {
var conn = new Ext.data.Connection();
conn.request({
url: CONST.BASE_URL + 'url2',
params: params,
messageForm: form,
callback: function (options, success, response) {
response = Ext.util.JSON.decode(response.responseText);
if (response.success == false) {
// display error messages
} else {
ScheduledValidator.validateTotalCost(params, form);
}
}
});
}
还有一个:
ScheduledValidator.validateTotalCost = function (params, form) {
...
我不喜欢这种方法,乍一看很难理解算法。 也许不好,为了验证单个表单而制作许多(约6个)嵌套的AJAX查询? 也许它应该合并到单个请求,之后我们将在服务器端进行所有验证活动? 我该如何重构这段代码?
答案 0 :(得分:2)
我建议您在重构代码之前缩小并评估表单流程和用户体验的工作方式。
例如,在输入日期时是否有必要立即向用户提供反馈?是否可以等到她填写完表格后?如果是这样,您可以使用常规表单帖子,验证提交服务器端,并返回反馈。
如果没有,并且体验需要立即反馈,您可能需要考虑围绕实现创建通用包装来处理表单验证。这可以手动完成,或者您可以在Google上查看表单验证机制,以便根据您的需要定义特定的URL和回调。
第三个选项可以是在不联系服务器的情况下进行验证客户端。确定您的逻辑是否可以在Javascript中完成(很可能,如果它涉及日期计算,这不应该太难)并尝试添加一个为您执行此操作的层,这样您就不需要联系服务器了第一名。奖励:取决于服务器端代码响应的速度,这实际上可以改善用户体验(但是,请记住,服务器端验证仍然是必须的!)。
根据您在问题中提供的示例用例,听起来像我以前的建议适用 - 也就是说您的反馈中是否立即填写正确的表格并非完全必要。如果我对您的情况的理解是正确的,我建议通过删除AJAX调用并使其作为普通表单工作来启动重构过程,然后在有效的情况下添加仅客户端验证。