什么是 Backbone.js

Backbone.js 是一个在JavaScript环境下的 模型-视图-控制器 (MVC) 框架。任何接触较大规模项目的开发人员一定会苦恼于各种琐碎的事件回调逻辑、以及金字塔般的代码。而且，在传统的Web应用程序代码中，不可避免的都有在应用逻辑中加入显示数据的代码的情况。当项目规模愈发变大时，这种形式的代码变得越发的难以维护，因为任何在主干逻辑中的变更都可能影响到数据显示逻辑，反之亦然。

Backbone就是要来解决这样的代码耦合的问题。它通过提供一个控制层-显示层的框架，以及模版(template)来分离各自逻辑。这样的MVC框架类似于传统意义上桌面程序以及服务器端程序的程序框架。

模型 Model

运用Backbone框架的程序的核心是“模型”。多数情况下，“模型”代表了数据库中存储的一种对象结构。

Backbone的设计思想是，让模型服务于存储、获取和更改数据。注意，有另外一些MVC框架的设计是让控制器负责更改数据。可是backbone的设计思想是，控制器的作用仅仅是用来处理从视图层来的用户请求、以及访问相对应的模型层。而模型层自身则需要负责（从数据源中）获取数据、以及数据封装。

下面的例子阐释了在Backbone里，数据模型是怎样声明和初始化的。

在backbone中，要创建“模型”，可以扩展 Backbone.Model 并且提供实例的属性。在上述例子中， extend 函数给 Stooge 类建立了一个原型链，因此只需要通过Stooge你就可以访问 模型 中的所有属性。并且，由于 extend 正确的设置了原型链，因此通过 extend 创建的子类 (subclasses) 也可以被深度扩展。Extend在backbone中是很重要的概念，在多数JavaScript库里面，extend函数用来处理从一个对象复制到另一个对象。在backbone里面，extend函数同样也会创建一个构造函数，因此你可以用来初始化一个类，再把它复制到新的类，从而达到多层扩展。

视图 View

视图表示了在一种“模型”的基础上展示数据的方法。根据应用逻辑上下文的不同，视图决定了怎样展示数据。比如，在加拿大，一个公民可以选择使用短格式的出生证明或者是较长格式的出生证明。两种出生证明文档都包括了一样的关键信息（Model），但是细节程度不同（View）。在Backbone里，视图提供了一个“窗口”来查看一个模型中的数据、协助监听在界面上的用户交互或者数据模型上的变化，从而触发数据显示的更新。

下面的是在网页中显示出生证明数据的例子。

DOB: March 2, 1967

在上述代码中，声明了一个 CertificateView 类，作为出生证明的视图实例。它同样使用了backbone的extend方法来扩展了一个定制的视图结构，也就是出生证明这个结构（使用extend方法就跟上一节中的扩展“模型”一样）。这个定制的视图包含了两个方法：

initialize 方法 —— 当一个该视图结构的实例被创建时，这个方法被执行。在上述代码示例中，initialize要做的就是立即触发render函数来处理数据显示。

render方法 —— 调整DOM节点里面的内容，达到显示数据的目的。

在backbone里，所有的“视图”都不可避免的要跟DOM树操作打交道。在上述代码里，我们实例化视图时，传入了一个需要显示数据的DOM节点。如果你没有传入任何DOM节点，那么backbone将会处理页面上所有的div节点。

视图模板 View Template

上一节的代码有一个潜在的问题：在JavaScript代码里出现了生成HTML代码的逻辑。因此，我们需要使用“视图模板”来分离耦合的处理逻辑。注意，Backbone里的 View 并不包含template本身，它只提供view的控制逻辑，而具体生成template的功能是靠其依赖库 underscore 的 .template() 方法实现的。

具体的说，我们把生成HTML的逻辑从视图层的render函数中移了出来，把它放在一个标签下。为了防止浏览器把它当作真正的JavaScript代码去处理它，的type属性被设置成 text/template （而不是默认的 text/javascript）。如果不重新声明默认的type属性，那么浏览器就会用JS的引擎去处理那里面的内容，而由于视图模板常常是HTML代码段，所以通常会抛出JS语句解析错误。

在上述代码中，name和date被当作视图模板的参数变量。在模板里使用变量时，需要加上标签。如果需要输出变量，则需要使用