设计在DOM中表示UI对象的JavaScript类的最佳实践是什么

我非常熟悉JavaScript和OOP，但不熟悉设计用于编程UI(HTML(的JS类。我四处搜索了一下，但没有发现任何流行的模式。

比方说，我想动态创建类似面板的对象(类似于MicrosoftWindows面板(。每个对象都需要一个容器、一个可以包括文本标签的标题区域和一个具有单击事件处理程序的关闭按钮。除了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和应用ID/类来清理一些代码来处理，但我们只能说定位和大小必须通过编程来完成(以处理大小调整、拖放等(

我对ExtJS、jQuery等可以提供的框架级解决方案不感兴趣。我想知道国产代码的最佳实践是什么。事实上，我很想知道上述框架的工程师是如何设计UI类的。