欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Backbone View 之間通信的三種方式

 更新時(shí)間:2016年08月09日 11:12:31   投稿:mrr  
Backbone View 之間通信有三種,分別是通過(guò)父視圖傳遞事件,通過(guò) EventBus 在視圖間通信,直接用 Backbone 作為事件注冊(cè)機(jī),本文對(duì)這三種通信方式逐一詳細(xì)介紹,感興趣的朋友一起學(xué)習(xí)

在上篇文章給大家介紹了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)潔。

相關(guān)文章

最新評(píng)論