jQuery的$.data() vs. DOM对象属性

4 浏览
0 Comments

jQuery的$.data() vs. DOM对象属性

最近，我需要将一些数据附加到动态创建的LI元素上。起初，我使用了.data()，代码如下：\n

var _newli = $('
  • foobar
    • ');
_newli.data('base', 'ball');
// 将_newli追加到一个`ul`元素中

    \n但是...这个方法非常慢。这个逻辑在一个循环中发生，循环次数可能达到500个以上，简直太慢了！有时甚至会超过JavaScript的执行时间限制。\n所以我改用了$.data()。以某种方式，使用这个方法将数据附加到对象上要比使用.data()方法快8倍。现在我的代码如下：\n

    var _newli = $('
  • foobar
    • ');
$.data(_newli[0], 'base', 'ball');
// 将_newli追加到一个`ul`元素中

    \n这确实快了很多，但是仍然需要3-4秒才能构建所有的元素（在我的真实代码中，每个元素有大约6个$.data调用）。\n所以我真的被困住了，我问自己到底为什么要使用.data()或$.data()？我只需将我的数据附加到DOM对象上。于是我这样做了：\n

    var _newli = $('
  • foobar
    • ');
_newli[0].base = 'ball';
// 将_newli追加到一个`ul`元素中

    \n哇，太神奇了，这速度真快！我简直不敢相信这个方法这么好而没有任何缺点。所以这就是我的问题所在。到目前为止，在网络上我没有找到任何关于这种技术的缺点。有关这种方式可能会创建循环引用的问题，但据我所知，这只会在IE上出现，而且只有在引用对象时才会出现。\n有什么想法吗，专家们？\n更新\n谢谢大家的好评论和帖子。对于帕特里克·德沃（patrick dw）的简短更新：\n你说得对，当使用$.data()时，我传递的是底层的DOM元素。它甚至不能与jQuery对象一起使用，至少不符合预期。\n我自己也考虑过使用一个对象并通过$.data()传递它的思路，但是考虑到性能差异，我决定永远忽略.data()方法。

    0

    3 答案

    0 Comments

    问题的出现原因是在开发一个网页应用程序时，使用自定义属性来存储数据时遇到了问题。尽管大多数现代浏览器对于自定义属性并不会出现问题，但在开发MobileSafari的网页应用程序时，却遇到了问题。

    解决方法是使用jQuery的$.data()方法来代替自定义属性。这样可以确保数据与DOM元素分离，避免了在DOM元素上添加属性的问题。使用$.data()方法可以将数据附加到DOM元素上，而不会干扰DOM元素的结构和功能。

    通过使用$.data()方法，可以将数据存储在DOM元素的内部，而不会在DOM元素上添加任何自定义属性。这样可以确保数据的安全性和一致性，并且不会对DOM元素的渲染和交互产生任何影响。

    ，使用自定义属性来存储数据可能会导致一些问题，特别是在某些特定的浏览器或应用程序中。为了避免这些问题，可以使用jQuery的$.data()方法来代替自定义属性，以确保数据与DOM元素分离，并避免干扰DOM元素的结构和功能。

    参考链接：

    - [Can I just make up attributes on my HTML tags?](https://stackoverflow.com/questions/427262/)

    - [Add custom attribute to HTML tags](https://stackoverflow.com/questions/2824726)

    - [使用自定义DTD](http://htmlhelp.com/tools/validator/customdtd.html)

    0
    0 Comments

    在使用NodeList对象时，尝试添加自定义属性时，浏览器（IE）可能会禁止。 这个问题的出现是因为浏览器对于NodeList对象的属性进行了限制，不允许添加自定义属性。

    解决方法是使用jQuery的$.data()方法来代替直接在DOM对象上添加属性。$.data()方法是jQuery提供的一个用于存储数据的方法，可以将数据附加到指定的DOM元素上，而不会直接修改DOM对象本身。

    使用$.data()方法的示例代码如下：

    var nodeList = document.querySelectorAll('.my-elements');
$(nodeList).each(function() {
  $(this).data('customProperty', 'customValue');
});

    上述代码首先使用document.querySelectorAll()方法获取一个包含指定类名的DOM元素的NodeList对象，然后使用jQuery的each()方法遍历NodeList对象中的每个DOM元素。在遍历过程中，使用$.data()方法将自定义属性'customProperty'和对应的值'customValue'附加到每个DOM元素上。

    这样，就可以通过使用$.data()方法来实现在NodeList对象上添加自定义属性，而不会受到浏览器的限制。

    0
    0 Comments

    问题的原因是，在IE中，当JavaScript引用了一个DOM对象并且一个JS对象被赋值给DOM对象的属性时，会出现循环引用的问题。解决方法是简单地将JS对DOM对象的引用设置为null。

    在解决这个问题时，使用$().data()方法相对于DOM对象的属性更为复杂（参见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'更多的功能。选择最快的方法即可。

    0