JQuery 대화 상자 메모리 누수 문제-JS 튜토리얼-php.cn

페이지의 경우 JQuery의 Dialog는 효과면에서 나쁘지 않으며 사용이 간단합니다. 몇 줄의 바인딩 코드만으로 팝업 효과를 얻을 수 있습니다.
코드

코드 복사 코드는 다음과 같습니다.

 
$('#dialog ').Dialog({ 
autoOpen: false, 
너비: 600, 
버튼: { 
"Ok": function() { 
$(this).dialog("close" ); 
}, 
"취소": function() { 
$(this).dialog("close") 
} 
}); 
 
JS 상호작용이 거의 없는 일부 일반 페이지에서는 문제가 없습니다! 그러나 동적으로 DOM을 로드하고 해제해야 하는 대화형 페이지의 경우 이는 비극입니다! 왜 이런 말을 하는가? 다음 예를 살펴보십시오. 

간단한 코드 조각입니다. DIV가 페이지에 동적으로 로드된 다음 DIV가 팝업 목적을 달성하기 위해 Dialog와 바인딩됩니다. 아래 테스트 요소는

입니다.
코드

코드 복사 코드는 다음과 같습니다.

function TestAppend() {

$("#test").append('

'
'업로드'업로드 취소

');
$('#dialog').dialog({
autoOpen: false,
너비: 600 ,
버튼: {
"확인": function() {
$(this).dialog("close")
},
"취소": function() {
$(this).dialog("close");
}
}
})
return false
}

DOM 요소를 삭제하려면 일반적으로 일반적인 접근 방식은 $("#test").empty(); 입니다. 이 간단한 코드 줄이 완성되었습니다! 이것이 작동합니까? ! 이 코드를 실행한 후 $('#dialog')를 사용하여 대화 상자 요소를 얻었습니다. 이제 뭔가 우울한 일이 발생합니다! 왜! 이미 비어 있지 않습니까?
이 비극이 어떻게 발생했는지 살펴보겠습니다.

$('#dialog').dialog에 중점을 두고 코드를 추적할 때 JQuery 구현 코드가 어떻게 작성되는지 살펴보겠습니다. _create 메소드를 Dialog 클래스에서 발견했는데, 다음 코드를 보면

코드 복사 코드는 다음과 같습니다. 다음과 같습니다: uiDialog = (self.uiDialog = $('

'))

.appendTo(document.body)

.hide( )
.addClass(uiDialogClasses options.dialogClass)
.css({
zIndex: options.zIndex
})
// tabIndex를 설정하면 div에 포커스가 가능해집니다.
// 개요 설정 0으로 설정하면 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에 추가한 다음

에서 대화 상자의 요소를 제거합니다. 새 div에 추가하세요....
이것이 $("#test").empty() 후에 내부 대화 상자에 아무런 영향을 미치지 않는 이유입니다! 그리고 이것은 최악의 상황이며 메모리 누수가 발생하기 가장 쉽습니다. Body에 div를 동적으로 생성하므로 양식이 닫히지 않으면 계속해서 위의 TestAppend 메서드를 사용하여 DOM을 동적으로 로드하게 됩니다. N개의 div를 생성합니다!

사실 이 문제에서 답답한 부분은 어떻게 해결하느냐가 아니라 깊고 찾기 어려운 내용이 숨어있습니다! 그런 다음 이를 발견하면 솔루션이 훨씬 간단해집니다.

코드 복사 코드는 다음과 같습니다. if ($('#dialog')[0]) {

$('#dialog').parent().empty()

$('#dialog').parent(); .remove( ); 
} 

 
이 코드를 추가한 후 $("#dialog")를 실행하여 테스트해 보니 드디어 예상한 결과가 나왔습니다! 대화 상자 요소가 사라졌습니다!