javascript - jQuery $.data() 与 DOM 对象属性

Question

我最近需要将一些数据附加到动态创建的 LI 元素。在我的第一个实例中，我以类似的方式使用了 .data()

var _newli = $('<li>foobar</li>');
_newli.data('base', 'ball');
// append _newli to an `ul`

那..非常慢。这个逻辑发生在一个循环中，这个循环很容易增长到 500 多个项目，它花了很长时间!有时它甚至打破了 javascript 执行时间框架。

所以我改成了$.data()。不知何故，将数据附加到一个对象比通过 .data() 方法调用快 8x。所以现在看起来像

var _newli = $('<li>foobar</li>');
$.data(_newli[0], 'base', 'ball');
// append _newli to an `ul`

那确实更快，但仍然需要 3-4 秒(!)来构建我的所有元素(在我的实际代码中，每个元素调用 $.data 大约 6 次)。

所以我真的被那个问题困住了，我问自己为什么要使用 .data() 或 $.data() 呢？我可以将我的数据附加到 DOM 对象。所以我做了

var _newli = $('<li>foobar</li>');
_newli[0].base = 'ball';
// append _newli to an `ul`

瞧，哇 令我震惊的是，速度快得令人难以置信!我简直不敢相信这运行得如此之好而没有任何缺点。这就是我的问题所在。到目前为止，我在网上还没有发现这种技术有任何缺点。有关于您可以使用这种方式创建的循环引用的读物，但 AFAIK“仅”在 IE 上并且仅当您引用对象时。

有什么想法专家吗？

更新

感谢大家的好评和发帖。简短更新@patrick dw:

你是对的，我在使用 $.data() 时传递了底层 DOM 元素。它甚至不能与 jQuery 对象一起使用，至少不像预期的那样。 关于使用一个对象并通过 $.date() 传递它的想法我自己有，但我再次对性能差异感到震惊我决定忽略 .data() 像永远一样的方法。

Answer 1

关于循环引用，你是正确的，这不是 IE 之外的问题，在 IE 中，只有当 JavaScript 引用 DOM 对象时，它才会成为问题，而 JS 对象是分配给 DOM 对象的属性之一。我相信这可以通过简单地通过取消 JS 中对 DOM 对象的任何引用来解决。

$().data() 方法是一个过于复杂的 $.data() 包装器(参见 jQuery.fn.data: http://github.com/jquery/jquery/blob/master/src/data.js#L126 ，它又会调用 jQuery.data: http://github.com/jquery/jquery/blob/master/src/data.js#L20 )，所以去掉这个中间人将节省大量时间，特别是如果要完成 500 次。

在这种情况下，$().data('foo', 'bar') 方法并不比 el.foo = 'bar'。做最快的事。