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

【问题标题】：What are best practices for designing JavaScript classes that represent UI objects in the DOM?设计表示 DOM 中 UI 对象的 JavaScript 类的最佳实践是什么？
【发布时间】：2011-07-05 05:01:14
【问题描述】：

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

假设我想动态创建类似面板的对象（类似于 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 和应用 ID/类来清理一些代码，但我们只是说定位和大小必须以编程方式完成（处理调整大小、拖放等） .

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

【问题讨论】：

jQuery 和 jQueryUI 是开源的。你总是可以看看；）github.com/bmsterling/jquery-ui
John Resig (jQuery) 提供了我认为我见过的最全面的设计讨论。你需要从那里开始。

标签： javascript oop dom class-design dhtml

【解决方案1】：

对于对象的 HTML 部分，您可以使用模板来定义组件的 HTML 结构，在组件初始化时插入所需的任何数据。模板功能的实现方式有很多种，可以看underscore.js的例子。

对于样式，我会将默认值放在样式表中。以后是否需要通过 javascript 修改它们并不重要，即使它们是在 css 中定义的，它仍然可以工作。组件中应该包含的唯一信息是该组件触发的各种事件的默认行为。

您还可以考虑创建一个简单的原型链，用于将公共属性放入基“类”（了解 javascript 没有真正的类），再次参考 underscore.js 以获取执行此操作的扩展函数示例，其中其他可以用谷歌搜索的实现。

最后，重要的是您的代码易于使用和理解，并且性能相当好。您还可以返回并改进效果不佳的部分，或者将代码重新组织成模块。

【讨论】：

谢谢杰森。我已经看了一下这个，它非常有帮助。这个周末我会再摆弄一下，看看它到底能做什么：) 这也让我看到了 John Resig 对微模板的讨论，这也很有启发性。

【解决方案2】：

Backbone.js 非常适合您提出的要求：

http://documentcloud.github.com/backbone/

我将 html 存储在模板中，并将它们加载到控制器管理的可视元素（为每个实例动态创建的 div）。这为我提供了特定于每个实例的 UI 的可重用 html 元素和方法和属性用户界面。

【讨论】：