作者：(乌克兰)Vadim Mirgorod
出版社：机械工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Backbone.js开发秘笈试读：
前言
欢迎选择本书。本书将学习如何使用这个名为Backbone.js的轻量级JavaScript框架，并学习如何充分利用现代浏览器更加强大的渲染能力来创建优秀的Web应用。
本书涵盖了一系列的小节，详细阐述了在使用MVC模式以及REST风格的通信方式开发前端应用的过程中可能遇到的问题，并且就这些问题给出了实用且循序渐进的解决方案。在本书中读者还将学习到如何充分利用各种流行的Backbone扩展插件来开发Backbone应用，以及如何把各种来自第三方的库集成到所开发的应用当中。此外，读者还将学习到如何实现各种具有挑战性的任务。
内容简介
第1章 向读者介绍了MVC模式和Backbone.js框架。读者将学习如何以MVC的方式设计Backbone应用，并且能够使用模型、视图和路由器来创建第一个Backbone应用。
第2章 帮助读者了解Backbone的模型对象Backbone.Model。它是应用程序主要的构建单元，负责存储数据以及实现业务逻辑。
第3章 讲解了如何使用易于管理的集合来组织多个模型。它提供了执行诸如排序、过滤和遍历这样的集合的操作能力。
第4章 帮助读者了解如何使用Backbone的视图来渲染模型和集合，以及如何捕获DOM事件。
第5章 介绍了Backbone.js中所用到的事件系统以及事件绑定技术。
第6章 本章关注改善Backbone前端应用的方法，使之看起来更加美观，而且开发起来更加容易。
第7章 着重介绍了Backbone.js是如何将模型和集合与RESTful架构的后端系统相互同步的，以及如何把它们存储在HTML5的本地存储当中。
第8章 帮助读者学习如何解决在Backbone开发过程中最具有挑战性的那些问题，例如创建扩展插件、应用的测试、创建移动应用以及如何使我们的应用与搜索引擎兼容，等等。
阅读本书的准备工作
本书中的大部分章节并不需要使用特殊的软件。你只需要有一个浏览器和一个用于编辑HTML、JavaScript和CSS文件的文本编辑器或IDE即可。但在第7章与第8章部分小节中，会需要安装GIT、Node.js和NPM，并且还需要一个类似于UNIX那样的shell环境。
本书读者对象
本书适用于熟悉JavaScript、HTML以及CSS的前端应用开发人员，并假定读者对面向对象编程（OOP）有很好的理解而且具备一些jQuery库的使用经验。
格式约定
在本书中我们使用了一些不同的文字样式来区分不同类别的信息。下面是一些有关这些样式的具体例子及解释说明。
代码段会设置成如下样式：
当一段代码中的部分内容需要引起读者注意的时候，相关的代码行或条目会设置成粗体：
下面这样的样式表示命令行的输入或输出：
客户支持
你现在已经拥有了一本Packt出版的书籍，为使你从中获得最大的收获，我们还提供了以下的服务。
下载实例代码
所有使用http://www.packtpub.com账号购买Packt出版书籍的读者，可以下载包含实例代码的文件。如果你从其他地方购买了本书，请访问http://www.packtpub.com/support并完成注册，随后我们会将实例代码文件直接通过邮件发送给你。
勘误
虽然我们已尽一切所能来保证内容的准确性，但错误有时在所难免。如果你在我们出版的任何一本书中发现错误，不管是文章段落中的错误还是代码中的错误，都请你通知我们。这样做既能够改善其他读者的阅读体验，又能够对本书后续版本的改进提供帮助。如果你发现任何错误，请通过http://www.packtpub.com/submit-errata报告给我们。具体做法是先选择书籍名称，然后单击errata submission form的链接，最后输入你所发现的错误的具体细节。一旦你提交的勘误信息通过了验证，我们会把它上传到我们的网站或者加到书籍现有的勘误表中。你可以通过在http://www.packtpub.com/support上选择书籍名称来浏览目前所有的勘误信息。
问题
如果你对本书有任何疑问，请通过questions@packtpub.com联系我们，我们将尽可能地为你解答。致谢
首先我要感谢Packt出版社的Mary Nadar、Anish Ramchandani、Kranti Berde和Dayan Hyames。他们使我能够有机会创作个人的第一本书，并且在整个过程中给予我很多耐心的指导和鼓励。
其次我还要感谢审阅组的Jan Carlo Viray和Ivano Malavolta给我的巨大帮助。他们带来的专业见解使得本书对读者更有价值。
感谢Backbone.js社区中曾为我快速解答问题的所有人们。还要感谢mongolab.com的同事所提供的服务。
非常感谢Trellon公司的CEO Michael Haggerty准许我花大量时间来完成此书，并审阅了部分章节。
最后，我要向一直支持我、相信我的妻子Julia和我的儿子Artem表达我的爱意和感谢。第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的模型类提供了一套简单且轻量级的机制来捕获对象的数据和状态，并且还支持传统的继承方法。
·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/#examples
Backbone.js是由Jeremy Ashkenas在2010年开发DocumentCloud项目的过程中开发出来。现在，全世界大量Git（一种分布式的版本控制系统）开发者在使用并改进着Backbone.js。
在本章中，我们会给出一些关于如何使用Backbone.js的实际例子，并在遵循MVC以及Backbone的设计模式的基础上提出了一套设计结构，并用此结构构建了一个名为Billing的账单应用程序。在本书的后续章节中还会再涉及此设计结构。如果你之前没有任何使用Backbone.js进行开发的经验，那么阅读本章将对你十分有用；反之如果你是一位经验丰富的开发者，那么你可以跳过本章。1.2 使用MVC模式设计应用
MVC是众多设计模式中的一种，广泛用于面向用户的软件系统，例如Web应用程序。它的目的是分离数据和数据的表现方法，使用户交互变得更加容易。要理解这种模式究竟做了哪些事情，必须先理解以下这些概念。
·模型：包含应用程序运行所需要的数据和业务逻辑。
·视图：负责把模型展示给用户。
·控制器：负责响应用户的输入，更新模型和视图。
在MVC模式的具体实现中可能会有一些变化，但总体来讲都遵循右图所示的结构。
来自世界各地的实践表明，使用MVC模式能够为开发者带来很多益处：
·依照关注点范式分离的原则，把应用程序拆分成若干相互独立的部分，这样做方便了修改或替换。
·一个模型可以在不同的视图中被渲染和展现，而不用在每个视图中都实现这个模型，这样做实现了对代码的重用。
·对于新来的开发人员来说，它需要更少的培训，也更容易上手。
为了更好地理解MVC模式，我们将设计一个账单应用程序作为例子。这个例子会贯穿本书，用于帮助我们学习一些具体的内容。
我们的这个账单应用能帮助用户产生账单、管理账单以及把账单发送给客户。依照全球通用的做法，产生的账单应当包含参考编号、日期、关于买方和卖方的基本信息、银行账号的详细信息、所提供的产品或服务清单以及账单总金额。我们可以参照下面的这个截图来了解它应该是什么样子：具体步骤
让我们依照下列步骤来为账单应用设计一个MVC结构：
Step01 首先，列出这个应用的功能需求。假设终端用户可能期望以下功能：
·产生账单；
·通过电子邮件把账单发送给买方；
·打印账单；
·查看现有账单列表；
·账单信息的管理（增、删、改、查）；
·更新账单的状态（起草、开具、付款、取消）；
·查看年度收入图表和其他一些报告。
Step02 为了简化创建多个账单时的流程，用户可能希望在他开始创建账单之前，在应用的某一步可以管理买方信息及其个人资料。因此，我们的应用仍需为终端用户提供以下额外的功能：
·在产生账单时可以浏览买方列表，并从中选择；
·能够管理买方信息（增、删、改、查）；
·在产生账单时可以浏览银行账户列表，并从中选择；
·能够管理用户自己的银行账户信息（增、删、改、查）；
·能够编辑个人资料并在产生账单时使用它们。
当然，在实际应用中可能需要更多的功能，但对于展示如何使用MVC模式设计一个应用来说这些已经足够了。
Step03 下一步，使用MVC模式去构建这个应用。
在我们确定了应用的功能之后，需要弄明白其中哪些是与模型（业务逻辑）相关的，哪些是与视图（表现）相关的。我们把应用的功能拆分成几个部分。
Step04 然后，学习如何定义模型。
模型承载着数据，并且包含着与特定数据相关的业务逻辑。模型间可以相互联系。在我们的应用中会用到以下模型：
·InvoiceModel；
·InvoiceItemModel；
·BuyerModel；
·SellerModel；
·BankAccountModel。
Step05 然后，我们将定义模型的集合。
我们的应用允许用户操作多个模型。因此，这些模型需要被组织到一个特殊的、可迭代的名为集合的对象中。我们需要下列集合：
·InvoiceCollection；
·InvoiceItemCollection；
·BuyerCollection；
·BankAccountCollection。
Step06 下一步，定义视图。
视图用来把模型或者集合展现给应用的用户。同一个模型或集合可以在多个视图中渲染和使用。以下列出了这个应用所要用到的视图：
·EditInvoiceFormView；
·InvoicePageView；
·InvoiceListView；
·PrintInvoicePageView；
·EmailInvoiceFormView；
·YearlyIncomeGraphView；
·EditBuyerFormView；
·BuyerPageView；
·BuyerListView；
·EditBankAccountFormView；
·BankAccountPageView；
·BankAccountListView；
·EditSellerInfoFormView；
·ViewSellectInfoPageView；
·ConfirmationDialogView。
Step07 最后，定义控制器。
控制器允许用户与应用间的交互。在MVC模式中，每个视图都能够拥有不同的控制器，用来完成以下功能：
·把URL映射到特定的视图；
·从服务器端获取模型；
·控制视图的显示与隐藏；
·处理用户输入。1.3 使用模型与集合定义业务逻辑
现在我们要使用MVC以及面向对象编程的一些方法来为我们的账单应用设计业务逻辑。
在本节中，我们将使用模型以及集合对象为应用定义一个内部结构。其中模型代表了一个单独的对象；而集合则是由一组模型组成，能够支持遍历、过滤和排序。
在我们的账单应用中，模型与集合间的关系遵照下图所示的结构：具体步骤
对于每个模型，我们会创建两张表：一张用于说明其属性，另一张用于说明其方法：
Step01 首先定义BuyerModel的属性。
Step02 然后我们定义SellerModel的属性。
Step03 在这之后，我们定义BankAccountModel的属性。
Step04 定义InvoiceItemModel的属性。
Step05 下一步，定义InvoiceItemModel的方法。
不必在这个模型中存储项目总价，因为它总是取决于单价和数量，因此它是可以被计算出来的。
Step06 现在，我们来定义InvoiceModel的属性。
Step07 定义InvoiceModel的方法。
计算账单金额的方法十分简单，它等于所有账单项目金额之和。
Step08 最后，我们来定义集合。
在这个例子中，需要定义的集合包括InvoiceCollection、InvoiceItemCollection、BuyerCollection和BankAccountCollection。这些集合用来存储特定类型的模型，并且还提供了一些方法用于集合中模型的添加与删除。工作原理
Backbone.js中定义的各种模型实际上是通过扩展其基类Backbone.Model实现的。同理，定义的集合是靠扩展其基类Backbone.Collection而实现的。而为了实现模型与集合之间的关系，我们可以使用一些特殊的Backbone的扩展方式，这些内容将会在本书的后续章节中加以讨论。参阅内容
·第2章，有关模型属性的操作的知识；
·第3章，有关创建模型的集合的知识。
如果想学习更多关于JavaScript中对象属性、方法以及面向对象编程的内容，请参见以下链接：
https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript1.4 使用视图与路由器为应用的行为建模
不同于传统的MVC框架，Backbone并没有为实现控制器的功能而提供一个单独的对象。相反，控制器的功能被分散实现在Backbone.Router和Backbone.View当中，具体如下：
·路由器负责处理URL的变化，并且委派一个视图来继续处理应用。通常，路由器异步地从存储系统中获取模型。当它获取到模型之后，随即会触发一个视图的更新操作。
·视图负责监听DOM事件。（当有新的DOM事件产生时）它要么对模型进行更新，要么通过路由器转移到应用的其他部分。
下图展示了一个Backbone应用的典型的工作流：具体步骤
我们依照下列步骤来学习如何在应用中定义基本的视图和路由器：
Step01 首先，我们需要为应用创建线框图。
在本节中，我们要画两个线框图：
·在页面Edit Invoice中，用户可以从下拉列表中选择买方名称以及卖方的银行账户，输入账单的日期和参考编号，以及创建一个包含所提供产品与服务的信息的表格。
·在页面Preview Invoice中显示了买方最终将看到的账单的信息。我们通过Edit Invoice页面的表单所录入的所有信息都需要在这个页面上显示出来。除此之外，买方与卖方的详细信息也需要从应用的存储中查询出来。用户可以选择后退继续修改或者保存当前的账单。
Step02 然后，我们定义视图对象。
根据前面的线框图，我们需要定义两个主要的视图：EditInvoiceFormView和Preview-InvoicePageView。这两个视图都会对模型InvoiceModel进行操作。而模型InvoiceModel还会引用到其他对象，例如BankAccountModel和InvoiceItemCollection。
Step03 现在，我们要把视图拆分成子视图。
对表格Product or Services中的每一项，我们都希望可以根据用户在表中域Price和域Quantity的输入来重新计算域Amount的值。实现这种功能的第一种方法是每当用户对表中的数值进行更改时就重新渲染整个视图。但这并不是一个高效的方法，而且需要耗费大量的计算能力。
如果仅仅想要对视图的一小部分进行更新，我们不需要重新渲染整个视图。而更好的做法是把大的视图拆分成若干个不同的、相互独立的部分，例如子视图。这样就可以做到只更新大视图中的某一具体的部分。就我们这个应用来说，我们需要定义如下的视图：
从中我们可以看到，视图EditInvoiceItemTableView和PreviewInvoiceItemTableView分别通过额外的视图EditInvoiceItemView和PreviewInvoiceItemView的帮助来对集合InvoiceItemCollection进行渲染。而这两种额外的视图本身则负责对模型InvoiceItemModel进行渲染。这种分离的方式使得我们可以在集合中某一项目发生变化的时候，只对变化了的这个项目本身进行重新渲染。
Step04 最后，我们将定义与每个视图相关联的URL路径。就我们的应用来说，可以定义如下多个URL来显示不同的视图，例如：
·/invoice/add；
·/invoice/:id/edit；
·/invoice/:id/preview。
这里我们假设视图Edit Invoice既可以用于创建一个新的账单，也可以用于编辑一个已有的账单。在实现了路由器的功能之后，我们就可以通过具体的URL路径来加载并显示这个视图。工作原理
我们可以通过扩展对象Backbone.View来创建自己的视图，并用它来渲染模型中的数据。在视图中，我们可以为各种用户操作（例如数据输入、键盘或者鼠标事件）定义处理程序。
在这个应用中，我们可以使用一个Backbone.Router对象使得用户可以通过改变浏览器地址栏中URL的方式在应用程序中进行导航。路由器对象包含了一系列可用的URL路径及其回调函数。在回调函数中，我们能够触发与某一个URL相关的特定视图的渲染。
当用户想从一个视图跳转到另一个视图时，他要么可以单击与视图相关联的普通的HTML链接，要么可以通过编辑所需的URL的方式直接转移到应用的相应部分。参阅内容
·第4章。1.5 从零开始建立一套应用程序结构
在本节中，我们要介绍如何从头开始创建一个Backbone项目，以及一些对阅读本书后续章节有用的重要信息。具体步骤
我们将介绍一些Backbone所依赖的库以及我们这个项目的目录结构。让我们来依照以下步骤：
Step01 下载Backbone.js。
访问网址http://backbone.js并且下载库Backbone.js。你会发现上面有多个版本的库可供选择，它们包括：正式版、开发版以及试验版。
由于库文件经过了优化和压缩，所以使用正式版可以获得最佳的性能。而开发版则适用于应用的开发阶段，使得开发人员能够使用IDE的代码补全以及调试功能。最后，你当然也可以选择使用Backbone的试验版，但由于该版本可能没有经过全面测试，所以你需要承担相应的风险。
Step02 下载Backbone所依赖的库文件。
Backbone.js依赖于库Underscore.js，后者可以通过网址http://underscorejs.org下载。Underscore同样地也发布了三个不同版本的库。
Backbone.js还依赖于库jQuery或者库Zepto。这两个库有着相同的语法，并且都为开发人员提供了很多有用的功能，例如文件树、事件处理机制、AJAX和JavaScript动画，这些都简化了开发工作。
在本书的许多例子中，我们都将使用到jQuery库，它可以从http://jquery.com上面下载。它提供了开发与生产两个版本的库可供选择。
Step03 创建项目的目录结构。
遵从特定的目录结构能使文件的查找和编辑变得更加容易，而且这样的应用结构会使整个项目变得井井有条。这里给出了一个目录结构的例子，它可以用于简单的Backbone应用：
·lib/：用于存放第三方库文件的目录。
例如：
backbone.js：Backbone.js的源代码。
underscore.js：Underscore.js的源代码。
jquery.js：包含jQuery的源代码。
·js/：用于存放项目中用到的JavaScript文件。
main.js：项目中用到的主要的JavaScript文件。
index.html：我们这个应用的主文件。
创建应用的主文件（index.html），并应导入所用到的第三方的库文件以及你所编写的应用文件，如以下代码所示：
Step04 创建主要的JavaScript文件并把它命名为main.js，它包含了应用所需的代码。
由于我们在head标签中导入了脚本main.js，因此它会在浏览器处理body中的内容以及整个HTML文档被完全加载之前就得到执行。
如同很多其他JavaScript应用一样，在Backbone应用中我们也希望程序在文档加载完毕之后马上就开始执行，因此main.js应如以下代码片断所示：你可以使用这个应用模板来创建你自己的Backbone应用。我们也将在本书后面的例子中使用这个模板。1.6 编写第一个Backbone应用
在本节中，我们将开始编写我们的第一个Backbone应用。目前我们先只关注整个账单系统中的一个简单的部分。
例如，这里我们可以从为账单项目实现一个模型和一个视图开始。首先，让我们创建一个名为InvoiceItemModel的模型，它包含了域Price和域Quantity，并且还能够计算项目的总价。其次，我们需要创建一个名为PreviewInvoiceItemView的视图，负责渲染我们的模型。
示例程序的输出非常简单，如下图所示：具体步骤
在本节中我们需要向前面一节中创建的main.js脚本中加入新的代码，具体按照以下步骤来执行：
Step01 通过扩展Backbone.Model对象来定义我们的模型。
在这个InvoiceItemModel对象中，我们为其成员数据设置了默认值，并且还实现了所需的业务逻辑——定义了一个负责计算总价的函数。
Step02 创建一个模型实例。
Step03 定义一个负责对模型进行渲染的视图。
如你所见，我们的视图使用了在它创建时传入的this.model和this.el的属性。
在视图的内部，我们调用了库jQuery来为与视图$(this.el).html(html)相关的元素设置内容。在我们的例子中，this.el的值为'body'，其也是一个jQuery的选择器。
这种选择器与CSS选择器类似，使得jQuery可以通过使用函数$()来找到任意的HTML元素。
Step04 要渲染一个视图，我们只需要执行视图对象的render()方法。
在对视图进行渲染时，我们还使用了一个Underscore.js提供的模板引擎。这个模板引擎能够使用传入的数据来替换模板中的元素，并最终生成静态的HTML。更多关于模板的内容请参见第6章模板及其他用户界面的相关技术，在视图中使用模板一节中的内容。
Step05 运行应用。
有多种方法可以用来运行一个应用。如果你的应用只包含一个视图，那么可以手动地为它创建一个实例并且进行渲染。
应用程序应该在HTML页面加载完毕后立即运行。我们可以通过下面的代码来运行一个简单的Backbone应用：
试读结束[说明：试读内容隐藏了图片]