Question

一个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);
}

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

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

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

Answer 1

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

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模式。

请注意，我也没有在此处介绍错误处理。当编写“callbacky”代码时，如果有什么东西可以抛出异常，你需要立即添加一个try / catch块，这样你就可以捕获它并将它传递给一个单独的错误回调。同样，如果这对您来说成为一个问题，您可能需要查看Promises。

JavaScript和模态对话框

1 个答案: