香草替代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对象与一个元素相关联,这样我就可以在它之外的函数中访问它的方法原始范围.

Answer 1

我已经编写了一个围绕WeakMap和Map的包装器,它应该可以完成这项工作.关于WeakMap的好处是,一旦元素被删除,该值就会变为GarbageCollected.这应该避免内存泄漏.

/** 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()快得多,但仍比将信息作为元素的属性存储慢一点.

Answer 2

你可以在任何 DOM 元素上存储任何东西：

// store data:
document.body.data = {a:1, b:2};

// retrieve data:
console.log(document.body.data);

我在data这里使用这个词作为自定义 DOM 属性，但它可以是任何尚未使用的词。

jQuery 不会在元素本身上存储东西，因为它会导致内存泄漏，但是由于您需要它来执行非常特定的任务，那么这将起作用。在尝试之前，请确保您知道内存泄漏的工作原理。

其他答案提到了dataHTML 属性。这与 jQuery 无关data。绝对没有，它还要求您解析和字符串化您的数据（如果它已经不是字符串）。

Answer 3

对于 jquery 的 $.data()，使用 .dataset

<div class='info' data-some-data='12' />

// jQuery
var info = $('.info').data('some-data'); // 12

// vanilla
const info = document.querySelector('.info').dataset.someData; // 12

来源：

https://www.jamesbaum.co.uk/blether/vanilla-js-equivalent-jquery-find-parent-data-remove-class-empty-append/#data

Answer 4

使用 setAttribute 方法：

document.getElementById('item1').setAttribute('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'");

但您确实应该使用数据，后跟破折号及其属性，例如：

<li ... data-icon="base.gif" ...>

要在 JS 中使用 dataset 属性来完成此操作：

document.getElementById('item1').dataset.icon = "base.gif";