jQuery .data() 是如何工作的？

Posted 2023-02-19

【中文标题】jQuery .data() 是如何工作的？

【英文标题】：How does jQuery .data() work?

【发布时间】：2011-02-15 09:59:25

【问题描述】：

我想在我的应用程序中使用.data()。 examples 很有帮助，但我不明白这些值的存储位置。

我使用 Firebug 检查网页，一旦 .data() 将对象保存到 dom 元素，我看不到 Firebug（html 或 Dom 选项卡）中的任何变化。 p>

我尝试查看 jQuery 源代码，但它对我的 javascript 知识来说非常先进，我迷失了自己。

所以问题是：

jQuery.data() 存储的值实际到哪里去了？我可以使用工具检查/定位/列出/调试它们吗？

【问题讨论】：

您应该使用 firequery：firequery.binaryage.com。 data() 使用您的数据扩展 jquery DOM...您应该能够看到它们触发 firequery

你看过缩小的源吗？如果您这样做了，请不要感到难过，因为除了浏览器之外，几乎所有人都完全无法理解它。即使是未压缩的源代码也非常先进，而且通常很难看透。 :D

我做了一个实现的例子：检查一下，很简单：jsfiddle.net/andrevlima/zb8oo0p0/24 storeData(element, data) //-> 注册新数据 storeData(element) //-> 获取注册数据

【参考方案1】：

看看source 吧。

乍一看，它似乎将数据存储在第 2 行创建的 cache 变量中。

编辑：

这是一个在缓存中查找数据的快速演示：http://jsfiddle.net/CnET9/

您也可以将$.cache 转储到您的控制台并手动浏览它。

【讨论】：

不，缓存变量只是一些 jQuery 内部的东西。数据实际上附加到一个 DOM 元素。顺便说一句：他不是指出 jQ 源代码没有帮助吗？那为什么要把他指向那里呢？

@Techpriester - 你错了，它是存储在缓存变量中，使用代表你的DOM元素的键，它不存储在 DOM 元素本身上。

因为我假设他直接查看 jQuery 源代码，而不是 GitHub 上组织良好的源代码。

你可以使用 $.cache[domElement[$.expando]] 快速找到它：jsfiddle.net/N8e4W

$.cache 似乎从 jQuery 2.0 开始就消失了。

【参考方案2】：

您似乎已经找到了答案，但这里有一点关于如何做的。 在使用它之前，您应该了解一些规则。

添加

使用从 $('.selector').data() 返回的对象添加变量是有效的，因为数据对象通过引用传递，所以无论您添加属性，它都会被添加。如果您在另一个元素上调用 data()，它会被更改。就是这样……

var oData = $('#id').data();
oData.num = 0;
oData.num == $('#id').data().num; // true

添加对象会将对象置于数据对象内部，并“扩展先前与该元素一起存储的数据”。 - http://api.jquery.com/data/#entry-longdesc

也就是说给dataObj添加一个obj就变成了

oData.obj = ;    
oData ===  /*previous data*/, obj :   

添加数组并不会扩展之前存储的数据，但也不会像简单值那样表现...

使用

如果您存储了简单的值，您可以将它们放入变量中，并在不更改数据对象的情况下对它们做您想做的事情。

然而

如果您使用对象或数组在元素上存储数据，请注意！

仅仅因为您将其存储到变量中并不意味着您没有更改数据值。 仅仅因为你将它传递给一个函数并不意味着你没有改变数据值！

它就是它本来的样子..除非它很简单..那么它只是一个副本。 :p

var data             = $("#id").data();  // Get a reference to the data object 
data.r_redirect      = "index.php";      // Add a string value
data.num             = 0;                // Add a integer value
data.arr             = [0,1,2];          // Add an array
data.obj             =  a : "b" ;      // Add an object

                                         // but here is where the fun starts! 

var r_redirectString = data.r_redirect;  // returns "index.php", as expected.. cool
r_redirectString     = "changed"         // change the value and the compare :
data.r_redirect      == r_redirectString // returns false, the values are different

var oArr             = data.arr;         // Now lets copy this array
oArr.push(3);                            // and modify it.
data.arr            == oArr              // should be false? Nope. returns true.
                                         // arrays are passed by reference.
                                         // but..

var oObj             = data.obj          // what about objects?       
oObj["key"]          = "value";          // modify the variable and
data.obj["key"]     == oObj["key"]       // it returns true, too!

所以，资源..

What's the best way to store multiple values for jQuery's $.data()? https://***.com/a/5759883/1257652

【参考方案3】：

您可以通过不带参数调用.data() 来检查它，如下所示：

$("div").data("thing", "value");​​​​​​
console.log($("div").data());
//or...
console.log($.data($("div").get(0)));

至于“位置”，它存储在一个全局 jQuery 缓存对象中，位于一个代表您的元素的键下。调用 .data() 确实会返回 jQuery.data(yourDomElement)，或者如果您从中调用特定值，则添加一个键。