JQuery 模态对话框 - 销毁还是关闭？答案

【问题标题】：JQuery Modal Dialog - Destroy or Close?JQuery 模态对话框 - 销毁还是关闭？
【发布时间】：2011-04-15 08:17:17
【问题描述】：

我最近遇到了一种情况，我对在处理 JQueryUI 模态对话框时应该使用哪种技术感到有点困惑。

我有一个函数：ClearDay(weekID, ltDayID)。目前这负责创建一个带有两个按钮的对话框：确定和取消。

ok 将触发 ajax 调用，将 weekID 和 ltDayID 传递给服务器。
cancel 将清空对话框的 div 并调用.dialog('destroy') 在目标 div 上。

我的问题是：我应该使用以下哪种方法？

在每次调用时销毁/重新创建对话框 - 这样我就可以将参数传递给 ajax 调用，并且标记中的所有对话框只有一个 div

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

}

只创建一次对话框，但标记中的每个对话框都有一个 div，使用 Close，并使用 Jquery Selectors 直接传递值

$(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');

}

干杯，

詹姆斯

【问题讨论】：

标签： jquery jquery-ui modal-dialog

【解决方案1】：

说实话，我不确定。但是，您可以使用 javascript 分析器来测量执行任一方式所需的时间。

这里是 Google Chrome 开发者工具http://code.google.com/chrome/devtools/docs/profiles.html中的 javascript 分析器的迷你指南的链接@

我建议第二个选项会更慢，因为我猜“数据”中的选择器需要评估，因此会变慢。

但是，这将取决于对话将打开/关闭多少次。正如我猜测的那样，破坏和重建会很慢（眨眼间就好了——但可能会慢一点）。

第一个似乎是一个更简单的实现，所以如果性能似乎不是问题 - 也许只需选择两者中更简单的一个。

【讨论】：

第二个也将导致 jquery 保留对话框的所有 html 代码内容，这是在所有侦听器都打开的情况下动态构建对话框时添加的。当使用大量对话框时，这是第二个解决方案，甚至更慢..

【解决方案2】：

这取决于您使用 ClearDay 函数的元素数量。如果元素的数量很大，那么第二种方法即。（创建一个对话框并重复使用它）是一种好方法，反之亦然。

【讨论】：