为DOM节点提供Javascript功能

我正在开发一个单页应用程序，相当多的DOM节点构造函数返回对它们创建的对象的引用。这里有一个例子来说明我的意思：

if (!document.getElementById('playlistHeader')) {
        appView.buildKit.playlist.headerWrap();
    }

    // construct element
    var secondaryBtnsWrap = document.createElement("div");
    secondaryBtnsWrap.id = "playlistSecondaryBtnWrap";
    secondaryBtnsWrap.className = "clearright right";

    // attach it
    document.getElementById('playlistHeader').appendChild(secondaryBtnsWrap);

    // return reference to dom node
    return secondaryBtnsWrap;

我认为在视图之间切换时销毁和重新创建节点是多余的，因此我开始致力于能够擦除某些节点（站点的子部分）的内容，方法是为它们提供一个处理擦除的自定义函数

// build wipe function
    secondaryBtnsWrap.wipe = function(){

        // do custom wiping here
    }

其思想是“重置”UI的部分，并重建视图之间的差异。例如，如果有一个按钮，我们需要不管，擦拭功能不会删除它。这样就省去了创建相同元素的额外工作

在某些情况下，获取对节点的引用并触发附加的自定义函数要容易得多，但我想知道这到底是一个好主意还是一个好主意（但不是）

---

TL；DR版本

---

给DOM节点提供Javascript函数是个好主意吗

DOM节点是一级对象。为它们指定您自己的属性没有错。只是不要试图覆盖任何内置程序（可能除了事件处理程序，但您应该真正使用

attachEvent

/

addEventListener

）。在我看来，这是javascript在用户界面开发方面最方便的特性之一

您还可以使用生成自己的DOM节点的标准对象构建页面。您可以附加事件侦听器，这些侦听器调用所述对象上的函数进行交互。使用闭包引用所有者对象。例如：

function Foo() {
    this.element = undefined;
    this.createTextbox();
}

Foo.prototype.createTextbox = function() {
    var $self = this;
    this.element = document.createElement('input');
    this.element.type = 'text';
    this.element.addEventListener('change', function() { 
        $self.onChange.apply($self, arguments); 
    });
}

Foo.prototype.onChange = function() {
    console.log(this.element.value);
}

Foo.prototype.Render = function(target) {
    target = target || document.body;
    target.appendChild(this.element);
}

var foo = new Foo();
foo.Render();

---

这两种方法都同样有效，但我想说，当设计或功能需要显著修改时（而不是在两个位置更改ID、类和布局，您只需在其中一个位置更改它们），后者可能更方便。

非常简洁明了+1对于这样一个优秀的答案和干净的代码。优质材料：）