BackBone 教程 – 第 1 部分：Backbone.Js 简介

引言

本文中，我们将尝试探讨 JavaScript 框架的基础知识，并介绍 backbone.js。

背景

完整系列链接

1. BackBone 教程 – 第 1 部分：Backbone.Js 简介[^]
2. BackBone 教程 – 第 2 部分：理解 Backbone 模型的基础知识[^]
3. BackBone 教程 – 第 3 部分：更多关于 Backbone 模型[^]
4. BackBone 教程 – 第 4 部分：使用 HTTP REST 服务对 BackboneJs 模型进行 CRUD 操作[^]
5. BackBone 教程 – 第 5 部分：理解 Backbone.js 集合[^]
6. BackBone 教程 – 第 6 部分：理解 Backbone.js 视图[^]
7. BackBone 教程 – 第 7 部分：理解 Backbone.js 路由和历史[^]
8. BackBone 教程 – 第 8 部分：理解 Backbone.js 事件[^]

很久以前（几乎十年前），大多数软件应用程序都被构建为独立应用程序。这些应用程序面向单个用户，并在他们的操作系统上运行。后来出现了在多个用户之间共享数据以及将数据存储在中央位置的需求。这种需求催生了分布式应用程序和 Web 应用程序。分布式应用程序作为独立应用程序在用户机器上运行，为用户提供了丰富的用户界面（桌面般的体验），并在幕后将数据发送到服务器。相反，Web 应用程序被沙盒化在 Web 浏览器中，并使用 HTML 和 HTTP 让用户对存储在远程服务器上的数据执行操作。

这两种应用程序的主要区别在于分布式应用程序提供了交互式用户体验，而 Web 应用程序提供的功能非常有限（由于技术限制）。分布式应用程序的缺点是很难在所有用户中推广和确保应用程序更新。Web 应用程序没有这样的问题，因为一旦应用程序在服务器上更新，所有用户都会获得更新的应用程序。

这两种方法都有优缺点，需要采取一些措施来取两者的优点。这就是基于浏览器插件的应用程序（如 Flash 应用程序和 Silverlight 应用程序）出现的地方。这些技术填补了 HTML 无法实现的所有功能空白。它们提供了在浏览器中创建富互联网应用程序的可能性。唯一的缺点是用户需要安装浏览器插件才能使这些应用程序工作。

然后，浏览器变得更加强大，HTML 也更加成熟。仅使用基于浏览器的客户端技术就可以创建富互联网应用程序。这使得开发人员使用 HTML 和 JavaScript 编写客户端代码来创建富互联网应用程序。不需要 Flash 和 Silverlight 等插件。但由于 HTML 和 JavaScript 从未打算用于编写功能齐全的 Web 应用程序，因此这些应用程序的所有 HTML 和 JavaScript 代码都混杂在一起。这导致了意大利面条式代码，这些客户端 HTML/JavaScript 应用程序（单页应用程序或 SPA）变成了维护噩梦。

那么，既然单页应用程序会导致糟糕的代码，我们为什么要编写它们呢？创建单页应用程序的主要原因是它们允许我们为用户创建更像原生/桌面/设备应用程序的体验。因此，需要以结构化的方式创建 SPA，这催生了 JavaScript 框架和库的需求，这些框架和库为单页应用程序提供了一些结构。

目前，有相当多的开源 JavaScript 框架可以帮助我们解决意大利面条式代码问题。这些框架允许我们以结构化的方式设计我们的应用程序。

关注点分离和 MVC

一个好的应用程序架构最好的优点之一是关注点分离（SoC）。Backbone Marionette 框架最棒的部分是它能够使用 MVC 模式提供这种关注点分离。模型将表示实现解决方案所需的业务对象。视图是用户可见的部分。用户可以通过视图简单地消费数据，或者对数据进行操作，即 CRUD 操作。控制器是提供模型和视图之间交互机制的部分。控制器的职责是响应用户输入并通过更新模型和视图来协调应用程序。模型和视图保持松散耦合，即模型对视图一无所知，而视图有一个模型对象（关联）来提取信息并将其显示给用户。

什么是 BackBone.js

Backbone.js 是一个轻量级框架，允许我们以结构化的方式创建单页应用程序。它基于模型-视图-控制器 (MV*) 模式。它最适合使用 RESTful 服务持久化数据来创建单页应用程序。

现在人们可能会想，这个 MV* 是什么。我们已经详细讨论了 MVC 架构，然后我们又说 Backbone 是一个 MV* 框架。原因在于 Backbone 不想强制使用控制器。应用程序可以选择将自己的代码用作控制器，使用某个可以提供控制器的插件，或者可能使用 MVVM 模式而不是 MVC 模式。

Backbone 将提供什么

模型

每个应用程序都需要某种方式来组织其数据结构。Backbone 将为我们提供创建模型以管理所有实体的可能性。Backbone 模型默认提供持久化自身的方式。持久化可以是在 `localStorage` 上，甚至可以通过 restful API 在服务器上进行。这些模型还提供了在持久化数据之前验证模型中数据的方式。

集合

集合只是模型的集合。Backbone 还提供了创建有序模型集合的可能性，即集合。

视图

JavaScript 应用程序中的主要问题是处理视图上的 UI 元素。监听它们的事件并根据接收到的数据改变它们的值。Backbone 通过提供 HTML 元素的抽象（即视图）来简化此问题。Backbone 视图就像某些 HTML 上的观察者。我们可以定义 HTML 并将其与视图关联。然后，视图将负责处理这些 HTML 元素的事件，并根据数据填充和渲染这些视图。HTML 与视图对象完全分离。它可以直接或通过某些模板引擎与视图对象关联（请耐心等待，我们将在适当的时候看到所有这些操作）。

路由器

尽管我们想创建一个单页 Web 应用程序，但需求可能要求复制、收藏 URL。因此，对于单页应用程序，如果希望 URL 决定要渲染的视图，路由器将非常有用。路由器将查看请求的 URL，然后根据请求的 URL 执行代码，然后向用户渲染视图。

为什么选择本系列文章

因此，编写本系列教程的目的是通过查看小块功能来逐步理解 backbone.js 框架。本文主要是让用户熟悉 backbone.js 框架的功能。从下一篇文章开始，我们将深入探讨并详细了解 Backbone 框架。稍后，我们将创建一个完整的应用程序来理解所有这些概念。

在稍后的阶段，我们将研究 Marionette.js 插件。这个插件使得创建 backbone 应用程序变得更加容易。此外，从架构角度来看，backbone.js + Marionette.js 应用程序的结构甚至比 backbone.js 应用程序更好。然后，我们将创建一个完整的应用程序来了解 backbone Marionette 的实际应用。

所以，请坐稳，和我一起享受这段 Backbone 之旅吧。