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

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"

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

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

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

时间: 2024-09-11 20:20:49

jQuery教程:data()方法避免内存泄露问题的相关文章

jquery ajax-重复调用jQuery ajax刷新Chart数据内存泄露问题,急~~~

问题描述 重复调用jQuery ajax刷新Chart数据内存泄露问题,急~~~ 在网页中使用标签定义了图表,在js用setInterval定时使用ajax获取数据后刷新图表数据.发现浏览器内存一直在涨,浏览器使用的是FireFox. js代码如下: function FlowPageReday(){ var RefreshTimeOut = 10*1000; RefreshFlow(); /*每隔一定的时间刷新页面*/ setInterval("RefreshFlow()", Ref

HTML5的自定义 data-* 属性和jquery的data()方法的使用

人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你 这样做也会导致html语法上不符合Html规范,以及一些其它副作用.这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多 有用的事情. 你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布

jQuery中data()方法用法实例_jquery

本文实例讲述了jQuery中data()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以向匹配元素附加数据,或者从匹配元素获取数据. 语法结构一: 复制代码 代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-

对 jQuery 中 data 方法的误解分析_jquery

今天 谢亮 兄弟和我讨论一个东西的时候,谈到了性能,他用的是 attr 操作自定义属性 data-uid,我说用 data 好,因为是 dataset 实现,然后他去翻了下 jQuery 源码和我说,没有发现这个东西,我就纳闷了.于是我去仔细读了下 data 方法的源码,才发现我一直误会了,再此,向之前问我 data 方法的群友道歉,我 "骗" 了你们,你们来打我吧. 今天我就重新解释下 data 方法,先看下 jQuery 1.11.0 的手册里肿么说的吧,请移步至http://sh

html5的自定义data-*属性和jquery的data()方法的使用示例_jquery

人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用.这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情. 你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和

jquery用data方法获取某个元素上的事件_jquery

jquery的给元素绑定的事件可以用data方法取出来 通过$(element).data("events")来获取 // 比如给一个button绑定两个click事件 $("button").click(function() { alert("1") }); $("button").click(function() { alert("2") }); // 这个时候点击该button会分别弹出 2 和1的a

IE下使用jQuery重置iframe地址时内存泄露问题解决办法_jquery

页面中有个iframe: 复制代码 代码如下:  <iframe src='a.html'></iframe> <button>测试IFRAME泄露</button> 其中a.html内容如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</

jQuery中使用data()方法读取HTML5自定义属性data-*实例

 如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险 主要的方法如下: 代码如下: .data( key, value ) .data( obj ) .data( key ) .data() 从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中. 例如HTML: 复制代码 代码如下:<div data-role

老生常谈JQuery data方法的使用_jquery

(-1)说明 我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage方法如下 showMessage.i = 0; function showMessage(object) { var body = $("body")[0]; var $p =$("#debugp"); if($p.length==0) { $p = $("&