javascript - 嵌套 AJAX 回调函数的可读性

Question

请帮助我重构这段 Javascript 代码。计划消息发送有很大的形式(发送日期，重复类型，按日期/数量结束，信用系统 - 需要在运行时计算计划发送计划的总成本)。我正在为此表单编写 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 查询来验证单个表单可能不好？也许它应该合并到单个请求中，然后我们将在服务器端进行所有验证事件？我应该如何重构这段代码？

Answer 1

我建议您在重构代码之前缩小并评估表单流程和用户体验的工作方式。

比如输入日期是否需要立即反馈给用户？能等她填完表吗？如果是这样，您可以只使用常规表单发布，在服务器端验证提交，然后返回反馈。

如果没有，并且体验需要立即反馈，您可能需要考虑围绕您的实现创建一个通用包装器来处理表单验证。这可以手动完成，或者您可以在 Google 上查找允许您根据需要定义特定 URL 和回调的表单验证机制。

第三种选择是在不联系服务器的情况下在客户端进行验证。确定您的逻辑是否可以在 Javascript 中完成(很可能，如果它涉及日期计算，这应该不会太难)并尝试添加一个层来为您完成，这样您就不需要联系服务器第一名。奖励:根据服务器端代码的响应速度，这实际上可以改善用户体验(但是，请记住，服务器端验证仍然是必须的!)。

从您在问题中给出的示例用例来看，我之前的建议听起来很适用——即您不必如此立即就表单是否填写正确提出反馈。如果我对您的情况的理解是正确的，我会建议通过删除 AJAX 调用并使其以正常形式工作来开始重构过程，然后在工作正常后添加仅客户端验证。