OOP JavaScript - 创建自定义 Div 对象答案

【问题标题】：OOP JavaScript - Create Custom Div ObjectOOP JavaScript - 创建自定义 Div 对象
【发布时间】：2012-07-03 04:42:02
【问题描述】：

我刚刚开始使用 JavaScript 中的 OOP。我想创建一个自定义“面板”。这是我目前所拥有的：

function ShinyPanel(css, attributes)
{
    this.container = $(document.createElement("div")).addClass("shinyPanel");

    this.titleBar = $(document.createElement("div")).addClass("shinyPanelTitleBar").appendTo(this.container);
    this.topShine = $(document.createElement("div")).addClass("shinyPanelTopShine").appendTo(this.container);
    this.leftShine = $(document.createElement("div")).addClass("shinyPanelLeftShine").appendTo(this.container);
    this.content = $(document.createElement("div")).addClass("shinyPanelContent").appendTo(this.container);

    if (!css) css = {};
    if (!attributes) attributes = {};

    this.css = css;
    $(this.container).css(this.css);

    this.title = attributes["title"];
    $(this.titleBar).html(this.title);
}

现在我可以实例化这个对象并通过以下方式将其附加到正文中：

var panel = new ShinyPanel({position:"absolute", top:"25%", width:"300px", height:"200px"}, {title:"Test"});
$("body").append(panel.container);

我的问题是，有没有办法让对象本身成为一个 div，从而消除对“容器”div 的需要？然后我就可以打电话给$("body").append(panel);。

容器 div 放在那里对我来说并不是什么麻烦，更适合我……想学习正确的做事方式。

我尝试了this = document.createElement("div");，但出现错误：invalid assignment left-hand side。

【问题讨论】：

return this.container; 不起作用吗？ :)
当时我没有想到这一点，但是在@PaulPhillips 在他的回答中提出建议之后，我正在尝试它，并且由于某种原因，将元素附加到 panel.content 不起作用。不过，我仍然在弄乱它，看看我能不能弄明白。
我建议您检查一下 jQuery UI 是如何工作的，因为我认为这大致就是您想要做的。
@Jack：我想我会使用 jQuery UI。感谢您的建议。如果您想发布答案，我会接受。

标签： javascript jquery oop custom-component

【解决方案1】：

我建议使用ShinyPanel 方法来处理此问题。告诉，不要问。

function ShinyPanel(css, attributes) {
...
   this.appendTo = function (to) {
      $(to).append(this.container);
   }

【讨论】：

这将是比我目前拥有的更好的解决方案，但我在原始问题中忘记提及的另一个问题是在其上设置属性也需要我在容器上设置它们：$(panel.container).attr("id", "myPanel"); .有什么更好的建议吗？
您可以添加一个 attr 函数，将所有调用重定向到容器。
是的，但也不仅仅是attr。我可能想打电话给$(panel).css(...) 和一大堆其他可用功能...我不想覆盖所有这些功能。
+1 感谢您的建议，但看起来 jQuery UI 对我来说可能是一个更好的解决方案。

【解决方案2】：

你可以直接从你的构造函数返回this.container，假设你不打算使用你添加到它的任何其他属性。

要做到这一点，我认为您必须将其更改为工厂方法，而不是构造函数（即不再使用 new - 尽管它还有更多那个）。

【讨论】：

我现在正在尝试这个，但是遇到了我添加到 content div 的任何内容都没有显示的问题。也许我需要进行更多研究并使用不同的方法来创建自定义对象。
如果您使用除container 之外的任何东西，我的建议将不起作用。既然你正在尝试做 OOP，老实说，我想我给你的答案很糟糕。 Explosion Pills 的答案是一个更好的主意，并且可能有一些插件方式可以自动覆盖所有 jquery 函数。虽然我不知道它是什么。

【解决方案3】：

如果您只想将它附加到正文，而不是返回一个对象，您可以在面板中返回一个字符串。

类似这样的：

function shinyPanel(css, attributes) {
    ... all the stuff you did before
    return this.container
}

此外，如果你想在你的 shinyPanel 函数中实现一些速度，你可以尝试添加你的标记字符串，然后只使用一次 append。

还可以查看使用数组作为返回字符串的持有者，然后在返回时使用.join('')。

【讨论】：

我不希望它返回一个字符串。我希望面板的属性可以轻松修改，即使在创建对象之后也是如此。例如，我希望能够做到这一点：var panel = new ShinyPanel(); panel.title = "Test"; 我知道它现在不会完全那样工作......这是我要开始工作的事情清单上的下一个。

【解决方案4】：

您所描述的基本上是 UI 框架能够完成的工作。

查看小部件工厂文档以开始使用：

http://wiki.jqueryui.com/w/page/12138135/Widget%20factory

【讨论】：