jQuery源码分析之数据储存

jQuery源码分析之数据存储

一.引子

? ? 大家想想，在未使用jQuery或者其他js框架前，只用原生js的时候，怎么存储数据的呢？在刚结束js的时候，我是将每个跟节点有关的属性都使用setAttribute(name,value)保存在节点上。下次取就可以直接getAttribute(name)，一个节点使用这种方式保存很多数据，效率肯定不高的。在有时候要对节点保存大量的数据的时候，还有没更好的办法来存储数据呢？下面来看看jQuery是如何做的。

?

二.原理

? ? jQuery数据的存储原理是：

1）定义了一个对象$.cache 保存所有数据

2）对每一个存储数据的DOM节点都对应一个数字index，这个DOM节点下的所有值都存储在$.cache(index)对象中(这么看是不是觉得$.cache是一个数组？ 其实js中数组和对象很像，数组也是对象，对象就是一组属性的集合)。

3）对每一个存储数据的DOM节点都生成一个唯一的index。这个index值保存在节点的expando属性中。

4）expando是什么？就是每一个jQuery框架加载的时候内部生成的一个随机序列。这个序列一个jQuery加载完只有唯一一个。

?

让图片来更清楚的描述：

调用$(“#test”).data(“name”)时会先找到对象属性jQuery17102199497243038011($.expando)的值(当前为1)，这个值就1就是上面说的index。对象所有存储的值都是放在$.cache[“1”]对象中。下面代码可验证：$("#test").data("abc", "def");var cacheIndex = document.getElementById("test")[$.expando]; ?//获取index//$.expando在1.2版本里访问不到,不能var obj = $.cache[cacheIndex];alert(obj["abc"]); ?//def 注：这是jQuery1.6 前取值方式//注： 在jquery1.7版本中对存储值有所改变。需要obj[“data”]["abc"]才能取到。也就是说$(“#test”).data(“abc”,”def”)不是存在上述obj对象中，而是存在obj[“data”]对象中(多了一层data对象，变得更深了)。
三.源码下面来看代码是如何做到的：

?
?
本章结束，有不对和不准确的地方望大家指正。有疑问欢迎留言。
?
 

 

查看更多 下一篇