javascript - jQuery $.data() 函数的 Vanilla 替代品 : any native javascript alternative?

Question

我通常避免在我的脚本中包含 jQuery 库，但是我最近才发现 jQuery $.data() 的函数能够关联数据，以键值对、对象甚至函数的形式，与任何元素。

据我所知，jQuery 的 $.data() 函数还内置了保护措施，可以防止与此类做法相关的内存泄漏，但是为该单个函数包含整个 JQ 库就有点过分了。

有人知道原生替代品吗？

编辑 为了让自己更清楚，我不是在寻找检索元素属性的 native 函数。 jQuery 的 $.data() API 远远超出了这种用途，扩展到将 javascript 对象和函数与 jQuery 元素节点相关联的能力。

本文 ( http://tutorialzine.com/2010/11/jquery-data-method/ ) 涉及这种用法，但作为示例，我目前正在使用它来将 GSAP 时间轴动画与对象相关联，以便我可以在外部访问和调用 GSAP 时间轴的 .reverse() 动画函数它所创建的功能。例如:

function doAnimation(){
    var element = document.createElement('div'),
        timeline = new TimelineMax({....GSAP related fns...}),
        options = {
            ....
            timeline: timeline
        };
   $(element).data('options', options);
}


function reverseAnimation($element){
    var options = $element.data('options'),
        previouslyCreatedTimeline = options.timeline;

    previouslyCreatedTimeline.reverse();
}

如果您不是 GSAP 的用户，这可能不是最清楚的示例，但本质上，$.data() 方法允许我将 javascript 对象与元素相关联，以便我可以在函数中访问它的方法超出其原始范围。

Answer 1

我已经围绕 WeakMap 和 Map 编写了一个包装器，它应该可以完成这项工作。 WeakMap 的好处在于，一旦元素被删除，该值就会被垃圾回收。这应该可以避免内存泄漏。

/** A storage solution aimed at replacing jQuerys data function.
 * Implementation Note: Elements are stored in a (WeakMap)[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap].
 * This makes sure the data is garbage collected when the node is removed.
 */
window.dataStorage = {
    _storage: new WeakMap(),
    put: function (element, key, obj) {
        if (!this._storage.has(element)) {
            this._storage.set(element, new Map());
        }
        this._storage.get(element).set(key, obj);
    },
    get: function (element, key) {
        return this._storage.get(element).get(key);
    },
    has: function (element, key) {
        return this._storage.has(element) && this._storage.get(element).has(key);
    },
    remove: function (element, key) {
        var ret = this._storage.get(element).delete(key);
        if (!this._storage.get(element).size === 0) {
            this._storage.delete(element);
        }
        return ret;
    }
}

像这样使用它:

var myElement = document.getElementById("myId");
dataStorage.put(myElement, "myKey", "myValue");

这比 $.data() 快得多，但仍然比将信息作为属性存储在元素上慢一点。