jquery - 将 OO 添加到 jQuery.dialog()

Question

我正在开发一个网页，其中包含许多jQuery dialogs .

虽然我的代码基本上可以工作，但我注意到它很快就变得“脏”，并且我强烈渴望清理代码并使其更像 OO。

我的代码的主要问题是:

• 没有特定于对话框的状态(即变量集)
• 没有对话框本地事件处理程序
• 特定于对话框的功能是全局的

有哪些方法和解决方案可以使 jQuery 对话框更像 OO，如 Delphi 和 WinForms 中那样？

Answer 1

也许以下内容可以帮助您:

• no dialog-specific state (i.e. set of variables)

您可以使用data()将状态与增强元素关联起来，就像与任何元素一样:

$("#yourDialog").dialog({
    // your options...
}).data("yourData", {
    some: "state",
    associatedWith: "thisElement"
});

<小时/>

• no dialog-local event handlers

您所说的“dialog-local”的含义尚不清楚，但对话框小部件确实会发出事件，您当然可以将不同的处理程序绑定(bind)到不同对话框小部件的内部元素上触发的事件。

<小时/>

• dialog-specific functions are global

它们实际上并不是全局的(它们是 $.fn 命名空间的一部分)，但我知道必须每次都在增强元素上调用 dialog()时间可以被视为不必要的沉重。

然而，该语法只是一个桥梁，一种访问更适合 jQuery 习惯用法的小部件方法的方法。您可以再次使用 data() 获取对小部件本身的引用，然后直接调用其方法。例如:

$("#yourDialog").dialog("open");
$("#yourDialog").dialog("close");

相当于:

var dialogWidget = $("#yourDialog").data("dialog");
dialogWidget.open();
dialogWidget.close();

更新:从 jQuery UI 1.9 开始，the data() key becomes the widget's fully qualified name, with dots replaced by dashes 。因此，上面的代码就变成了:

var dialogWidget = $("#yourDialog").data("ui-dialog");
dialogWidget.open();
dialogWidget.close();

1.9 中仍然支持使用非限定名称，但已弃用，并且在 1.10 中将不再支持。