큰 백본 js 응용 프로그램에서보기를 전환 할 때 이벤트 리스너 사용 안 함

Question

큰 단일 페이지 백본 JS 응용 프로그램을 개발 중입니다. 사용자가 특정 해시 위치로 이동하면 백본 라우터가보기를로드 할 때 특정 백본보기에서 "쇼"이벤트를 트리거하고 다른 모든보기 및 $ (this.el)이 보입니다.

결국 기본적으로 나는 그들 사이를 전환 할 때 같은 일을 할 때 활성 뷰 div를 숨기고 클릭 한 링크에 해당하는 다음 것을 보여줍니다. (링크는 모두 해시 태그 위치입니다).

비활성/숨겨진보기의 일정을 사용 중지하거나 삭제 취소하면 어떤 이점이 있습니까? 지금은 모든 뷰가 이미 인스턴스화되어 있고 "show"또는 "hide"이벤트를 트리거 할 준비가되어 있지만 숨겨진 뷰에서 모든 DOM 관련 이벤트를 비활성화하는 것이 메모리/성능면에서 더 효과적 일 수 있다고 생각합니다. 숨겨진 뷰가 사용하고있는 모델이나 컬렉션을 언 바인드합니다.

사용자가 활성보기에서 새보기로 전환 할 때 발생하는 모든 이벤트를 비활성화 한 다음 div를 숨기는 "정리"트리거가 필요하다고 생각했으나 더 좋은 방법이 있습니다. 이렇게하면 메모리 사용량이 줄어들고 성능이 향상됩니까?

Answer 1

내가 이것을 사용하는 해결책은 DOM에서 한 가지 종류의보기 만 유지하는 것입니다. 즉 :

의 우리가 3 뷰를 가지고 있다고 가정 해 봅시다 : 당신은 하나 개의 변수에 적극적으로 뷰를 저장할 때

var MainView = Backbone.View.extend({ 
    el: '#main-view', 

    events: { 
    "click .openView1": "openView1", 
    "click .openView2": "openView2" 
    }, 

    render: function() { 
    //... 
    }, 

    openView1: { 
     this.activeView = new View1(); 
    }, 

    openView2: { 
     this.activeView = new View2(); 
    } 
}); 

var View1 = Backbone.View.extend({ 
}); 

var View2 = Backbone.View.extend({ 
}); 

당신이 메모리 문제가 없어야합니다.

Answer 2

숨김 또는 더 이상 필요하지 않은보기의 모든 이벤트를 확실히 바인딩 해제해야합니다. 모델 또는 컬렉션에 바인딩되는보기를 생각해보십시오. 뷰가 보이지 않고 모델에서 변경되었습니다. 변경 사항은 표시되지 않지만 뷰는 DOM을 업데이트합니다.

DOM 이벤트 바인딩 해제는보기를 삭제할 때만 의미가 있으므로 가비지 수집기가 DOM 요소를 제거 할 수 있습니다. 여전히 이벤트를 바인드 한 경우 메모리 누출이 발생할 수 있습니다.

Marionette 프레임 워크에서이 문제를 처리하는 방법을 살펴보십시오. 보기의 close 메소드에서는 모델/콜렉션에 바인드 된 모든 이벤트를 바인드 해제하고 모든 이벤트를 DOM에 바인드 해제합니다.

많은 뷰를 저장하고 싶은지 생각해야합니다. 그것은 당신이 얻을 수있는 기억 문제에 관한 것이 아닙니다. 그 일관성 지옥에 관한. 모든보기가 모델의 모든 변경 사항을 가져와 보이지 않더라도 자체 업데이트해야합니다. 더 큰 단일 페이지 응용 프로그램에서 작업하면서보기를 다시 렌더링 한 다음 저장하는 것이 훨씬 더 효율적이라고 말할 수 있습니다.