Question

我正在开发一个包含许多jQuery dialogs的网页。

虽然我的代码原则上工作，但我注意到它很快变得“脏”，我觉得强烈要求清理代码并使其更像OO。

我的代码的主要问题是：

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

有哪些方法和解决方案可以使jQuery对话更像OO，就像Delphi和WinForms一样？

Answer 1

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

没有特定于对话框的状态（即变量集）

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

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

没有对话框本地事件处理程序

dialog-local的含义不明确，但是对话框小部件确实会发出事件，您当然可以将不同的处理程序绑定到在不同对话框小部件的内部元素上触发的事件。

特定于对话框的功能是全局的

它们实际上并不是全局的（它们是$.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中删除。

Answer 2

我对此没有多少经验，但据我所知，像backbone.js这样的JS框架可以帮助你解决这个问题。

查看此帖子，看看这家伙是如何使用它的： Backbone.js and JQueryUI Dialog - events not binding

引用他们的介绍：

在处理涉及大量JavaScript的Web应用程序时，您学习的第一件事就是停止将数据绑定到DOM。创建最终成为混乱的jQuery选择器和回调的JavaScript应用程序非常容易，所有这些都疯狂地尝试在HTML UI，JavaScript逻辑和服务器上的数据库之间保持数据同步。对于富客户端应用程序，更有条理的方法通常很有帮助。

将OO添加到jQuery.dialog（）

2 个答案: