Cuadro de diálogo modal JQuery: ¿destruir o cerrar?

Question

Recientemente me encontré con una situación en la que estaba un poco confundido acerca de qué técnica debo usar cuando trato con JQueryUI Modal Dialog.

Tengo una función: ClearDay (weekID, ltDayID). Actualmente este es el responsable de crear un diálogo con dos botones: ok y cancelar.

ok disparará una llamada ajax, pasando weekID y ltDayID al servidor.
cancelar vaciar el cuadro de diálogo div y llamar a .dialog('destroy') en el div de destino.

Mi pregunta es: ¿qué siguiente enfoque debo usar?

Destruir/Re-Crear diálogo en cada llamada - para que pueda pasar parámetros a la llamada Ajax y sólo tienen una div para todos de diálogo en el marcado

function ClearDay(weekID, ltDayID) { 

    $('#modalDialog').dialog({ 
     autoOpen: true, 
     width: 300, 
     title: 'Confirm Delete', 
     modal: true, 
     buttons: [{ 
      text: 'ok', 
      click: function (e) { 

       $(this).dialog('close'); 

       $.ajax({ 
        url: '/Shift/ClearDay', 
        type: 'POST', 
        cache: false, 
        data: { shiftWeekID: weekID, shiftLtDayID: ltDayID }, 
        success: function (result) { 

         LoadShiftPattern(function (result) { 

          $('#weekContainer').html(result); 

          SelectLastUsedField(); 
         }); 

        } 
       }); 
      } 
     }, 
      { 
       text: 'cancel', 
       click: function (e) { 
        $('#errorList').empty(); 
        $(this).dialog('close'); 
       } 
      }], 
     open: function (e) { 

      $(this).html("Clicking ok will cause this day to be deleted."); 

     }, 
     close: function (e) { 
      $(this).empty(); 
      $(this).dialog('destroy'); 
     } 
    }); 

} 

Crear el cuadro de diálogo sólo una vez, pero que tiene uno div para cada cuadro de diálogo en el marcado, utilizando Close, y que pasa en los valores directamente utilizando Jquery Selectores

$(function() { 

$('#confirmDeleteDialog').dialog({ 
     autoOpen: false, 
     width: 300, 
     title: 'Confirm Delete', 
     modal: true, 
     buttons: [{ 
      text: 'ok', 
      click: function (e) { 

       $(this).dialog('close'); 

       $.ajax({ 
        url: '/Shift/ClearDay', 
        type: 'POST', 
        cache: false, 
        data: { shiftWeekID: $('#weekIDInput').val(), shiftLtDayID: $('#dayIDInput').val()}, 
        success: function (result) { 

         LoadShiftPattern(function (result) { 

          $('#weekContainer').html(result); 

          SelectLastUsedField(); 
         }); 

        } 
       }); 
      } 
     }, 
      { 
       text: 'cancel', 
       click: function (e) { 
        $('#errorList').empty(); 
        $(this).dialog('close'); 
       } 
      }], 
     open: function (e) { 

      $(this).html("Clicking ok will cause this day to be deleted."); 

     } 
    }); 
} 

function ClearDay() { 

    $('#confirmDeleteDialog').dialog('open'); 

} 

Saludos,

James

Answer 1

Para ser sincero, no estoy seguro. Sin embargo, puede usar un generador de perfiles de javascript para medir el tiempo que lleva ejecutar de cualquier manera.

Aquí hay un enlace a una mini-guía para el perfilador de JavaScript en las herramientas para desarrolladores de Google Chrome http://code.google.com/chrome/devtools/docs/profiles.html

me gustaría sugerir que la segunda opción sería más lenta, ya que supongo que los selectores de "datos" necesitaría ser evaluado y, por lo tanto, hacerlo más lento.

Sin embargo, esto dependerá de cuántas veces se abrirá/cerrará el diálogo. Como supongo, destruir y recrear será lento (bueno en un abrir y cerrar de ojos, pero quizás un poco más lento).

La primera parece una implementación más simple, por lo que si el rendimiento no parece ser un problema, quizás simplemente elija el más simple de los dos.

Answer 2

Depende de la cantidad de elementos que está utilizando la función de ClearDay. Si el no de elementos es grande, entonces el segundo enfoque es decir. (Crear un diálogo y reutilizarlo) es un buen enfoque y viceversa.