ООП JavaScript - Создать пользовательский объект Div

Я только начинаю с ООП в JavaScript. Я хочу создать собственную "панель". Вот что у меня так далеко:

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

Дело не в том, что для меня есть большая проблема с тем, чтобы там находился контейнер, а для меня больше... в том, чтобы научиться правильно делать вещи.

Я старался this = document.createElement("div");, но я получил ошибку: invalid assignment left-hand side,

Источник

4 ответа

Решение

То, что вы описываете, в основном то, что в состоянии сделать пользовательский интерфейс.

Проверьте документацию фабрики виджета, чтобы начать:

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

Источник

Я бы предложил иметь ShinyPanel метод, который обрабатывает это. Скажи, не спрашивай.

function ShinyPanel(css, attributes) {
...
   this.appendTo = function (to) {
      $(to).append(this.container);
   }
Источник

Когда все, что вы хотите сделать, это добавить его к телу, вместо того, чтобы возвращать объект, вы можете просто вернуть строку с вашей панелью.

Что-то вроде этого:

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

Источник

Вы могли бы вернуться this.container непосредственно из вашей функции конструктора, предполагая, что вы не собираетесь использовать какие-либо другие свойства, которые вы добавили к ней.

Чтобы сделать это, я думаю, вы должны изменить его, чтобы он был фабричным методом, а не конструктором (т.е. не используйте new больше - хотя это еще не все).

Источник
Другие вопросы по тегам