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

我通常避免在我的脚本中包含jQuery库,但是我最近才遇到jQuery $.data()的函数关联数据的功能,以键值对,对象和放大器的形式.甚至功能,任何元素.

根据我的阅读,jQuery的$.data()函数还内置了安全措施,可以防止与此类实践相关的内存泄漏,但是为单个函数包含整个JQ库是过分的.

有没有人知道原生替代品？

编辑
为了让自己更清楚,我不是在寻找原生函数来检索元素属性. 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对象与一个元素相关联,这样我就可以在它之外的函数中访问它的方法原始范围.

解决方法

我已经编写了一个围绕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(key)) {
            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.get(element).has(key);
    },remove: function (element,key) {
        var ret = this._storage.get(element).delete(key);
        if (!this._storage.get(key).size === 0) {
            this._storage.delete(element);
        }
        return ret;
    }
}

像这样用它：

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

这比$.data()快得多,但仍比将信息存储为元素的属性慢一点.

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

解决方法

猜你在找的jQuery相关文章