Question

我正在研究单页面应用程序，并且相当多的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 VERSION

为DOM节点提供Javascript函数是一个好主意吗？

Answer 1

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，类和布局，你只需要改变）我会说后者可能更方便他们在一个）。

给DOM节点Javascript功能

1 个答案: