如何避免JQuery Dialog的内存泄露

•21世纪人才网、浦东人才网、嘉定人才网、南汇人才网、松江人才网、北风首页 • 青浦人才网登陆 RSS 收藏
杨浦人才网、金山人才网、奉贤人才网、崇明人才网、闵行人才网

您现在所在的位置：北风技术专栏 > 其他 > 如何避免JQuery Dialog的内存泄露

如何避免JQuery Dialog的内存泄露

作者：北风发布于：2010年06月18日 23:54

对于页面来说，JQuery中的Dialog从效果上来说还可以，而且使用简单，只要短短几行绑定的代码就可以实现弹出效果。

代码
$(’#dialog’).dialog({
autoOpen: false,
width: 600,
buttons: {
“Ok”: function() {
$(this).dialog(”close”);
},
“Cancel”: function() {
$(this).dialog(”close”);
}
}
});
在一些JS交互性不多的一般页面来说，没有任何问题！但是对于交互性强的，需要动态加载与释放DOM的页面来说，它就是一个悲剧的东西！为什么这样说？大家看下下面的例子：

　　一段简单的代码，一个DIV是通过动态加载到页面上，然后对该DIV用Dialog进行绑定，以达到弹出的目的！下面的test元素就是

。

代码
function TestAppend() {

$(”#test”).append(’

‘ +
‘上传‘ +
‘取消上传

‘);

$(’#dialog’).dialog({
autoOpen: false,
width: 600,
buttons: {
“Ok”: function() {
$(this).dialog(”close”);
},
“Cancel”: function() {
$(this).dialog(”close”);
}
}
});

return false;
}
　　接着，我需要删除该DOM元素，一般来说，正常的做法都是$(”#test”).empty();这行简单的代码就完成了！这样有效吗？！当执行完这样代码后，你再用$(’#dialog’)来获取dialog元素，郁闷的事情发生了，既然获取到了！为什么！不是已经empty了吗！

　　下面我们来看下这一悲剧是如何造成的，

　　我们把注意点放到$(’#dialog’).dialog上面，然后看看JQuery的实现代码是如何写的，当我们跟踪代码到dialog类中的_create方法的时候，问题的原因找到了，看下面这段代码：

_create
uiDialog = (self.uiDialog = $(’

‘))
.appendTo(document.body)
.hide()
.addClass(uiDialogClasses + options.dialogClass)
.css({
zIndex: options.zIndex
})
// setting tabIndex makes the div focusable
// setting outline to 0 prevents a border on focus in Mozilla
.attr(’tabIndex’, -1).css(’outline’, 0).keydown(function(event) {
if (options.closeOnEscape && event.keyCode &&
event.keyCode === $.ui.keyCode.ESCAPE) {

self.close(event);
event.preventDefault();
}
})
.attr({
role: ‘dialog’,
‘aria-labelledby’: titleId
})
.mousedown(function(event) {
self.moveToTop(false, event);
}),

　　它既然也动态创建一个div，而且把该div加到了Body上面，然后把dialog中的元素从

中移除，加入到该新的div中…..

　　这就是为什么我们$(”#test”).empty()后，却对内部的dialog没有起作用了！而且这有一个最不好的一个地方，也是最容易出现内存泄露的地方：它动态的在Body中创建了一个div，这样如果窗体不关闭的话，而你又在不察觉的情况下不断的使用上面的TestAppend方法来动态加载DOM，就会创建N个这样的div！

　　其实这个问题郁闷的地方不是在如何解决，而且隐藏的很深，很难发现！那么发现之后解决起来就变的简单多了：

if ($(’#dialog’)[0]) {
$(’#dialog’).parent().empty();
$(’#dialog’).parent().remove();
}

当前加上这段后代码后，再做$(”#dialog”)来测试下，期望的结果终于出现了！dialog元素消失了！

作者：北风
来源：北风技术专栏
原文链接：http://column.ibeifeng.com/ibeifeng/20100618385.shtml

( 内容完 )

添加收藏到：

您可能还对这些文章感兴趣：

不好驯服的析构函数

asp中对ip进行过滤限制函数

Web服务请求异步化测试

蹊跷的ThreadDeath，令人郁闷的glassfish

类(class) PK 结构(struct)

你走你的阳光道，我走我的独木桥:整合ant ivy 和testng

没有评论, 我来评论

小贴士：评论需要管理员审核后才会显示。请不要发布与国家法律相抵触的言论，北风网将保留追究责任的权利。
类似“顶”、“沙发”、“支持”之类没有营养的文字，对勤劳贡献的作者来说是令人沮丧的反馈信息。
请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
如果您发现自己的评论没有被审核或者不见了，请参考以上三条。