jQuery.data() 存储在哪里？

Posted 2023-05-08

【中文标题】jQuery.data() 存储在哪里？

【英文标题】：Where is jQuery.data() stored?

【发布时间】：2011-08-14 20:36:00

【问题描述】：

jQuery 将其设置为 DOM 对象的 data() 的值存储在哪里？

有没有像jQuery.dataDb 之类的变量，甚至是私有变量？

有什么方法可以访问这个对象吗？

【问题讨论】：

***.com/questions/2764619/how-does-jquery-data-work的可能重复

【参考方案1】：

在内部，jQuery 创建了一个名为$.cache 的空对象，用于存储您通过 data 方法设置的值。您向其中添加数据的每个 DOM 元素都分配有一个唯一 ID，该 ID 用作 $.cache 对象中的键。

【讨论】：

+1 但是，很高兴看到这个扩展：1）唯一 ID 存储在哪里？ 2）如何清除缓存？如果不使用 jQuery 删除带有附加数据的元素，是否存在“内存泄漏”？

你可以通过查看源代码来了解如何删除数据。乍一看，它看起来不应该有任何内存泄漏。来源：github.com/jquery/jquery/blob/master/src/data.js#L114

唯一键本身存储为哈希表的一部分。哈希表是$.cache 变量。 $.cache 将（键、值）数据对存储在一起。它们不在一个单独的结构中。

@KushalP：唯一密钥存储在哪里？实际元素在 Chrome 和 FF 中看起来是一样的

该元素在浏览器之间不应有所不同，因为它是特定于 jQuery 的。在上面的链接（相关）问题中，有一个很好的演示如何获取（键，值）对。链接：jsfiddle.net/CnET9

【参考方案2】：

jQuery 以 3 种不同的方式为 3 种不同类型的对象获取或设置数据。

对于 DOM 元素，jQuery 首先获取一个唯一的 id，然后为元素创建一个名为 expando 的自定义属性：

var counter = 0;
function uid() 
    // only example
    return 'jQuery' + counter;

function getExpando(element) 
    var expando = element['jQueryExpando'];
    // for those without expando, create one
    if (!expando) 
        expando = element['jQueryExpando'] = uid();
    
    return expando;

另一方面，jQuery 有一个 $.cache 对象，它存储每个元素的数据映射，jQuery 通过 expando 搜索 $.cache 并获取某个元素的数据映射，获取或设置该映射中的数据：

function data(element, name, value) 
    var expando = getExpando(element);
    var map = $.cache[expando];

    // get data
    if (value === undefined) 
        return map && map[name];
    
    // set data
    else 
        // for those without any data, create a pure map
        if (!map) 
            map = $.cache[expando] = ;
        
        map[name] = value;
        return value;
    

对于自定义对象（不是 DOM 元素或窗口对象），jQuery 直接通过名称从该对象中设置或获取属性：

function data(obj, name, value) 
    if (!obj) 
        return obj;
    
    // get data
    if (value === undefined) 
        return obj[name];
    
    // set data
    else 
        obj[name] = value;
        return value;
    

最后，对于特殊的window对象，jQuery在闭包中有一个特殊的windowData变量来存储window的数据：

function data(obj, name, value) 
    if ($.isWindow(obj)) 
        obj = windowData;
    
    // same as data for custom object

【讨论】：

更多信息： 1. jQuery 可以从 html5 data-* 属性中获取数据，但永远不会将数据设置回属性。 2. jQuery在设置数据到对象时触发了一个datachange事件，但是已经跑题了。

【参考方案3】：

好的，我想通了。

jQuery.expando 包含一个附加到每个元素 jQuery + new Date() 的字符串

HTMLElement[jQuery.expando] 包含该元素的data 的键

jQuery.cache[HTMLElement[$.expando]] 包含元素上的data

Here is a demo

【讨论】：

如果数据设置在命名空间下，这将不起作用，例如“foo.bar”。检索数据时使用jQuery.data(HTMLElement) 处理所有边缘情况。