jQuery源码分析----数据缓存系统

最新推荐文章于 2022-10-08 11:49:45 发布

我就是陈星烨

最新推荐文章于 2022-10-08 11:49:45 发布

阅读量251

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/u012657197/article/details/74704453

jQuery 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在使用jQuery时如何利用其内置的数据缓存系统来高效地管理DOM节点上的自定义数据，避免了直接操作DOM带来的性能问题，并探讨了$.data与$(ele).data()两种方法的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为DOM节点添加太多的自定义属性的危害：

循环引用时的内存泄漏
直接暴露数据不安全
多自定义属性对浏览器来说无意义
取数据的时候要对HTML节点进行操作

jQuery缓存系统解决了这个问题。（从事件系统分化出来的）

静态方法: $.data(ele)
实例方法：$(ele).data()

$(ele).data()是对$.data(ele)的扩展，

$.data(ele)可为DOM元素或者js对象添加数据

$(ele).data()是为DOM节点添加数据,会覆盖key相同的值，

jQuery缓存系统核心

数据放在内存中，通过映射关系与绑定的DOM关联。

1.实例方法：

$(ele).data()

数据存储在jQuery.cache中，为DOM元素分配属性expando,值唯一，和缓存对象 jQuery.cache关联起来,则cache[id]就会读到所有的这个节点的缓存，

cache结构如下：

var cache={
    "id1":{
        'name1':'value1',
        'name2':'value2',
    },
    "id2":{
        'name1':'value1',
        'name2':'value2',
    },
}

每个id对应一组缓存数据。所以属性名相同时会覆盖、

2.静态方法：

jQuery.data(ele,[key],[value]);

每个ele都有自己的{key,value}对象，新建的对象即使key相同也不会覆盖

var body1 = $("body")
var body2 = $("body")

$.data(body1, "bar", '一');
$.data(body2, "bar", '二');

show(  $.data(body1, "bar") )
show(  $.data(body2, "bar") )