1

一个 JavaScript 函数，需要提示用户输入一些数据，然后通过 Ajax 提交该数据。来自 WinForms/WPF 背景，我的第一个想法是做这样的事情：

function promptForData() {
    $('#my-form').dialog({
        autoOpen: true,
        modal: true,
        buttons: {
            "OK": function () {
                alert("Added");
                // Unlike WinForms I cannot
                // set a dialog result here
                $(this).dialog("close");
            },
            "Cancel": function () {
                alert("Canceled");
                $(this).dialog("close");
            }
        }
    });
}

function update() {
    var data = promptForData();
    // Unlike WinForms execution continues immediately even
    // for a "modal" dialog (jQuery UI Dialog, modal: true)
    makeAjaxCall(data);
}

显而易见的解决方案似乎是重组代码，以便makeAjaxCall(data)在对话框的“OK”处理程序中发生。

由于所涉及的实际代码要复杂得多，我确实希望将提示数据与使用数据分开。是否有合适的模式来做到这一点？

注意：显示的实际实现使用 jQuery UI，但我认为问题与此无关。

4

1 回答 1

2

基本模式是用回调参数表示“下一步做什么”。不要从提示函数返回值，而是使用这些值调用回调，而不是将提示函数的返回值放入变量中，而是将其放入回调的参数中。

function promptForData(callback) {
    $('#my-form').dialog({
    autoOpen: true,
    modal: true,
    buttons: {
        "OK": function () {
            alert("Added");
            // Unlike WinForms I cannot
            // set a dialog result here
            $(this).dialog("close");

            callback(/*pass your data here*/); // <----
        },
        "Cancel": function () {
            alert("Canceled");
            $(this).dialog("close");
        }
    }
});
}

promptForData(function(data){
    makeAjaxCall(data)
})

如果你做了很多异步的事情，这可能会开始变得有点难看，因为回调倾向于“嵌套”在彼此内部，从而创建一个“厄运金字塔”。如果您遇到这种情况，我建议您查看 Promise/Deferred 模式。

请注意，我也没有在这里介绍错误处理。在编写“回调”代码时，如果某些东西可能引发异常，您需要立即添加一个 try/catch 块，以便您可以捕获它并将其传递给单独的错误回调。同样，如果这对您来说是个问题，您可能需要查看 Promises。

于 2013-02-23T00:58:57.880 回答