JQuery Dialog的內存泄露問題解決方法
2024-09-06 12:45:46
供稿：網友
對于頁面來說，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元素就是<div id="test"></div>。
代碼
代碼如下:
function TestAppend() {
$("#test").append('<div id="dialog"><div id="fileQueue"></div> <input type="file" name="uploadify" id="uploadify" />' +
'<a href="javascript:upload();">上傳</a>' +
'<a href="javascript:$(#uploadify).uploadifyClearQueue()">取消上傳</a><div>');
$('#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方法的時候，問題的原因找到了，看下面這段代碼：
代碼如下:
uiDialog = (self.uiDialog = $('<div></div>'))
.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 id=test>中移除，加入到該新的div中.....
這就是為什么我們$("#test").empty()后，卻對內部的dialog沒有起作用了！而且這有一個最不好的一個地方，也是最容易出現內存泄露的地方：它動態的在Body中創建了一個div，這樣如果窗體不關閉的話，而你又在不察覺的情況下不斷的使用上面的TestAppend方法來動態加載DOM，就會創建N個這樣的div！
