jQuery .data()如何工作？

Question

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

我使用Firebug检查网页,只要.data()将对象保存到dom元素,我就看不到Firebug中的任何更改(HTML或Dom选项卡).

我试着看看jQuery源码,但它对我的Javascript知识来说非常先进,我迷失了自己.

所以问题是:

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

Answer 1

看看它的来源.

从快速的一瞥看,它看起来像是将数据存储cache在第2行创建的变量中.

编辑:

这是一个快速演示,可以在缓存中找到数据:http://jsfiddle.net/CnET9/

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

Answer 2

你似乎已经得到了答案,但这里有一点如何.在使用之前,您应该注意一些规则.

ADDING

使用从$('.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!

所以,资源..

为jQuery的$ .data()存储多个值的最佳方法是什么？ /sf/answers/403191841/