0

我正在开发一个单页应用程序，并且相当多的 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 函数是个好主意吗？

4

1 回答 1

2

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、类和布局，您只需在一个地方更改它们）。

于 2013-02-02T04:47:14.600 回答