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

JQuery Modal Dialog - Destroy or Close?

提问by Zack

I've recently come across a situation where I've been a bit confused about which technique I should use when dealing with JQueryUI Modal Dialog's.

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

I've got a function: ClearDay(weekID, ltDayID). Currently this is responsible for creating a dialog with two buttons: ok and cancel.

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

okwill fire an ajax call, passing weekID and ltDayID to the server.
cancelwill empty the dialog's divand call .dialog('destroy')on the target div.

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

My question is: which following approach should I use?

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

Destroy/Re-Create Dialog on every call - so that I can pass parameters to the ajax call and only have one divfor all dialog's in the markup

在每次调用时销毁/重新创建对话框 - 这样我就可以将参数传递给 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');
        }
    });

}

Create the dialog only once, but having one divfor each dialog in the markup, using Close, and passing in the values directly using Jquery Selectors

只创建一次对话框，但标记中的每个对话框都有一个div，使用关闭，并使用 Jquery 选择器直接传入值

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

}

Cheers,

干杯，

James

詹姆士

采纳答案by Alex KeySmith

To be honest, I'm not sure. However you could use a javascript profiler to measure the time it takes to execute either way.

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

Here is a link to a mini-guide for the javascript profiler in Google Chrome's developer tools http://code.google.com/chrome/devtools/docs/profiles.html

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

I'd suggest that the 2nd option would be slower, as I'm guessing the selectors in "data" would need to be evaluated and therefore making it slower.

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

However, this is going to depend on how many times the dialogue is going to be opened / closed. As I'm guessing destroying and recreating will be slow (well in the blink of an eye - but perhaps a little bit slower).

但是，这将取决于对话将打开/关闭的次数。因为我猜破坏和重建会很慢（眨眼之间 - 但可能会慢一点）。

The first seems like a simpler implementation, so if performance doesn't seem to be an issue - perhaps just choose the simpler of the two.

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

回答by 001priyank

It depends on how many elements you are using the function ClearDay. If the no of elements is large then the second approach ie. (Creating one dialog and reusing it) is good approach and vice-versa.

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