Javascript 如何从函数返回初始化的对话框对象？

我目前正在尝试学习OOJavaScript，以便编写更清晰的代码。在下面的代码中，我使用了jQueryUIDialog对象和我自己的类，因此我可以轻松地初始化许多对话框

问题是函数没有返回对话框对象，因此我无法从中访问方法和属性

  /*
*  Load AddTaskForm dialog
*/
$('#AddTask').click(function ()
{
    /* Ajax request to load form into it */
    $.ajax({
        type: 'Get',
        url: '/Planner/Planner/LoadAddTaskForm',
        dataType: 'html',
        success: function (AddTaskForm)
        {
            var d = new AddDialog();
            var result = d.Dialog();

              /* AddTaskDialog.html(AddTaskForm);
            AddTaskDialog.dialog('open');*/
        }
    });
});



function AddDialog()
{
    this.Dialog = function()
    {
        $('<div></div>').dialog(
        {
            width: 580,
            height: 410,
            resizable: false,
            modal: true,
            autoOpen: false,
            title: 'Basic Dialog',
            buttons:
                {
                    Cancel: function ()
                    {
                        $(this).dialog('close');
                    },
                    'Create Task': function ()
                    {

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

/*
*加载AddTaskForm对话框
*/
$（“#添加任务”）。单击（函数（）
{
/*Ajax请求将表单加载到其中*/
$.ajax({
键入：“Get”，
url:“/Planner/Planner/LoadAddTaskForm”，
数据类型：“html”，
成功：函数（AddTaskForm）
{
var d=新建AddDialog（）；
var result=d.Dialog（）；
/*AddTaskDialog.html（AddTaskForm）；
AddTaskDialog.dialog（“打开”）*/
}
});
});
函数AddDialog（）
{
this.Dialog=函数（）
{
$（''）。对话框(
{
宽度：580，
身高：410，
可调整大小：false，
莫代尔：是的，
自动打开：错误，
标题：“基本对话框”，
按钮：
{
取消：函数（）
{
$（this.dialog（'close'）；
},
“创建任务”：函数（）
{
}
},
关闭：函数（）
{
$（this.dialog（'destroy'）.remove（）；
}
});
} 
}

**更新代码

  /*
*  Load AddTaskForm dialog
*/
$('#AddTask').click(function ()
{
    /* Ajax request to load form into it */
    $.ajax({
        type: 'Get',
        url: '/Planner/Planner/LoadAddTaskForm',
        dataType: 'html',
        success: function (AddTaskForm)
        {
            var AddTaskDialog = $('<div></div>');
            AddTaskDialog.dialog(AddTaskDialogOptions);
            AddTaskDialog.html(AddTaskForm);
            AddTaskDialog.dialog('open');
        }
    });
});


/*
*  Add task dialog default options
*/
var AddTaskDialogOptions = {
    width: 580,
    height: 410,
    resizable: false,
    modal: true,
    autoOpen: false,
    title: 'Basic Dialog',
    buttons:
        {
            Cancel: function ()
            {
                $(this).dialog('close');
            },
            'Create Task': function ()
            {

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

/*
*加载AddTaskForm对话框
*/
$（“#添加任务”）。单击（函数（）
{
/*Ajax请求将表单加载到其中*/
$.ajax({
键入：“Get”，
url:“/Planner/Planner/LoadAddTaskForm”，
数据类型：“html”，
成功：函数（AddTaskForm）
{
var AddTaskDialog=$（''）；
AddTaskDialog.dialog（AddTaskDialogOptions）；
AddTaskDialog.html（AddTaskForm）；
AddTaskDialog.dialog（“打开”）；
}
});
});
/*
*添加任务对话框默认选项
*/
var AddTaskDialogOptions={
宽度：580，
身高：410，
可调整大小：false，
莫代尔：是的，
自动打开：错误，
标题：“基本对话框”，
按钮：
{
取消：函数（）
{
$（this.dialog（'close'）；
},
“创建任务”：函数（）
{
}
},
关闭：函数（）
{
$（this.dialog（'destroy'）.remove（）；
}
}

这很有效

 /*
*  Load AddTaskForm dialog
*/
$('#AddTask').click(function ()
{
    var addTaskDialog = $('<div></div>');
    addTaskDialog.dialog(AddTaskDialogOptions);
    addTaskDialog.html('wowowo');
    addTaskDialog.dialog('open');  
});

/*
*加载AddTaskForm对话框
*/
$（“#添加任务”）。单击（函数（）
{
var addTaskDialog=$（''）；
addTaskDialog.dialog（AddTaskDialogOptions）；
addTaskDialog.html（'wowowowo'）；
addTaskDialog.dialog（“打开”）；
});

这行不通

 /* Ajax request to load form into it */
    $.ajax({
        type: 'Get',
        url: '/Planner/Planner/LoadAddTaskForm',
        dataType: 'html',
        success: function (AddTaskForm)
        {
            var addTaskDialog = $('<div></div>');
            addTaskDialog.dialog(AddTaskDialogOptions);
            addTaskDialog.html(AddTaskForm);
            addTaskDialog.dialog('open');  
        }
    });

/*将表单加载到其中的Ajax请求*/
$.ajax({
键入：“Get”，
url:“/Planner/Planner/LoadAddTaskForm”，
数据类型：“html”，
成功：函数（AddTaskForm）
{
var addTaskDialog=$（''）；
addTaskDialog.dialog（AddTaskDialogOptions）；
addTaskDialog.html（AddTaskForm）；
addTaskDialog.dialog（“打开”）；
}
});

这是因为您不“返回”任何对话框，而是一个函数

顺便说一句，这种编码是一切，但不是干净的！ 对话框已经是一个类，它已经是一个对象。和jQuery一样。您不需要将它包装到一个函数中，然后再包装到另一个类中

jQueryUI对话框是一个jQueryUI小部件。这意味着，您可以使用

$（“某物”）.dialog（“widget”）

轻松访问该对话框，并获得该对话框的实例

如果你想让它匿名但可访问，你应该这样做

var myDialogMarkup = $("<div></div>").dialog();

然后

$("<div></div>").dialog(myDialogDefaultVars);

---

当我们使用jQuery时，我们遵循一些基本规则

var AddTaskDialog = $('<div></div>');
            AddTaskDialog.dialog(AddTaskDialogOptions);
            AddTaskDialog.html(AddTaskForm);
            AddTaskDialog.dialog('open');

var AddTaskDialog=$（''）；
AddTaskDialog.dialog（AddTaskDialogOptions）；
AddTaskDialog.html（AddTaskForm）；
AddTaskDialog.dialog（“打开”）；

你不是这样工作的。相反，你这样做

var $dialog = $("<div></div>")
             .append(AddTaskForm)
             .dialog(AddTaskDialogOptions)
             .dialog("open");

var$dialog=$（“”）
.append（AddTaskForm）
.dialog（AddTaskDialogOptions）
.对话框（“打开”）；

Luke的优点。只是出于好奇，我该如何返回对话框对象而不是函数呢？谢谢你提供的。还有一件事。在您的第一个示例中，当我尝试关闭或取消表单时，我得到一个“对象不支持此属性或方法”。它不喜欢“this”指针，它在IE8和Firefox3.6中都会出错。对话框单独工作，但当我将该对象传递给AddTaskDialog.dialog（AddTaskDialogOptions）时；“this”引用出现了一些问题，我删除了其中的Ajax部分，它可以正常工作。因此，出于某种原因，“this”指针在从Ajax请求调用obect时出错。对不起，不管我做什么，我都无法重现您的错误。您确定您没有在其他地方出错吗？因为如果您在对话框实例化期间出错，那么“this”指针没有调用关键字get，因此没有理由得到错误，它必须在其他地方

function AddDialog()
{
    this.Dialog = function()
    {
         return $('<div></div>').dialog(
        { ... }).dialog("widget");
    }
}

var d = new AddDialog();
d.Dialog().close();

var AddTaskDialog = $('<div></div>');
            AddTaskDialog.dialog(AddTaskDialogOptions);
            AddTaskDialog.html(AddTaskForm);
            AddTaskDialog.dialog('open');

var $dialog = $("<div></div>")
             .append(AddTaskForm)
             .dialog(AddTaskDialogOptions)
             .dialog("open");