我通常避免在我的脚本中包含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.这应该避免内存泄漏.
关于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()快得多,但仍比将信息存储为元素的属性慢一点.