编辑以澄清

Question

我正在开发一个JavaScript library，我需要在DOM元素上设置各种属性。

例如，DOM元素可能具有名为＆＃39; states＆＃39;的属性（普通对象）。设置就可以了：

_('input').get('states')

/*        OUTPUT

    {
        hidden: true,
        anotherState: false,
        andAnotherOne: true,
    }

*/

在IE＆lt; 9中，输出将看起来像这样（我理解的只是原生的遗留IE行为）：

<input type="text" value="some value" states="[object Object]">

有时也会使用相同的方法在DOM元素上设置其他属性，并且可能会出现在DOM元素上设置了冲突的属性和属性的问题（在这种情况下，IE＆lt; 9可能会占用）

任何避免这种情况的方法，或者这只是你必须忍受的事情？

举一个vanilla JavaScript的例子，假设你这样做：

document.getElementById('foo').bar = 'foobar';

在任何小于9的IE版本中，DOM中的输出将如下所示：

<div id="foo" bar="foobar"></div>

在绝大多数其他浏览器中，这不会发生。

现在，如果你这样做：

document.getElementById('foo').bar = {
    a: 'b',
    c: 'd'
}

在任何小于9的IE版本中，您都会得到：

<div id="foo" bar="[object Object]"></div>

再一次，这在大多数其他浏览器中都不会发生。

Answer 1

只是想一想你的技术。您实际上是通过为数据附加属性来尝试修改本机对象。这不是一个好主意。它实际上是原型库对元素所做的，并且导致许多不良问题，以及它最终消失的原因。

更好的方法是创建一个包装元素的对象，这是jQuery所做的。现在说你正在尝试将数据绑定到元素，可能是为了持久化。你可能想重新考虑一下。例如，可能使用数据属性或仅将数据保存在localStorage中。我想你会发现你有更好的维护解决方案，但也会更高效。

将此视为尝试并做了我认为你想做的事情的人。