jQuery $.data() 函数的香草替代品：任何本机 javascript 替代品？

Question

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

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

有谁知道本地替代品？

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

这篇文章 ( http://tutorialzine.com/2010/11/jquery-data-method/ ) 涉及到这种用法，但作为一个例子，我目前正在使用它来将 GSAP 时间轴动画与一个对象相关联，这样我就可以在创建的函数之外访问和调用 GSAP Timeline 的 .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 对象与元素相关联，这样我就可以在其外部的函数中访问它的方法原范围。

原文由 AJeezy9 发布，翻译遵循 CC BY-SA 4.0 许可协议

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() 快得多，但仍然比将信息作为属性存储在元素上慢一点。

原文由 htho 发布，翻译遵循 CC BY-SA 4.0 许可协议