第 1 章

理解 Backbone

在本章中，我们会介绍以下所列内容：

��使用 MVC 模式设计应用

��使用模型与集合定义业务逻辑

��使用视图与路由器为应用的行为建模

��从零开始建立一套应用程序结构

��编写第一个 Backbone 应用

��在应用中实现 URL 路由

��使用插件来扩展应用

��如何参与 Backbone 项目

1.1　导论

Backbone.js 是一套基于模型 - 视图 - 控制器（Model-View-Controller，MVC）模式的

轻量级的 JavaScript 框架，可以用来帮助开发人员创建单页 Web 应用。借助 Backbone 的帮

助，我们可以使用 REST 的方式来最小化客户端和服务器间的数据传输，从而实现了更加快

速的 Web 页面更新。

Backbone.js 日趋流行，我们在许多大型的 Web 应用和 IT 创业项目中都能看到它的身

影，例如：

�� Groupon Now! ：开发团队决定他们的第一款产品要高度基于 AJAX 技术，同时还要

做到可链接和可共享。虽然 Backbone 对于他们来说是一项全新的技术，但他们发现

其学习曲线比较平坦，上手非常快。因此仅在两周的时间里，他们就成功地发布了

一个应用服务的可用版本。

�� Foursquare ：这个项目使用 Backbone.js 的库来为 foursquare 的各类实体（例如地点、

签到和用户等）创建模型类。开发人员发现 Backbone 的模型类提供了一套简单且轻

◆　Backbone.js 开发秘笈2

量级的机制来捕获对象的数据和状态，并且还支持传统的继承方法。

�� LinkedIn mobile ：在这个项目中，Backbone.js 用来创建其下一代基于 HTML5 的移

动互联网应用程序。由于有了 Backbone 的帮助，维持应用程序模块化、结构化和可

扩展性的这些工作一下子变得简单了，这样开发人员们才能专注于实现 LinkedIn 的

复杂的用户体验。此外，在 iOS 和 Android 这样不同的移动平台上，他们的应用程

序仍然能够使用同一份代码库。

��WordPress.com：这个是 WordPress 的一个 SaaS 的实现版本。它在其通知系统中使用

了 Backbone.js 的模型、集合以及视图。除此之外，该网站还把 Backbone.js 整合到

其统计（Stats）标签以及其主页上的一些其他功能当中。

�� Airbnb ：这是一个基于社区的市场，帮助用户在世界范围内检索、发现和预订住宿

服务。其研发团队在最近的多个产品中都使用了 Backbone。不久前，他们结合使用

Backbone.js、Node.js 以及一个名为 Rendr 的库来重新开发了一个移动网站。

可以访问以下链接来了解一些应用了 Backbone.js 的其他例子：

http://backbonejs.org/#examplesBackbone.js 是由 Jeremy Ashkenas 在 2010 年开发 DocumentCloud 项目的过程中开发出来。

现在，全世界大量 Git（一种分布式的版本控制系统）开发者在使用并改进着 Backbone.js。在本章中，我们会给出一些关于如何使用 Backbone.js 的实际例子，并在遵循 MVC 以

及 Backbone 的设计模式的基础上提出了一套设计结构，并用此结构构建了一个名为 Billing的账单应用程序。在本书的后续章节中还会再涉及此设计结构。如果你之前没有任何使用

Backbone.js 进行开发的经验，那么阅读本章将对你十分有用；反之如果你是一位经验丰富

的开发者，那么你可以跳过本章。

1.2　使用 MVC 模式设计应用

MVC 是众多设计模式中的一种，广泛用

于面向用户的软件系统，例如 Web 应用程序。

它的目的是分离数据和数据的表现方法，使用

户交互变得更加容易。要理解这种模式究竟做

了哪些事情，必须先理解以下这些概念。

��模型：包含应用程序运行所需要的数据

和业务逻辑。

��视图：负责把模型展示给用户。

��控制器：负责响应用户的输入，更新模

型和视图。

