jQuery模式对话框-销毁还是关闭? [英] JQuery Modal Dialog - Destroy or Close?

问题描述

最近，我遇到一种情况，在处理JQueryUI Modal Dialog时应该使用哪种技术有些困惑.

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.

我有一个功能: ClearDay(weekID，ltDayID).当前，这负责创建带有两个按钮的对话框:确定"和取消".

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

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

ok will fire an ajax call, passing weekID and ltDayID to the server.
cancel will empty the dialog's div and call .dialog('destroy') on the target div.

我的问题是:我应该使用以下哪种方法?

My question is: which following approach should I use?

在每次调用中销毁/重新创建对话框-这样我就可以将参数传递给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 ，使用关闭"，然后使用"jQuery选择器"直接传递值

Create the dialog only once, but having one div for each dialog in the markup, using Close, and passing in the values directly using 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');

}

干杯

詹姆斯

推荐答案

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

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

此处是指向Google Chrome开发者工具中的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

我建议第二个选项的速度要慢一些，因为我猜测数据"中的选择器需要进行评估，因此会变慢.

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.

这篇关于jQuery模式对话框-销毁还是关闭?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！