JQuery Dialog的內(nèi)存泄露問(wèn)題解決方法
2024-09-06 12:45:46
供稿：網(wǎng)友
對(duì)于頁(yè)面來(lái)說(shuō)，JQuery中的Dialog從效果上來(lái)說(shuō)還可以，而且使用簡(jiǎn)單，只要短短幾行綁定的代碼就可以實(shí)現(xiàn)彈出效果。
代碼
代碼如下:
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
在一些JS交互性不多的一般頁(yè)面來(lái)說(shuō)，沒(méi)有任何問(wèn)題！但是對(duì)于交互性強(qiáng)的，需要?jiǎng)討B(tài)加載與釋放DOM的頁(yè)面來(lái)說(shuō)，它就是一個(gè)悲劇的東西！為什么這樣說(shuō)？大家看下下面的例子：
一段簡(jiǎn)單的代碼，一個(gè)DIV是通過(guò)動(dòng)態(tài)加載到頁(yè)面上，然后對(duì)該DIV用Dialog進(jìn)行綁定，以達(dá)到彈出的目的！下面的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;
}
接著，我需要?jiǎng)h除該DOM元素，一般來(lái)說(shuō)，正常的做法都是$("#test").empty();這行簡(jiǎn)單的代碼就完成了！這樣有效嗎？！當(dāng)執(zhí)行完這樣代碼后，你再用$('#dialog')來(lái)獲取dialog元素，郁悶的事情發(fā)生了，既然獲取到了！為什么！不是已經(jīng)empty了嗎！
下面我們來(lái)看下這一悲劇是如何造成的，
我們把注意點(diǎn)放到$('#dialog').dialog上面，然后看看JQuery的實(shí)現(xiàn)代碼是如何寫(xiě)的，當(dāng)我們跟蹤代碼到dialog類(lèi)中的_create方法的時(shí)候，問(wèn)題的原因找到了，看下面這段代碼：
代碼如下:
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);
}),
它既然也動(dòng)態(tài)創(chuàng)建一個(gè)div，而且把該div加到了Body上面，然后把dialog中的元素從<div id=test>中移除，加入到該新的div中.....
這就是為什么我們$("#test").empty()后，卻對(duì)內(nèi)部的dialog沒(méi)有起作用了！而且這有一個(gè)最不好的一個(gè)地方，也是最容易出現(xiàn)內(nèi)存泄露的地方：它動(dòng)態(tài)的在Body中創(chuàng)建了一個(gè)div，這樣如果窗體不關(guān)閉的話，而你又在不察覺(jué)的情況下不斷的使用上面的TestAppend方法來(lái)動(dòng)態(tài)加載DOM，就會(huì)創(chuàng)建N個(gè)這樣的div！
