OOP JavaScript - Create Custom Div Object

问题

I'm just starting out with OOP in JavaScript. I want to create a custom "panel." Here is what I have so far:

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);
}

Now I can instantiate this object and append it to the body via something like this:

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

My question is, is there a way for me to make the object itself a div, thus eliminating the need for a "container" div? Then I could just call $("body").append(panel);.

It's not that its much trouble for me to have the container div there, it's more just for me...wanting to learn the right way to do things.

I tried this = document.createElement("div");, but I got an error: invalid assignment left-hand side.

回答1:

What you're describing is basically what the UI framework is able to accomplish.

Check out the widget factory documentation to get started:

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

回答2:

I would suggest having a ShinyPanel method that handles this. Tell, don't ask.

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

回答3:

You could return this.container directly from your constructor function, assuming you're not going to use any of the other properties you added to it.

To do this, I think you would have to change it to be a factory method, rather than a constructor (i.e. don't use new anymore - although there is more to it than that).

回答4:

When all you want to do is append it to body, instead of returning an object, you could just return a string with your panel.

Something like this:

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

Furthermore, if you want to achieve some speed in that shinyPanel function of yours, you could try to add strings of your markup and then only use append once.

Also have a look into using an array as a holder for your return string and then use .join('') when you return it.

More info: http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

来源：https://stackoverflow.com/questions/11299238/oop-javascript-create-custom-div-object

标签

javascript

jquery

oop

custom-component