与 Web 开发同行不同，JavaScript 从来没有真正以框架的方式提供结构。值得庆幸的是，近年来，这种情况开始发生变化。

今天，我想向您介绍 Backbone.JS，这是一个可爱的小库，它使创建复杂、交互式和数据驱动的应用程序的过程变得更加容易。它提供了一种干净的方法来将数据与演示文稿分离。

Backbone.JS 概述

Backbone 由构建 CoffeeScript 的 JS 忍者 Jeremy Ashkenas 创建，是一个超轻量级库，可让您创建易于维护的前端。它与后端无关，并且可以与您已经使用的任何现代 JavaScript 库配合良好。

Backbone 是一个内聚对象的集合，重量4kb以下，它为您的代码提供结构，基本上可以帮助您在浏览器中构建适当的 MVC 应用程序。官方网站是这样描述其目的的：

Backbone 通过提供具有键值绑定和自定义事件的模型、具有丰富的可枚举函数 API 的集合、具有声明性事件处理的视图，为 JavaScript 密集型应用程序提供结构，并将其全部连接到您现有的应用程序RESTful JSON 接口。

让我们面对现实：上面的内容有点难以解析和理解。因此，让我们在 Jeremy 的帮助下继续解构这些行话。

键值绑定和自定义事件

当模型的内容或状态发生更改时，已订阅该模型的其他对象会收到通知，以便它们可以进行相应的处理。在这里，视图监听模型中的变化，并相应地更新自己，而不是模型必须手动处理视图。

丰富的可枚举函数API

Backbone 附带了许多非常有用的函数来处理和使用您的数据。与其他实现不同，JavaScript 中的数组是相当中性的，当您必须处理数据时，这确实是一个阻碍问题。

具有声明性事件处理的视图

你编写意大利面条式绑定调用的日子已经结束了。您可以通过编程方式声明哪个回调需要与特定元素关联。

RESTful JSON 接口

尽管当您想要与服务器通信时默认方法是使用标准 AJAX 调用，但您可以轻松地将其切换为您需要的任何内容。许多适配器如雨后春笋般涌现，涵盖了大多数最受欢迎的适配器，包括 Websockets 和本地存储。

将其分解为更简单的术语：

Backbone 提供了一种干净的方法来将数据与演示文稿分离。处理数据的模型只关心与服务器同步，而视图的主要职责是监听订阅模型的更改并呈现 HTML。

快速常见问题解答

我猜您现在可能有点困惑，所以让我们澄清一些事情：

它会取代 jQuery 吗？

没有。它们的范围非常互补，功能上几乎没有重叠。 Backbone 处理所有更高级别的抽象，而 jQuery（或类似的库）则处理 DOM、规范化事件等。

它们的范围和用例非常不同，因为你知道其中一个并不意味着你不应该学习另一个。作为一名 JavaScript 开发人员，您应该知道如何有效地使用两者。

我为什么要使用这个？

因为通常情况下，前端代码会变成一堆热气腾腾、脏兮兮的嵌套回调、DOM 操作、用于演示的 HTML 以及其他不可言喻的行为。

Backbone 提供了一种非常干净和优雅的方式来管理这种混乱。

我应该在哪里使用它？

Backbone 非常适合创建前端重型、数据驱动的应用程序。想想 GMail 界面、新 Twitter 或过去几年的任何其他启示。它使创建复杂的应用程序变得更加容易。

虽然您可以将其硬塞到更主流的网页页面，但这实际上是一个专为网络应用程序量身定制的库。

它与卡布奇诺或 Sproutcore 类似吗？

是和否。

是的，因为与上面提到的框架一样，这主要用于为 Web 应用程序创建复杂的前端。

它的不同之处在于 Backbone 非常精简，并且没有附带其他小部件。

Backbone 的重量非常轻，不到 4kb。

还有一个事实是，Cappuccino 强制您使用 Objective-J 编写代码，而 Sproutcore 的视图必须在 JS 中以编程方式声明。虽然这些方法都没有错，但使用 Backbone，普通的 JavaScript 可以通过常用的 HTML 和 CSS 来完成工作，从而实现更温和的学习曲线。

我仍然可以在页面上使用其他库，对吧？

绝对是的。不仅是典型的 DOM 访问、AJAX 包装类型，还有其余的模板和脚本加载类型。它的耦合非常非常松散，这意味着您可以将几乎所有工具与 Backbone 结合使用。

它会带来世界和平吗？

不，抱歉。但这里有一些东西可以让你振作起来。

好的，现在抛开这个问题，让我们开始吧！

了解 Backbone 的 Backbone

Backbone 中的 MVC 最初代表模型、视图和集合，因为框架中没有控制器。此后情况发生了变化。

Backbone 的核心由四个主要类组成：

• 型号
• 集合
• View
• 控制器

由于我们时间有点紧张，所以我们今天只看一下核心课程。我们将使用一个超级简单的应用程序进行后续操作，以演示此处教授的概念，因为将所有内容都放在一篇文章中并期望读者解析所有内容会太多。

在接下来的几周内请保持警惕！

型号

模型在不同的 MVC 实现中可能有不同的含义。在 Backbone 中，模型代表一个单一实体——数据库中的记录（如果您愿意的话）。但这里没有硬性规定。来自 Backbone 网站：

模型是任何 JavaScript 应用程序的核心，包含交互式数据以及围绕它的大部分逻辑：转换、验证、计算属性和访问控制。

该模型只是为您提供了一种在数据集上读取和写入任意属性或属性的方法。考虑到这一点，下面的单行代码是完全可用的：

var Game = Backbone.Model.extend({});

本文地址：http://ezhuoer.com