JavaScript和模式对话框

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

明显的解决方案似乎是重组的代码，以便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。