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对我来说并不是很麻烦,它更适合我……想要学习正确的做事方式.

我试过这个= document.createElement(“div”);,但是我收到了一个错误：左侧无效的赋值.

解决方法:

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

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

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

标签：custom-component,javascript,jquery,oop
来源： https://codeday.me/bug/20190902/1787653.html