在 MVC 模式的具体实现中可能会有一些

变化，但总体来讲都遵循右图所示的结构。

第 1 章　理解 Backbone　◆ 3

来自世界各地的实践表明，使用 MVC 模式能够为开发者带来很多益处：

��依照关注点范式分离的原则，把应用程序拆分成若干相互独立的部分，这样做方便

了修改或替换。

��一个模型可以在不同的视图中被渲染和展现，而不用在每个视图中都实现这个模型，

这样做实现了对代码的重用。

��对于新来的开发人员来说，它需要更少的培训，也更容易上手。

为了更好地理解 MVC 模式，我们将设计一个账单应用程序作为例子。这个例子会贯穿

本书，用于帮助我们学习一些具体的内容。

我们的这个账单应用能帮助用户产生账单、管理账单以及把账单发送给客户。依照全

球通用的做法，产生的账单应当包含参考编号、日期、关于买方和卖方的基本信息、银行账

号的详细信息、所提供的产品或服务清单以及账单总金额。我们可以参照下面的这个截图来

了解它应该是什么样子：

Wooden

SellerModel

InvoiceCollection BuyerCollection

InvoiceModel BuyerModel

InvoiceItemCollection BankAccountCollection

InvoiceItemModel BankAccountModel

◆　Backbone.js 开发秘笈8

参阅内容

��第 2 章，有关模型属性的操作的知识；

��第 3 章，有关创建模型的集合的知识。

如果想学习更多关于 JavaScript 中对象属性、方法以及面向对象编程的内容，请参见以

下链接：

https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript

1.4　使用视图与路由器为应用的行为建模

不同于传统的 MVC 框架，Backbone 并没有为实现控制器的功能而提供一个单独的

对象。相反，控制器的功能被分散实现在 Backbone.Router 和 Backbone.View 当中，具体

如下：

��路由器负责处理 URL 的变化，并且委派一个视图来继续处理应用。通常，路由器

异步地从存储系统中获取模型。当它获取到模型之后，随即会触发一个视图的更新

操作。

��视图负责监听 DOM 事件。（当有新的 DOM 事件产生时）它要么对模型进行更新，要

么通过路由器转移到应用的其他部分。

下图展示了一个 Backbone 应用的典型的工作流：

12.

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

EditInvoiceFormViewInvoice

PreviewInvoiceFormViewInvoice

EditInvoiceItemTableViewInvoiceItemCollection

EditInvoiceItemViewInvoiceItemModel

PreviewInvoiceItemTableViewInvoiceItemCollection

PreviewInvoiceItemViewInvoiceItemModel

第 1 章　理解 Backbone　◆ 19

视图 InvoicePageView，用于视图的渲染。

在路由器中进行参数验证

在对路由信息进行定义的时候，Backbone 并没有提供一个默认的方法来对参数的数

据类型或是格式设置限制。所有的参数都以字符串的形式传到路由器的回调函数中，

因此需要开发人员自己来编写程序验证它们。

参阅内容

��第 5 章，有关处理路由器事件的知识；

��第 4 章，有关使用 Backbone.Router 来在视图间进行切换的知识。

1.8　使用插件来扩展应用

Backbone 的核心功能其实很少，它们都得到了全面的测试和良好的维护。但是，开发

人员在创建复杂的 Web 应用的过程中可能需要使用更多的功能。Backbone 框架的优势源自

于其模块化和灵活性。现有的组件可以被方便地扩展或替换，所以许多开发人员创建出了他

们自己的插件。

在 https://github.com/documentcloud/backbone/wiki/Extensions,-Plugins,-Resources 上面有

超过 100 个插件，可以被下载并应用到你的应用当中。在本书中，我们也会用到其中一些，

所以我们需要了解如何使用插件来扩展我们的应用。

具体步骤

如果插件只是一个单个的 JavaScript 文件的话，那么只需简单地把它复制到项目中的

lib 目录中，并且在 index.html 中把它导入进来。