jquery中的data()的方法的使用及实现原理

来源：互联网 2023-03-16 23:54:13 409

工具/原料

电脑
sublime

方法/步骤

jquery.data()的实现方式：

作用：给普通对象或DOM元素附加（及获取）数据;

实现方式分析:

1.用name 和value 为对象附加数据；即传入3个参数，

第一个参数为需要附加数据的对象；

第二个参数为数据的名称；

第三个参数为数据的值；（只是获取值得话，也可以不传入第三个参数）；

2.用另一个对象为对象附加数据；即传入两个参数，

第一个参数为需要附加的数据对象，我们称之为obj，

第二个参数也是一个对象，我们称之为 another ,another中包含的键值对将会被复制到 obj 的数据缓存（'cache'）中。

3.为DOM元素附加数据；DOM元素也是一种object，但是IE6/7对直接附加在DOM上的对象的垃圾回收存在问题，因此我们将这些数据存放在全局缓存中（称之为'globalCache'），即全局缓存中包含了多个DOM元素的缓存，并在DOM上添加一个属性，存放 cache对应的uid。

具体看例子:

1.用name 和 value 为对象附加数据

使用jquery.data()为普通对象附加数据时，其本质是将一个 cache 附加到了对象上，并使用了一个特殊的属性名称。

存放数据的 cache 也是一个object 我们为obj 附加的数据实际上成为了 cache 的属性, 而 cache 又是obj的一个属性,在jquery1.6中,这个属性的名称，是“jquery16”加上一个随机数（如下面提到的"jquery16018518865841457738"）.

例子测试jquery.data(）的功能；

jquery中的data()的方法的使用及实现原理

输出的结果：

jquery中的data()的方法的使用及实现原理

在这段代码中;我蒙首先是在 obj 上附加了一个属性，名称为name 值为zhongyunhong,然后通过$.data(obj,'name');方法来获取附加的数据。为深入了解其中的实现机制，上面还用了个for循环来I获取obj的属性，实际上是取出了在obj上附加的cache对象，意思就是每个obj都有一个cache的对象属性，即obj.cache.;也就是obj的缓存对象,这个缓存对想是随机的表达出来。

所以在obj上附加的属性，其实是在obj的cache的对象之上附上的属性，即obj.cache.name;

以下代码是实现类似的功能:

jquery中的data()的方法的使用及实现原理

以上；

function中的第一行代码定义了，expando 即jquery1.6加上一个随机数，并将其中非数字的部分去掉，这种格式将在jquery中的其他地方用到，这是一个特殊的名称，并且可以用于标识不同的页面，比如不同的iframe中的expando 就会有不同，

接下来定义了获取数据的函数getData（）；即从cache中获取一个属性，实际上也就是返回cache[name];

然后是setData()函数；用于设置cache的属性，实际上也就是设置cache[name]的值；

之后是getCache();获取obj上的 cache 即obj[expando],如果obj[expando] 为空，则初始化；

最后公开了data的方法。先根据传入的 obj，获取附加在 obj上的cache，当传入两个参数时，调用getData()方法，当传入三个参数时，则调用setData（）的方法；

用另一个对象为对象附加数据：

除了以提供name 和value 的方式进行赋值，我们还可以直接传入另一个对象（another）作为参数，这种情况下，another 的属性名称和属性值将被视为多个键值对，从中提取的name 和value 都会被复制到目标对象的缓存中。

jquery中的data()的方法的使用及实现原理

4该信息未经许可获取自百度经验

上面的测试代码中，我们先将一个带有两个键值对的 “another” 对象传入，然后分别用 $.data(obj, 'name1') 和 $.data(obj, 'name2') 获取附加的数据；同样，为了深入了解其中的机制，我们通过遍历 “obj” 的方式取出了隐藏的 “cache” 对象，并获得了 “cache” 对象的 “name1” 属性和 “name2” 属性的值。

可以看到，jQuery.data() 实际上为 “obj” 附加了名为 “obj.jQuery1600233050178663064” 的对象，也就是 “cache” 上。用 jquery.data() 方式传入的键值对都被复制到了 “cache” 中。下面的代码实现类似的功能:

jquery中的data()的方法的使用及实现原理

这段代码是在之前的代码的基础上进行修改的。首先增加了内部函数 setDataWithObject() ，这个函数的实现是遍历 “another” 的属性，并复制到 “cache” 中。然后，在对外开放的 data 函数中，先判断传入的第二个参数的名称，如果这个参数是一个 Object 类型的实例，则调用 setDataWithObject() 方法。

为DOM Element 附加数据：

由于DOM Element 也是一种Object ,因此之前的方式也可以为DOM Element赋值,但考虑到 IE6/7中垃圾回收的问题(不能有效回收DOMElement 上附加的对象引用),jquery采用了与普通对象有所不同的方式附加数据.

测试代码如下:

jquery中的data()的方法的使用及实现原理

输出结果:

===>

测试代码中，首先通过 document.getElementById 方法获取了一个 DOM Element （当然，也可以用 jQuery 的选择器），然后在这个 DOM Element 上附加了一个属性，随后就从 DOM Element 上取出了附加的属性并输出。因为考虑到 IE6、IE7 对 DOM Element 上的对象引用的垃圾回收存在问题，我们不会直接在 DOM Element 上附加对象；而是使用全局cache，并在 DOM Element 上附加一个 uid。

代码的实现的方式:

jquery中的data()的方法的使用及实现原理

这段代码与之前的代码相比，增加了 globalCache 和 uuid，并修改了 getCache() 方法。 globalCache 对象用于存放附加到 DOM Element 上的 “cache”，可以视为 “cache” 的“容器”。uuid 表示 “cache” 对应的唯一标识，是唯一且自增长的。uuid 或被存放在 DOM Element 的 “expando” 属性中。 getCache() 函数中增加了一个判断，即 “obj” 具有 “nodeType” 属性，就认为这是一个 DOM Element；这种情况下，就先取出附加在 “obj” 上的 id ，即 obj[expando] ；如果 obj[expando] 未定义，则先用 uuid 对其进行初始化；取出 id 之后，就到 globalCache 中找到对应的 “cache” ，即 globalCache[id], 并返回。到此为止，jQuery.data() 函数的实现就介绍完了；但是，这里还有一个需要思考的问题：为什不都统一用 “globalCache” 存储，而要将 “cache” 直接附加到普通对象上？我认为这应该是一种性能优化的方式，毕竟少一个引用的层次，存取速度应该会略快一些。 jQuery 中这刻意优化的地方非常多，在许多原本可以统一处理的对方都进行了特殊处理。

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： JQUERY 编程语言

上一篇：jquery 的$().each与$.each的区别下一篇：写网页查看英雄联盟所有英雄的背景故事

jquery中的data()的方法的使用及实现原理

工具/原料

方法/步骤

热门文章

标签列表