Backbone View 之间通信的三种方式

在Backbone中，View之间的通信是开发者常常面临的问题。为了解决这个问题，有多种通信方式可以选择，本文将对其中三种进行详细介绍。

一、通过父视图传递事件

在一个典型的Backbone应用中，我们经常会使用嵌套视图，即一个父视图包含多个子视图。父视图可以包含其所有子视图的作用域，通过父视图来传递事件是一种常见的方式。

例如，假设我们有一个ApplicationView作为最外层视图，它包含两个子视图：DocumentView和SidebarView。当用户在DocumentView中进行操作，例如编辑文档，我们可以触发一个'edit'事件。然后在ApplicationView中监听这个事件，当事件触发时，再触发一个子视图SidebarView中的事件，如'documentEdit'。

这种方式有一个缺点：父视图需要处理所有子视图的事件，如果子视图数量多或者事件类型繁多，父视图可能会不堪重负。

二、通过EventBus在视图间通信

为了解决上述问题，我们可以使用一个全局的EventBus来在视图间进行通信。EventBus是一个继承自Backbone.Events的全局对象，可以在任何视图间广播和监听事件。

使用EventBus，我们不再需要通过父视图来传递事件，而是直接在需要通信的视图间进行。例如，当DocumentView中的文档被编辑时，我们可以触发一个事件在EventBus上，然后在SidebarView中监听这个事件并作出响应。

这种方式的优势在于它使视图间的通信更加直接和灵活，不需要通过父视图来处理所有事件。

三、直接用Backbone作为事件注册机

除了上述两种方式，我们还可以直接使用Backbone的内置事件机制来进行视图间的通信。每个Backbone View都继承自Backbone.Events，因此它具有触发和监听事件的能力。

我们可以直接在需要通信的视图间触发和监听事件。例如，当DocumentView中的文档状态改变时，我们可以触发一个事件，然后在SidebarView中监听这个事件并更新相应的内容。

这种方式简单直接，但需要注意的是事件的命名和管理需要规范，以避免产生混乱。

JavaScript 代码解读

设想一个应用程序，它包含三个主要部分：应用视图（ApplicationView）、文档视图（DocumentView）和侧边栏视图（SidebarView）。每个部分都使用Backbone作为其结构基础，并通过事件进行通信。

1. 引入EventBus作为全局事件注册器

在最开始，我们采用了创建一个EventBus作为全局对象来注册事件的方法。这样，不同的视图可以通过这个EventBus进行通信。每个视图在初始化时都会获取这个EventBus的引用。

2. 进一步与优化

接着，我们意识到可以直接使用Backbone作为事件注册机，无需单独创建EventBus。因为Backbone本身就是一个混合了Events的对象。我们可以直接使用Backbone触发和监听事件，无需在每个子视图中手动注入EventBus。这种方法更为简洁。

```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'); // 直接使用Backbone触发事件

}

});

// 侧边栏视图监听文档编辑事件，并进行相应处理

var SidebarView = Backbone.View.extend({

initialize: function() {

Backbone.on('documentEdit', this.onDocumentEdit, this); // 直接使用Backbone监听事件

},

onDocumentEdit: function() {

// 对文档编辑事件作出响应

}

});

```

实际应用中的选择

在实际项目中，您选择了直接使用Backbone作为事件注册机的方法，因为它更为简洁。这种方法的优点在于它避免了创建额外的EventBus对象，并直接利用Backbone的现有功能。虽然它依赖于全局的Backbone对象，但在应用中却表现得相当直观和高效。这种设计使得不同视图间的通信变得异常简单和直接。