Question

我最近遇到过一种情况，我在处理JQueryUI Modal Dialog时应该使用哪种技术。

我有一个功能： ClearDay（weekID，ltDayID）。目前，它负责创建一个带有两个按钮的对话框：ok和cancel。

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

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

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

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

}

干杯，

詹姆斯

Answer 1

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

以下链接指向Google Chrome开发人员工具中{javascript Profiler的迷你指南} {/ 3}}

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

然而，这取决于对话将被打开/关闭的次数。因为我猜测破坏和重建会很慢（眨眼之间 - 但也许有点慢）。

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

Answer 2

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

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

2 个答案: