jQuerys $ .data（）与DOM对象属性 [英] jQuerys $.data() vs. DOM Object property

问题描述

我最近需要附加一些数据来动态创建 LI元素。在我的第一个例子中，我使用 .data（），像

  var _newli = $（'< li> foobar< / li>'）; 
 _newli.data（'base'，'ball'）; 
 //将_newli附加到一个`ul` 
  

慢。这个逻辑发生在一个循环，可以容易地长达500多个项目，它花了几年！有时甚至打破了JavaScript执行时间框架。

所以我更改为 $。data（）。以某种方式，将数据附加到一个对象就像在 .data（）方法调用中更像是 8x 。所以现在看起来像

  var _newli = $（'< li> foobar< / li>'）; 
 $ .data（_newli [0]，'base'，'ball'）; 
 //将_newli附加到一个`ul` 
  

这是/的确更快，但是仍然需要3-4秒（！）来建立我的所有元素（在我的实际代码中，每个元素都有6个调用$ .data）。

所以我真的坚持了，我问自己为什么要使用 .data（）或 $。data（）反正我可以将我的数据附加到 DOM对象。所以我做了

  var _newli = $（'< li> foobar< / li>'）; 
 _newli [0] .base ='ball'; 
 //将_newli附加到一个`ul` 
  

Voila， wow <强烈的我的震惊，那是非常快的！我不敢相信这样跑得很好，没有任何劣势。所以这是我的问题。到目前为止，我没有发现任何这种技术的缺点。有关循环引用的读取，您可以使用这种方式创建，但仅适用于IE的AFAIK仅参考对象。 p>

任何想法专家？

更新

感谢您的好评论和贴子的家伙。简短的更新@patrick dw：

你是对的，当使用<$ c时，我正在传递底层 DOM元素 $ C> $。数据（）。它甚至不能用于jQuery对象，至少不如预期的那样。
关于使用一个对象并将其传递通过 $。date（）的想法我有自己，但再次感到震惊，我决定只是忽略 .data（）方法，如永远。

解决方案

你对于循环引用是正确的，这不是IE以外的问题，而在IE中，JavaScript只能引用DOM对象，并将JS对象分配给DOM对象的属性。我相信这可以通过将JS中的任何引用取消到DOM对象来解决。

$（）。data（） code>方法是一个过于复杂的包装器 $。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' 。做最快的。

I recently needed to append some data to dynamically created LI elements. In my first instance, I used .data() in a way like

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

that.. was terribly slow. This logic happens in a loop which can easily grow up to 500+ items, it took ages! Sometimes it even broke the javascript execution time frame.

So I changed to $.data(). Somehow, attaching data to an object with that is like 8x faster than doing it over the .data() method call. So now it looked like

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

That was/is indeed faster, but still it took like 3-4 seconds(!) to build up all my elements (In my real code there are like 6 calls to $.data per element).

So I was really stuck with that, I asked myself why the heck to use .data() or $.data() anyway? I could just attach my data to the DOM object. So I did

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

Voila, wow to my shock, that was incredibly fast! I couldn't believe that this ran so good without any disadvantage. So that is what is my question all about actually. I didn't find any disadvantage for this technique so far on the net. There are reads about circular references you can create using this way, but AFAIK "only" on IE's and only if you refer to objects.

Any thoughts experts ?

update

Thanks for the good comments and postings guys. Short update @patrick dw:

You are right, I was passing the underlaying DOM element when using $.data(). It does not even work with jQuery objects, at least not as expected. The idea about using one object and pass it through $.date() I had myself, but then again I was so shocked about the performance difference I decided just to ignore the .data() method like forever.

解决方案

You are correct about circular references, that isn't an issue outside of IE, and in IE it only becomes an issue when JavaScript has a reference to a DOM object, and a JS object is assigned to one of the DOM object's properties. I believe this can be resolved by simply by nullifying any references in JS to the DOM object.

The $().data() method is an overly complicated wrapper for $.data() (see jQuery.fn.data: http://github.com/jquery/jquery/blob/master/src/data.js#L126, which in turn calls jQuery.data: http://github.com/jquery/jquery/blob/master/src/data.js#L20), so cutting out that middle man will save a non trivial amount of time, especially if it's to be done 500 times.

In this case, the $().data('foo', 'bar') method doesn't do much more than el.foo = 'bar'. Do what's fastest.

这篇关于jQuerys $ .data（）与DOM对象属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！