OOP JavaScript – 创建自定义Div对象

我刚刚开始使用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 。

您所描述的基本上是UI框架能够实现的目标。

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

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

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

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

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

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

当你想要做的就是将它附加到body，而不是返回一个对象时，你可以只返回一个带有面板的字符串。

像这样的东西： 

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

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

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

更多信息： http ： //www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

Interesting Posts