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

时间:2011-07-05 05:01:15

标签: javascript oop dom class-design dhtml

我对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对象和样式)以及传统变量和方法的类的最佳方法是什么?有没有办法将Prototype用于这些HTML对象?你甚至可以想象在这个例子中还有一个WindowManager类,它包含实例化的Window对象,帮助管理它们,并创建新的对象。它也可能有HTML表示。

上面的一些可以用静态CSS处理并应用ID /类来清理一些代码,但是我们只能说定位和大小必须以编程方式完成(以处理调整大小,拖放等)

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

2 个答案:

答案 0 :(得分:2)

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

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

您还可以考虑创建一个简单的原型链,用于将公共属性放在基类“类”中(理解javascript没有真正的类),再次参考underscore.js作为执行此操作的extend函数的示例,其他可以用Google搜索的实现。

最后,重要的是您的代码易于使用和理解,并且表现相当不错。您还可以返回并改进不能很好地工作的部件,或者将代码重新组织成模块。

答案 1 :(得分:0)

Backbone.js非常适合您的要求:

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

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