【问题标题】:Where is jQuery.data() stored?jQuery.data() 存储在哪里?
【发布时间】:2011-08-14 20:36:00
【问题描述】:

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

有没有像jQuery.dataDb 之类的变量,甚至是私有变量?

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

【问题讨论】:

标签: javascript jquery jquery-data


【解决方案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) 处理所有边缘情况。
猜你喜欢
  • 2023-04-03
  • 2018-04-29
  • 2010-11-02
  • 2016-10-22
  • 2021-07-30
  • 2012-05-23
  • 2011-06-26
  • 2013-02-06
  • 1970-01-01
相关资源
最近更新 更多