1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

jQuery教程:data()方法避免内存泄露问题

作者:用户 来源:互联网 时间:2016-06-25 12:49:49

数据对象方法datavalueclib内存泄露valuesjquery内存泄露parent避免内存泄露jQuery.data详解

jQuery教程:data()方法避免内存泄露问题 - 摘要: 本文讲的是jQuery教程:data()方法避免内存泄露问题, 在jQuery的官方文档中,提示用户这是一个低级的方法,应该用.data()方法来代替。$.data( element, key, value )可以对D

jQuery的官方文档中,提示用户这是一个低级的方法,应该用.data()方法来代替。$.data( element, key, value )可以对DOM元素附加任何类型的数据,但应避免循环引用而导致的内存泄漏问题,原文如下:

The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. We can set several distinct values for a single element and retrieve them later:

但对于该方法,存在的问题也不仅于此。在JQUERY FORUM中 ,对该问题作了深入的讨论,robert.katic 提出了一条解决方案。$.data()方法应用到宿主对象上,运行会得到优化,但在本地对像上使用该方法,结果未必尽如人意。一个元素在正常情况下可以使用.remove()方法将其删除,并清除各自的数据。但对于本地对象而言,这是不能彻底删除的,这些相关的数据一直持续到窗口对象关闭。同样,这些问题也存在于event 对象中,因为事件处理器(handlers)也是用该方法来存储的。

那么,要解决该问题最简单的方法是将数据存储到本地对象新增的一个属性之中。即:

// ...
if ( elem.nodeType ) { 
        cache[ id ] = dataObject; 
        elem[ expando ] = id;
} else { 
        elem[ expando ] = dataObject;
}
// ...

但是,一旦涉及到继承问题,该方法就无能为力。试看:

var parent = {};
var childA = Object.create( parent );
var childB = Object.create( parent ); 
 
$.data( parent, "foo", "parent value" ); 
 
// This may even be intentional
$.data( childA, "foo" ) 
// => "parent value"
$.data( childB, "foo" ) 
// => "parent value" 
 
// This may NOT be intentional
$.data( childA, "foo", "childA value" );
$.data( parent, "foo" ) 
// => "childA value"
$.data( childB, "foo" ) 
// => "childA value"

开始时,存储数据的对象不存在,因此创建一个对象来存储新的值,如图

jQuery<a href=教程:data()方法避免内存泄露问题-">

现在,我们尝试去修改对象childA同样的数据。

jQuery教程:data()方法避免内存泄露问题-

对象childA并不存在该数据,因此它沿着原型链向上查找,父对象刚好拥有该数据,其值立即被改写。所以,从parent和childB这两个对象获取“foo”的值,得到的将是“childA value”,而不是“parent value”。



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索数据 , 对象 , 方法 , data , value , clib内存泄露values , jquery内存泄露 , parent , 避免内存泄露 jQuery.data详解 ,以便于您获取更多的相关知识。

详解jQuery中的empty、remove和detach_jquery

 通过一张对比表来解释几个方法之间的不同 三者都有把元素移除的作用,但细微的差别,造就了它们的使命不同。 最权威的解释当然是jQuery_API咯,下面是API中关于他三儿的部分截取。 一、empty: This method removes not only child (and ...

4类JavaScript内存泄露及如何避免

原文:4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them 译文来自:Alon's Blog 本文将探索常见的客户端 JavaScript 内存泄露,以及如何使用 Chrome 开发工具发现问题。 简介 内存泄露是每个开发者最终都要面对的问题,它是许多问题...

平时开发搜集的一些网址

 平时开发程序时在网上搜索到的一些相关的文章,博客,类库,软件等等的一个收藏贴。 涉猎面会很广,各种各样,只要觉得好的、有用的就收藏到这里。不定时更新。 ----------------------------------------------------   *2014-03-04* 做...

jQuery源码学习(三)

功能检测(support) jQuery解决了不同浏览器之间的兼容性问题,首先通过support检测出都存在哪些兼容性问题。 数据缓存data() 数据缓存,避免大数据量的元素挂载、预防内存泄露 attr()、prop()和data() attr() 相应的dom方法 //attr就是...

jQuery内存泄露怎么办?jQuery内存泄露的解决教程

本文大家分享了jQuery内存泄露解决办法,供大家参考,具体内容如下 思路:为JQuery扩展删除jquery元素对象的方法,大大减轻内存泄露的压力 ;(function($){ if(!$.lui.widget) $.lui.widget = {}; //$.lui.n...

前三篇
后三篇