jQuerys $ .data()与DOM对象属性

Question

我最近需要附加一些动态创建的数据LI elements.在我的第一个例子中,我使用.data()的方式类似

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

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

所以我改为$.data().不知何故,将数据附加到对象上比使用方法调用快8倍.data().所以现在看起来像

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

这确实是更快的,但是仍需要3-4秒(!)来构建我的所有元素(在我的实际代码中,每个元素有6个调用$ .data).

所以我真的很困惑,我问自己为什么要使用.data()或者$.data()无论如何？我可以将我的数据附加到DOM object.所以我做了

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

瞧,哇让我震惊,那是快得令人难以置信!我无法相信这种情况如此好,没有任何不利之处.所以这实际上是我的问题.到目前为止,我在网上找不到这种技术的任何缺点.有关于您可以使用这种方式创建的循环引用的读取,但AFAIK"仅"在IE上,并且仅在您参考时objects.

有想法的专家吗？

更新

感谢您的好评和帖子.简短更新@patrick dw:

你是对的,我DOM element在使用时通过了底层$.data().它甚至不能与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'. 做最快的事。