2

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

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

我的代码的主要问题是：

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

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

4

2 回答 2

0

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

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

您可以使用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 开始，键data()成为小部件的完全限定名称，点被替换为破折号。因此，上面的代码变为：

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

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

于 2012-08-01T12:28:33.423 回答
0

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

查看这篇文章，看看这个人是如何使用它的： Backbone.js and JQueryUI Dialog - events not binding

引用他们的介绍：

在处理涉及大量 JavaScript 的 Web 应用程序时，您要学习的第一件事就是停止将数据绑定到 DOM。创建 JavaScript 应用程序太容易了，这些应用程序最终会变成一堆错综复杂的 jQuery 选择器和回调，它们都在疯狂地尝试保持 HTML UI、JavaScript 逻辑和服务器上的数据库之间的数据同步。对于富客户端应用程序，更结构化的方法通常很有帮助。

于 2012-08-01T12:34:17.517 回答