이벤트 프록시를 잘 활용하고 클로저의 성능 함정에 주의하세요. _자바스크립트 기술

즉, 클로저는 해제된 리소스가 없는 스택 영역을 생성합니다. 즉, 제어할 수 없는 메모리 공간 점유입니다. 이벤트와 연관되어 있으면 JS 가비지 수집 메커니즘은 이 영역을 건드리지 않습니다.
예: Taobao 매장 광고 공간 사용자 정의와 유사하게 div에 수백 개의 핫스팟(a 태그)을 구현해야 하는 프로젝트가 있습니다. 그런 다음 전통적인 접근 방식에 따라 다음과 같이 가장 일반적인 폐쇄를 수행합니다. 인스턴스를 사용하는 목적은 이것의 범위를 변경하고 핸들러 함수 내에서 범위에 속하는 다른 메서드나 속성을 호출하는 것입니다.

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

var apply = function() {
　this.div = document.getElementById("div's id");
this.hot = this.div.getElementsByTagName("a")
for(var i=0; i　this.hot[i].onclick = function(me) {
　　return function() {
　　me.edit(this)
　　　}
　　}(this) ;
　}
}
apply.prototype = {
편집: function(target) {
　}
}

여기서 문제는 time 루프는 위에서 설명한 대로 제어할 수 없는 메모리 주소를 메모리에 기록합니다. 물론 이를 찾을 수 없으며 더 이상 필요하지 않을 때 이를 정리할 방법이 없습니다. js 재활용 메커니즘은 그것이 언제인지 알 수 없습니다. 쓸모가 없으며 정크 주소를 생성합니다. 또한 div 내의 DOM 구조가 변경되면 이러한 태그를 다시 찾아서 이벤트를 바인딩해야 합니다.
물론 이것을 로컬 변수에 추가할 수도 있습니다: var me = this; 이 쓸모없는 데이터를 정리하세요. 그러나 이것은 최선의 해결책은 아니며, 많은 사람들이 이 보기 흉한 코딩 방법을 좋아하지 않을 것으로 추정됩니다.
물론 가장 좋은 해결책은 내부 구조에 신경 쓸 필요가 없고 내부 요소에 대한 변수를 선언할 필요도 없다는 것입니다. 그러면 이벤트 프록시의 작업이 됩니다. 즉, 이벤트를 각 하위 개체에 바인딩할 필요가 없으며, 버블링 메커니즘을 통해 현재 이벤트를 트리거하는 요소를 찾을 수 있고, 자신만의 일련의 규칙을 통해 최종 처리 기능을 찾을 수 있습니다.
이벤트 프록시 패턴을 사용하는 경우 위에 설명된 요구 사항을 어떻게 구현하나요?

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

var apply = function() {
this.div = document.getElementById("div's id");
this.div.onclick = function(me) {
return function() {
var _event =args.callee. caller.arguments [0];
　 var target = _event.target || _event.srcElement;
if(target.tagName == "a")
me.edit(target);
return false;
　　}
　}(this) >
이제 우리는 컨테이너 요소가 무엇인지, 그 안에 a가 몇 개 있는지, 변경되었는지 등에만 관심이 있습니다. 성능의 차이는 확연합니다.
무심코 작성하는데 10분 정도 걸렸네요. 조금 헷갈리는 내용인데 혹시 틀린 부분이 있으면 조언 부탁드립니다.

이모 / 2011-11-15
mail Auntion@gmail.com
QQ 82874972
원본 기사, 정보 중 이 부분을 재인쇄용으로 남겨주세요