백본보기간에 전달하는 세 가지 방법

이전 기사에서는 백본의 뷰 사이에 가치를 전달하는 학습 경험을 소개했습니다. 이 기사는 백본 뷰 사이에 세 가지 커뮤니케이션 방법을 소개하는 데 중점을 둡니다.

MVC 프레임 워크를 마스터하는 가장 중요한 섹션은 다양한 견해간에 의사 소통하는 방법을 마스터하는 것입니다. 이전에 Angular를 사용했을 때 이벤트 기반 커뮤니케이션 방법 ($ on, $ emit, $ boardcast) 또는 서비스 기반 방법이 매우 유용하다고 생각했습니다. 백본으로 이동 한 후 백본의 이벤트 메커니즘에 대한 이해가 충분하지 않아 매우 유연한 사용으로 인해 우수한 의사 소통 방법은 발견되지 않았습니다. 이 기사를 볼 때까지 저자는 간단한 예제를 사용하여 백본보기 사이의 세 가지 의사 소통 방법을 명확하게 설명했습니다. 번역은 다음과 같습니다.

내가 개발중인 웹 페이지에는 문서와 사이드 바의 두 가지 주요 부분이 있습니다.

위 그림에서 볼 수 있듯이 세 가지 조회수를 설정했습니다.

ApplicationView- 가장 아래보기가 가장 바깥 쪽보기를 포함합니다.

DocumentView- 편집 또는 브라우징중인 컨텐츠를 보여줍니다

사이드 바뷰 - 문서 관련 정보를 보여줍니다

DocumentView 및 SideBarview는 ApplicationView의 하위 뷰이므로 전체보기 구조는 다음과 같습니다.

사용자는 모든 하위 뷰에서 작동하며 다른 하위 뷰는 그에 따라 변경해야합니다. 그러나 두 아동의 견해는 상대방에게 직접 알릴 수 없기 때문에 (즉, 모든 어린이 견해의 범위를 포함 할 수있는 부모의 견해와 달리, 스코프는 직접 관련이 없습니다) 이벤트 메커니즘이 필요합니다.

다른 사람들의 방법을 검색하고 언급 한 후 다음 세 가지 다른 의사 소통 방법을 요약했습니다.

1. 부모보기를 통해 이벤트를 통과합니다

부모보기 (ApplicationView)를 통해 두 개의 자식보기에 대한 이벤트를 통과합니다. 부모보기에는 모든 어린이보기의 범위가 포함되어 있기 때문에 이벤트 배달을위한 매체로 사용하는 것이 가장 좋습니다.

JavaScript 코드는 다음과 같습니다.

 var applicationView = backbone.view.extend ({initialize : function () {this.documentView = new DocumentView ({parent : this}); this.sideBarview = new SideBarView ({parent : this}); this.documentView.on ( 'edit', this.documented, this); stuffthis.sidebarview.trigger ( 'documentedit');}}); var documentview = backbone.view.extend ({onedit : function () {this.trigger ( 'edit');}}); var sidebarview = backbone.view.extend ({this.on () {this.on ( 'this.on) this);}, ondocumentEdit : function () {// document edit.}});

그러나이 방법은 효율적이지 않습니다. ApplicationView 문서화 된 ()에 추가 이벤트 핸들러를 추가해야하므로. 어린이보기에 많은 이벤트가 전달되면 이벤트 처리기 기능이 부모보기에서 지속적으로 트리거되어 압도됩니다.

그런 다음 두 번째 방법을 살펴 보겠습니다.

2. EventBus를 통한보기 간의 커뮤니케이션

Backbone.events를 상속하여 글로벌 오브젝트 이벤트 버스를 만듭니다. 방송 이벤트에 각 하위 뷰에 주입하십시오.

JavaScript 코드는 다음과 같습니다.

 var applicationview = backbone.view.extend ({initialize : function () {this.eventBus = _.extend ({}, backbone.events); this.DocumentView = new DocumentView ({eventBus : this.eventBus}); {eventBarView = new Barview : this.eventBus});},}); var docum 함수 (옵션) {this.eventBus = 옵션 .eventBus; this.eventBus.on ( 'documentedit', this.ondocumentedit, this);}, ondocumentEdit : function () {// 문서 편집에 반응}});

이 방법에서는 EventBus를 이벤트를 등록하기위한 글로벌 객체로 사용합니다. 보기간에 의사 소통하려면 eventBus를보기에 주입하기 만하면 이벤트를 쉽게 트리거하거나들을 수 있습니다.

참고 : 글로벌 객체를 만들고 싶지 않은 경우 모듈 또는 커뮤니케이션 수준에서 이벤트 버스를 만들 수 있습니다.

이 방법은 이미 첫 번째 방법보다 상당히 낫습니다. 그러나 하위 뷰에 EventBus를 수동으로 도입해야하며, 이는 여전히 개선의 여지가 있음을 보여줍니다. 세 번째 방법을 살펴 보겠습니다.

3. 백본을 이벤트 등록 시스템으로 직접 사용하십시오

두 번째 방법에서는 Backbone.events에서 상속 된 별도의 이벤트 버스를 만듭니다. 그러나 최근에 백본 객체 자체가 이벤트를 혼합하는 객체라는 것을 깨달았으므로 백본을 직접 방송하기 위해 이벤트를 사용하므로 다른 이벤트 버스를 만들 필요가 없습니다.

그리고 백본 객체를 직접 호출 할 수 있으므로 각 서브 뷰에서 수동으로 주입 할 필요가 없습니다.

JavaScript 코드는 다음과 같습니다.

 var applicationView = backbone.view.extend ({initialize : function () {this.documentView = new DocumentView (); this.sideBarview = new SideBarView ();},}); var DocumentView = backbone.view.extend (onedit : function ()); = backbone.view.extend ({initialize : function (옵션) {backbone.on ( 'documentedit', this.ondocumentedit, this);}, ondocumentEdit : function () {// document edit.}});

요약

프로젝트에서 세 번째 방법을 사용했습니다. 그리고 제 생각에는 글로벌 백본 객체에 직접적으로 의존하지만 사용하기가 매우 간결합니다.