Каковы передовые методы разработки классов JavaScript, представляющих объекты пользовательского интерфейса в DOM?

Я очень хорошо знаком с JavaScript и ООП, но очень не знаком с проектированием классов JS, которые используются для программирования пользовательского интерфейса (HTML). Я немного искал, но не нашел никаких распространенных шаблонов.

Допустим, я хотел динамически создавать объекты, похожие на панели (аналогичные панелям Microsoft Windows). Каждому объекту нужен контейнер, область заголовка, которая может включать текстовую метку, и кнопку закрытия с обработчиком события щелчка. В дополнение к представлению DOM (HTML) объект также будет иметь представление объекта JavaScript (переменные и методы). Вот один из способов, который я пробовал:

//
// Window class
//
var Window = function(params) {
    this.testMethod = function() {
        console.log('test');  // just an example
    }

    this.windowDiv = document.createElement('div');
    this.windowDiv.style.width = params.width + 'px';
    this.windowDiv.style.height = params.height + 'px';
    this.windowDiv.style.position = 'absolute';
    this.windowDiv.style.top = '30px';
    this.windowDiv.style.left = '30px';
    this.windowDiv.style.border = '1px solid #000';

    this.headerDiv = document.createElement('div');
    this.headerDiv.style.width = '100%';
    this.headerDiv.style.height = '30px';
    this.headerDiv.style.background = '#bbb';
    this.headerDiv.style.borderBottom = '1px solid #000';
    this.headerDiv.innerHTML = params.title;

    this.buttonDiv = document.createElement('div');
    this.buttonDiv.style.width = '30px';
    this.buttonDiv.style.height = '18px';
    this.buttonDiv.style.position = 'absolute';
    this.buttonDiv.style.top = '0px';
    this.buttonDiv.style.right = '5px';
    this.buttonDiv.style.textAlign = 'center';
    this.buttonDiv.style.background = 'red';
    this.buttonDiv.style.border = '0px 1px 1px 1px solid #000';
    this.buttonDiv.innerHTML = 'x';
    this.buttonDiv.addEventListener('click', function(e) {
        document.body.removeChild(e.target.parentNode.parentNode);
    }, false);

    this.headerDiv.appendChild(this.buttonDiv);
    this.windowDiv.appendChild(this.headerDiv);
    document.body.appendChild(this.windowDiv);
}

// Initialize
var myWindow = new Window({
    width: 400,
    height: 200,
    title: 'My Window'
});
myWindow.testMethod();

Это не кажется «правильным». Другой подход может заключаться в том, чтобы иметь метод render () и использовать его для выделения кода генерации HTML. Кажется странным, что объект JS содержит внутри несколько вложенных объектов HTML. Должен ли я просто передавать вложенные теги через innerHTML?

Мне любопытно ... какой здесь подход лучше всего? Как лучше всего создавать классы с кодом DOM (объекты и стили HTML) и традиционными переменными и методами? Есть ли способ использовать прототипы для этих HTML-объектов? В этом примере вы даже можете представить себе, что существует класс WindowManager, который содержит экземпляры объектов Window, помогает управлять ими и создает новые. И он тоже может иметь представление HTML.

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

Меня не интересуют решения уровня фреймворка, которые могут быть предоставлены с помощью ExtJS, jQuery и т. д. Я хочу знать, каковы лучшие практики для собственного кода. На самом деле, мне было бы интересно узнать, как инженеры указанных фреймворков проектируют свои классы пользовательского интерфейса.