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。