在上篇文章給大家介紹了Backbone中View之間傳值的學(xué)習(xí)心得。本文重點(diǎn)給大家介紹Backbone View 之間通信的三種方式。

掌握一個(gè) MVC 框架，最關(guān)鍵的一節(jié)就是掌握如何在各個(gè) View 之間通信。之前用 Angular 時(shí)，覺(jué)得基于事件的通信方式 ($on, $emit, $boardcast) 或者 基于 service 的方式都非常好用。轉(zhuǎn)戰(zhàn) Backbone 之后，由于對(duì) Backbone 的事件機(jī)制理解不夠且使用非常靈活，一直沒(méi)找到一個(gè)好的通信方式。直到看見(jiàn)這篇文章，作者通過(guò)一個(gè)簡(jiǎn)單的例子，層層深入，把 Backbone View 之間通信的三種方式講的清晰明了。譯文如下：

我正在開(kāi)發(fā)的這個(gè)網(wǎng)頁(yè)主要有兩部分，分別是 document 和 sidebar。

如上圖所示，我設(shè)立了三個(gè)視圖 (view) :

ApplicationView - 作為最外層視圖來(lái)包含下級(jí)視圖

DocumentView - 展示正在編輯或?yàn)g覽的內(nèi)容

SidebarView - 展示一些和 document 相關(guān)的信息

DocumentView 和 SidebarView 作為 ApplicationView 的子視圖，所以整體的視圖結(jié)構(gòu)如下圖所示：

用戶(hù)在任意一個(gè)子視圖進(jìn)行操作，另一個(gè)子視圖都需要隨之變化。但由于兩個(gè)子視圖之間并不能直接通知對(duì)方（也就是說(shuō)，它們的作用域沒(méi)有直接聯(lián)系，不像父視圖，可以包含它所有子視圖的作用域），所以，我需要一個(gè)事件機(jī)制。

在我谷歌和參考其他人的方法之后，我總結(jié)出了如下三種不同的通信方式。

1. 通過(guò)父視圖傳遞事件

我通過(guò)父視圖 ( ApplicationView ) 來(lái)為它的兩個(gè)子視圖傳遞事件。因?yàn)楦敢晥D包含它所有子視圖的作用域，因此用它作為事件傳遞的媒介最好不過(guò)。

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.documentEdited, this);
},
documentEdited : function(){
// do some stuff
this.sidebarView.trigger('documentEdit');
}
});
var DocumentView = Backbone.View.extend({
onEdit : function(){
this.trigger('edit');
}
});
var SidebarView = Backbone.View.extend({
initialize : function(){
this.on('documentEdit', this.onDocumentEdit, this);
},
onDocumentEdit : function(){
// react to document edit.
}
});

但是，這種方法并不高效。因?yàn)槲倚枰?ApplicationView 中添加一個(gè)額外的事件處理函數(shù) documentEdited() 。如果子視圖有一堆事件傳過(guò)來(lái)，則在父視圖中會(huì)不斷觸發(fā)事件處理函數(shù)，導(dǎo)致它不堪重負(fù)。

那么來(lái)看看第二種方法。

2. 通過(guò) EventBus 在視圖間通信

我通過(guò)繼承 Backbone.Events 來(lái)創(chuàng)建一個(gè)全局對(duì)象 EventBus 。把它注入到各個(gè)子視圖中，用來(lái)廣播事件。

JavaScript 代碼如下：

var ApplicationView = Backbone.View.extend({
initialize : function(){
this.eventBus = _.extend({}, Backbone.Events);
this.documentView = new DocumentView({
eventBus : this.eventBus
});
this.sidebarView = new SidebarView({
eventBus : this.eventBus
});
},
});
var DocumentView = Backbone.View.extend({
initialize : function(options){
this.eventBus = options.eventBus;
},
onEdit : function(){
this.eventBus.trigger('documentEdit');
}
});
var SidebarView = Backbone.View.extend({
initialize : function(options){
this.eventBus = options.eventBus;
this.eventBus.on('documentEdit', this.onDocumentEdit, this);
},
onDocumentEdit : function(){
// react to document edit.
}
});

在這個(gè)方法中，我把 EventBus 作為一個(gè)全局對(duì)象用來(lái)注冊(cè)事件。如果我想在各個(gè)視圖之間通信，只需要在視圖中注入 EventBus ，就可以通過(guò)它方便地觸發(fā)或監(jiān)聽(tīng)事件了。

注意：如果你不想要?jiǎng)?chuàng)建全局對(duì)象，你仍然可以創(chuàng)建模塊 (module) 或視圖 (view) 級(jí)別的 EventBus 用來(lái)通信。

這個(gè)方法已經(jīng)明顯優(yōu)于第一種方法了。但是需要我們手動(dòng)的在子視圖中引入 EventBus ，說(shuō)明還有可以改進(jìn)的空間，那么，來(lái)看看第三種方法。

3. 直接用 Backbone 作為事件注冊(cè)機(jī)

在第二種方法中，我創(chuàng)建了一個(gè)單獨(dú)的 EventBus ，繼承自 Backbone.Events 。但最近我悟到 Backbone 對(duì)象本身就是一個(gè)混合了 Events 的對(duì)象，所以我直接用 Backbone 廣播事件，就無(wú)需單另創(chuàng)建的 EventBus 了。

而且 Backbone 對(duì)象可以直接調(diào)用，這樣我就不必在每個(gè)子視圖中手動(dòng)注入它了。

JavaScript 代碼如下：

var ApplicationView = Backbone.View.extend({
initialize : function(){
this.documentView = new DocumentView();
this.sidebarView = new SidebarView();
},
});
var DocumentView = Backbone.View.extend({
onEdit : function(){
Backbone.trigger('documentEdit');
}
});
var SidebarView = Backbone.View.extend({
initialize : function(options){
Backbone.on('documentEdit', this.onDocumentEdit, this);
},
onDocumentEdit : function(){
// react to document edit.
}
});

總結(jié)

我最終在我的項(xiàng)目中使用了第三種方法。而且在我看來(lái)，雖然它直接依賴(lài)了全局的 Backbone 對(duì)象，但是用起來(lái)卻異常簡(jiǎn)潔。

最新評(píng)論