作者：[美]Addy Osmani
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Backbone.js应用程序开发试读：
前言
不久以前，富数据的Web应用程序（data-rich web application）还是一个矛盾。如今，这些应用程序无处不在，因此我们需要知道如何构建它们。
通常，Web应用程序将大量数据操作工作留给服务器，服务器以完整页面加载的方式将HTML推入到浏览器中。客户端JavaScript的使用仅限于改善用户体验。现在，这种关系已经被反转过来了——客户端应用程序从服务器获取原始数据，并可以随时随地根据需要在浏览器中进行渲染。
思考一下Ajax购物车，当添加一个商品到购物车时，不需要刷新页面。最初，jQuery是这种范式的首选库。它的特性是让Ajax发出请求，然后更新页面上的文本等。然而，使用jQuery的这种模式透露出我们在客户端有隐式模型数据。
与服务器对话的客户端代码的兴起（却是很适合的）意味着客户端复杂性的增加。在客户端构建优良架构不再被置后考虑，而是变得非常必要——我们不能只编写一些jQuery代码，并期望它的规模能够随着应用程序的增长而扩大。我们很可能最终获得很多与业务逻辑纠缠在一起的杂乱的UI回调，并注定要被继承我们代码的可怜人所丢弃。
值得庆幸的是，现在有越来越多有助于改善代码结构和可维护性的JavaScript库，使我们能够更方便、轻松地构建功能强大的界面。Backbone.js已经迅速成为最受欢迎的、用于解决这些问题的开源解决方案。在本书中，我将带领大家深入地了解它的用法。
我们将从基本概念开始，然后进行练习，并学习如何构建组织清晰且易维护的应用程序。如果你是一位希望编写更容易阅读、有组织性和可扩展性的代码的开发人员，本书可以帮你做到。
提高开发者的教育水准对我来说很重要，这也是这本书采用知识共享署名-非商业性使用-相同方式共享3.0 Unported许可协议出版的原因。这意味着大家可以购买或免费获得本书，也可以帮助进一步改进它。随时欢迎大家修正现有的材料，我希望我们能够共同为社区提供有用的最新资源。
我衷心感谢Jeremy Ashkenas和DocumentCloud创建了Backbone.js，以及社区里的一些成员帮助我让这个项目更加完美。
译者注：
Jeremy Ashkenas：https://github.com/jashkenas
DocumentCloud：https://www.documentcloud.org/
社区贡献者：https://github.com/addyosmani/backbone-fundamentals/graphs/contributors目标读者
本书面向初学者以及希望学习如何更好地组织客户端代码的中级开发人员。读者需要理解JavaScript基本原理才能好好利用它；但我只在必要时对这些概念进行基本的描述。致谢名单
没有社区其他开发人员和其他写作者为本书投入的时间和精力，就不可能有本作品的问世。我要衷心感谢：
Marc Friedman https://github.com/dcmaf
Derick Bailey https://github.com/derickbailey
Ryan Eastridge https://github.com/eastridge
Jack Franklin https://github.com/jackfranklin
David Amend https://github.com/raDiesle
Mike Ball https://github.com/mdb
Uģis Ozols https://github.com/ugisozols
Bjorn Ekengren https://github.com/Ekengren
也要感谢其他优秀的贡献者，是他们让这个项目变成可能。其他读物
我假定你在JavaScript方面的水平已经超越初级水平了，因此，我跳过了某些主题，比如对象字面量。如果想要深入了解该语言，我很乐意向你推荐以下书目：《JavaScript编程精解》《JavaScript权威指南》，作者：David Flanagan (O’Reilly)《Effective JavaScript》，作者：David Herman (Pearson)《JavaScript语言精粹》，作者：Douglas Crockford (O’Reilly)《JavaScript面向对象编程指南》，作者：Stoyan Stefanov (Packt Publishing)本书约定
本书使用下列排版约定：
斜体（Italic）
表示专业词汇、链接（URL）、文件名和文件扩展名。
等宽字体（Constant width）
表示广义上的计算机编码，它们包括变量或函数名、数据库、数据类型、环境变量、语句和关键字。
等宽粗体（Constant width bold）
表示应该由用户按照字面引入的命令或其他文本。
等宽斜体（Constant width italic）
表示应该由用户替换或取决于上下文的值。
这个图标表示提示、建议或一般说明。
这个图标表示警告或提醒。代码示例
这本书是为了帮助你顺利完成工作而写的。你可以在程序和文档中使用本书的代码。只要不是大规模复制本书中的代码，就不需要联系我们获取许可。例如，使用本书中的几段代码写一个程序不需要许可。出售和分发O’Reilly书中用例的光盘（CD-ROM）是需要许可的。通过引用本书用例和代码来回答问题不需要许可，把本书中大量的用例代码并入到你的产品文档中则需要许可。
我们希望但不强求注明信息来源。一条信息来源通常包括标题、作者、出版者和国际标准书号（ISBN）。例如：“Developing Backbone.js Applications byAdnan Osmani (O’Reilly). Copyright 2013 Addy Osmani, 978-1-449-32825-2.”。
如果你感到对示例代码的使用超出了正当引用或这里给出的许可范围，请随时通过permissions@oreilly.com联系我们。Safari在线图书
Safari在线图书（Safari Books Online）是一家按需服务的数字图书馆，提供来自领先出版商的技术类和商业类专业参考书目和视频。
专业技术人员、软件开发人员、Web设计师、商业和创意专家将Safari在线图书作为他们研究、解决问题、学习和认证培训的主要资源。
Safari在线图书为组织、政府机构和个人提供了一系列的产品组合和定价计划。用户可以在一个来自各个出版社的完全可搜索的数据库中访问成千上万的书籍、培训视频和正式出版前的手稿，这些出版社包括：O’Reilly Media、Prentice Hall Professional、Addison-Wesley Professional、Microsoft Press、Sams、Que、Peachpit Press、Focal Press、Cisco Press、John Wiley & Sons、Syngress、Morgan Kaufmann、IBM Redbooks、Packt、Adobe Press、FT Press、Apress、Manning、New Riders、McGraw-Hill、Jones & Bartlett、Course Technology等。欲获得有关Safari在线图书的更多信息，请在线访问我们。联系我们
如果你对本书有意见和问题，请联系出版社：
美国：
O’Reilly Media，Inc.
1005 Gravenstein Highway North
Sebastopol，CA 95472
中国：
北京市西城区西直门南大街2号成铭大厦C座807室（100035）
奥莱利技术咨询（北京）有限公司
我们已将本书做成一个网页，我们在那里列出了勘误表、示例和额外信息。你可以打开http://oreil.ly/dev_backbone_js_apps访问这个页面。
如需对本书发表评论或提出技术问题，请发送电子邮件至：bookquestions@ oreilly.com。
欲获得有关本书、课程、会议及新闻的更多信息，请访问我们的网站：http://www.oreilly.com。
你还可以：
在Facebook上找到我们：http://facebook.com/oreilly
在Twitter上追踪我们：http://twitter.com/oreillymedia
在YouTube上关注我们：http://www.youtube.com/oreillymedia致谢
我要感谢技术校对人员，他们的出色工作帮助我改进了这本书。他们的知识、精力和热情让本书成为一个更好的学习资源，他们会继续成为我创作的灵感源泉。感谢：
Derick和Marc 再次感谢
Jeremy Ashkenas https://github.com/jashkenas
Samuel Clay https://github.com/samuelclay
Mat Scales http://github.com/wibblymat
Alex Graul https://github.com/alexgraul
Dusan Gledovic https://github.com/g6scheme
Sindre Sorhus https://github.com/sindresorhus
我还要感谢我亲爱的家人在我写这本书的时候所表现出的耐心和支持，以及本书的优秀编辑Mary Treseler。第1章概述
建筑大师Frank Lloyd Wright曾经说过：“你虽然当不成建筑师，但你仍然可以随心所欲地打开门窗，让阳光照进来。”在这本书中，我将在如何改进Web应用程序的结构方面给出一些启示，以便大家将来能够编写出更易维护、可读的应用程序。
所有架构的目的都是建立一个完美框架——对我们来说，是编写经久不衰的代码，让我们以及在我们之后维护代码的开发人员感到满意。我们都希望架构简单而美观。
现代JavaScript框架和库可以把结构性和组织性融入到项目中，从一开始就建立起一个易维护的基础模式。开发人员历尽艰辛、反复试验，解决我们现在或将来可能会遇到的回调混乱难题，才成功创建了这些框架和库。
仅使用jQuery来开发应用程序时，缺少的是构造和组织代码的方式。创建结束jQuery选择器和回调函数混乱状态的JavaScript应用程序很容易，只需努力保持UI的HTML、JavaScript中的逻辑和对API的数据调用之间的数据同步即可。
如果没有清理混乱的方法，很可能要把一组独立的插件和库串起来，以弥补功能缺失，或者重新开始构建，而且必须自己进行维护。Backbone可以解决这个问题，它提供了一种整洁地组织代码的方式，并把任务分离成可识别、且易于维护的片段。
在本书中，我和其他几位经验丰富的作者将向大家展示如何使用流行的JavaScript库的Backbone.js 1.0版本，来改进Web应用程序的结构。1.1 什么是MVC
很多现代JavaScript框架为开发人员提供使用MVC（Model-View-Controller，模型-视图-控制器）模式的变体来轻松组织代码的方法。MVC将应用程序中的关注点分为以下3个部分。● 模型（Model）代表了应用程序中的特定领域知识和数据。可以
将它想象为一个可以建模的数据类型，如一个用户、一张图片或
备忘录。模型在其状态改变时可以通知其观察者。● 视图（View）通常用于在应用程序中构成用户界面（如标记和
模板），但不是必须的。它们观察着模型，但并不与它们直接通
信。● 控制器（Controller）用于处理输入（单击或用户操作）以及更
新模型。
因此，在MVC应用程序中，用户的输入受控制器的支配，而控制器更新模型。视图观察模型，并在模型发生更改时更新用户界面。
然而，JavaScript MVC框架并不总是严格遵循这种模式。一些解决方案（包括Backbone.js）将控制器的任务合并到了视图，而其他的方法也混入到额外的组件中。
为此，我们称这种框架遵循了MV*模式，也就是说，我们可能会有模型和视图，但唯独控制器可能不存在，其他组件可能会发挥控制器的作用。1.2 什么是Backbone.js
Backbone.js（见图1-1）是一种轻量级的JavaScript库，用于将结构添加到客户端代码。它可以让应用程序的关注点管理和解耦工作变得很容易。从长远来看，它可以使代码更易于维护。图1-1 Backbone.js主页
开发人员通常使用像Backbone.js这样的库来创建单页面应用程序（SPA）。SPA是一种将页面加载到浏览器，然后不需要从服务器刷新整个页面，就可以在客户端完成数据交互的Web应用程序。
Backbone非常成熟和流行，活跃的开发者社区和基于它的大量可用插件和扩展都离不开它。它已经被Disqus、沃尔玛、SoundCloud和LinkedIn等公司用于开发重要的应用程序。
Backbone关注于向用户提供查询和操作数据的有用方法，而不是重建JavaScript对象模型。它是一个库，而不是框架，从嵌入式小部件到大规模应用，它都具有很好的可伸缩性和兼容性。
由于Backbone很小，还有一些用户将它下载到手机中使用，或者用于改善很慢的链接速度。Backbone的所有源码可以在短短几小时内就阅读并理解完。1.3 何时需要JavaScript MVC框架
使用JavaScript构建一个单页面应用程序时，不管它是否包括一个复杂的用户界面，还是只是试图减少新视图所需的HTTP请求数量，我们可能会发现自己其实已经创建了MV*框架中的许多部分。
刚开始时，编写能够提供一些特殊方法来避免“意大利面条”式代码的应用程序框架非常困难。但是，如果说编写一个与Backbone一样强大的代码也同样繁琐，那就会是一个非常错误的观念。
MV*框架在构建应用程序方面还有更深入的内容，而不只是捆绑DOM操作库、模板和路由。成熟的MV*框架通常不仅包括我们找到的自己编写的部分，还包括之后所找到的某些问题的解决方案。这是一个节省时间的事物，我们不应低估它的价值。
所以，你可能会在哪里需要MV*框架，在哪里不需要？
如果我们正在编写一个应用程序，其中在浏览器中会有许多的视图渲染和数据操作工作，那么这时我们可能会发现JavaScript MV*框架很有用处。这类应用程序包括Gmail、NewsBlur和LinkedIn移动应用程序等。
这些类型的应用程序通常下载一个完整的加载，其中包含所有的脚本和样式表，以及用户需要处理常见事情并在幕后执行大量附加行为的HTML标记。例如，无需向服务器发送一个新的页面请求，就能轻松将阅读E-mail文档切换到编写E-mail文档。
然而，如果你正在构建的应用程序仍然依赖于服务器完成大部分的页面/视图渲染工作，而且你仅仅使用一些JavaScript或jQuery来让一切更具有互动性，那么MV*框架可能就大材小用了。当然，也有一些复杂的Web应用程序，其视图的分部渲染可以与单页面应用程序进行有效的结合，但在其他方面，我们最好坚持使用简单的设置。
软件（框架）开发的成熟并不取决于一个框架已经存在了多久；而取决于这个框架有多坚固，更重要的是，它是否能够很好地发挥它的作用。在解决常见问题方面，它是否变得更有效呢？在开发人员构建更大、更复杂的应用程序时，它是否在继续改进呢？1.4 为何考虑Backbone.js
Backbone提供了一组数据结构（模型、集合）和用户界面（视图、URL），当使用JavaScript构建动态应用程序时，它们非常有用。这不是固执己见，它意味着我们可以根据需要自由、灵活地构建Web应用程序的最佳体验。可以使用它提供的开箱即用的特定架构或者对它进行扩展，以满足需求。
该库并不关注小部件或替换我们构建对象的方式，它只提供用于操作和查询应用程序数据的工具。它也没有指定特定的模板引擎；我们可以自由使用Underscore.js（它的依赖项之一）提供的微模板，视图可以绑定到所选择的模板解决方案构建的HTML上。
当我们看到大量使用Backbone构建的应用程序后，可以知道它具有良好的可扩展性，这点很明显。Backbone也能够很好地与其他库兼容，这意味着可以在使用AngularJS编写的应用程序中嵌入Backbone小部件，可以将它和TypeScript一起使用，或仅使用单个类（如模型）作为简单应用程序的数据支持者。
使用Backbone构建应用程序没有性能上的缺点。它避免了运行循环、双向绑定以及持续查询数据结构时进行更新，它让事情尽可能的简单化。即便如此，你希望背道而驰吗？当然，你可以在它上面执行这样的操作。Backbone是不会阻止你的。
在一个有众多插件和扩展作者加入的充满活力的社区里，如果想获得一些Backbone缺乏的功能，可能会在里面找到与之相关的互补项目。此外，Backbone提供了源代码的读写文档，任何人都有机会轻松了解其幕后的工作。
经过两年半的不断改进，Backbone库变得成熟起来，它将继续为构建更好的Web应用程序提供一种极简主义的解决方案。我经常使用它，希望大家像我一样，把它当作自己的另外一个工具。1.5 设定预期目标
本书的目的是创建一个权威和集中式信息存储库，来帮助那些使用Backbone开发现实世界应用程序的开发人员。如果你在本书中发现你认为可以改进或扩展的部分或主题，请在本书的GitHub网站上提交问题（或者Pull Request更好）。它不会花费你很长时间，而且这样做会帮助其他开发人员避免遇到这类问题。译者注：
GitHub网站：https://github.com/addyosmani/backbone-fundamentals
本书的主题包括MVC理论，以及如何使用Backbone的模型、视图、集合和路由来构建应用程序。我还将带领大家了解一些高级主题，如使用Backbone.js和AMD（通过RequireJS）进行模块化开发，嵌套视图等常见问题的解决方案，以及如何使用Backbone和jQuery Mobile解决路由问题等。
下面是每章要学习的内容。
第2章 基本概念
追溯MVC设计模式的历史，并介绍Backbone.js和其他JavaScript框架是如何使用实现它的。
第3章 Backbone基础
涵盖了Backbone.js的主要功能，以及大家需要知道的技术和技巧，以便能够有效地使用它。
第4章 练习1：Todos——第一个Backbone.js应用程序
带你一步步了解简单客户端Todo列表应用程序的开发。
第5章 练习2：Book Library——第一个RESTful风格的Backbone.js应用程序
了解图书馆应用程序的开发，该程序使用REST API将其模型持久化到服务器上。
第6章 Backbone扩展
描述了两个扩展框架Backbone.Marionette和Thorax，并向Backbone.js添加了用于开发大型应用程序的特性。
第7章 常见问题和解决方案
回顾使用Backbone.js时可能遇到的常见问题，以及解决这些问题的方法。
第8章 模块化开发
了解如何使用AMD模块和RequireJS进行模块化开发。
第9章 练习3：第一个模块化的Backbone/RequireJS应用程序
了解在RequireJS的帮助下，重写在练习1中创建的应用程序，使其更加模块化。
第10章 对Backbone.js请求和集合进行分页
了解如何使用Backbone.Paginator插件对集合进行数据分页。
第11章 Backbone Boilerplate和Grunt-BBB
介绍强大的工具，通过使用样板代码来开始一个新Backbone.js应用程序。
第12章 Backbone和jQuery Mobile
解决Backbone和jQuery Mobile一起使用时出现的问题。
第13章 Jasmine
介绍如何利用Jasmine测试框架对Backbone代码进行单元测试。
第14章 QUnit
讨论如何使用QUnit进行单元测试。
第15章 SinonJS
讨论如何使用SinonJS对Backbone应用程序进行单元测试。
第16章 结论
结束Backbone.js开发旅程。
附录A 延伸学习
重新回到设计模式的讨论，对比MVC模式与MVP（模式-视图-表示器）模式，并了解Backbone.js如何与两者相关，还包括了解如何从零开始编写像Backbone这样的库，以及其他一些主题。
附录B 资源
提供Backbone相关的额外资源引用。第2章基本概念
设计模式是常见开发问题中经验证的解决方案，它可以帮助我们改善应用程序的组织和结构。通过使用设计模式，我们能够从重复解决类似问题的高级开发人员的集体经验中受益。
历史上，开发人员在创建桌面和服务器级应用程序时，有大量的设计模式可以依赖，但这种模式在前几年才应用到客户端开发上。
在本章中，我们将要探索MVC（Model-View-Controller）设计模式的发展，让我们首先来了解一下Backbone.js如何让我们能够将这种模式应用到客户端开发。2.1 MVC
MVC是一种架构设计模式，鼓励通过关注点分离改进应用程序的组织。它强制将业务数据（模型）从用户界面（视图）处隔离，第三个组件（控制器）仍管理逻辑、用户输入和模型与视图的协调。该模式最初由Trygve Reenskaug在写作《Smalltalk-80》（1979年）时提出，它最初被称为Model-View-Controller-Editor。“四人组”在1994年出版的《设计模式：可复用面向对象软件的基础》对MVC进行了深入描述。这本书对MVC的推广和使用起重要作用。2.1.1 Smalltalk-80 MVC
重要的是，我们要了解最初的MVC模式要解决的问题，因为它自诞生以来已经发生了很大的变化。早在20世纪70年代的时候，图形用户界面非常稀少，一种被称为分离表现的方法开始用于在域对象和表示对象之间做明确区分。域对象用于在现实世界模拟概念（如照片、一个人），表示对象用于渲染到用户的屏幕。
MVC的Smalltalk-80将这个概念进一步升华，目标是从用户界面分离出应用程序逻辑。其想法是：解耦应用程序的这部分内容，实现在应用程序中对其他接口进行模型重用。Smalltalk-80的MVC架构有一些值得注意的有趣地方。● 领域元素被称为模型，对用户界面（视图和控制器）一无所知。● 视图和控制器负责表示层，但不只是单个视图和控制器——每
个显示在屏幕上的元素都需要一个视图控制器对，所以它们之间
没有真正的分离。● 在这个视图控制器对中，控制器的作用是处理用户的输入（如按
键和单击事件）并做一些合理的事情。● 当模型改变时，观察者模式用于更新视图。
在开发人员得知观察者模式（现在通常实现为发布/订阅系统）在几十年前就作为MVC架构的一部分之后，他们有时会感到很惊讶。在Smalltalk-80的MVC中，视图和控制器都观察模型：当模型发生变化时，视图会有反应。一个简单的示例是关于股票市场数据的应用程序：让应用程序显示实时信息，模型中的任何数据修改都应使视图立即刷新。
Martin Fowler的关于MVC起源的文章写得很棒（http://martinfowler.com/eaaDev/ uiArchs.html），所以如果你有兴趣对Smalltalk-80 MVC的历史信息进行进一步了解，推荐大家阅读他的作品。2.1.2 MVC应用于Web
Web在很大程度上依赖于HTTP协议，它是无状态的，这意味着在浏览器和服务器之间没有一直开放的连接，每个请求都要在两者之间实例化一个新通信信道。一旦请求发起人（如浏览器）获得一个响应，连接就会关闭。与很多使用MVC原始思想构建的操作系统相比，这将催生出一个完全不同的上下文。MVC的实现必须符合Web上下文。
在服务器端Web应用程序框架中，试图将MVC应用于Web上下文的一个示例就是Ruby on Rails框架，如图2-1所示。图2-1 Ruby on Rails框架
该框架的核心是我们预料到的3个MVC组件：模型、视图、控制器。● 模型表示应用程序中的数据，通常用于管理与特定数据库表交互
的规则。通常一个表对应一个模型，应用程序中的大量业务逻辑
都位于这些模型内。● 视图表示用户界面，通常采用HTML的形式被发送到浏览器，用
于将应用程序数据展示给任何从应用程序发出请求的组件。● 控制器在模型和视图之间充当黏合剂。它们的职责是处理来自浏
览器的请求，通知模型提供数据，然后将数据提供给视图，以便
将它们渲染在浏览器上。
虽然在Rails中有像MVC一样清晰的分离关注点，但它实际上是使用另一个被称为Model2的模式，因为Rails不在模型中通知视图，并且控制器只是将模型数据直接传递给视图。
这就是说，即便是从URL接收请求的服务器端工作流，将产生的HTML页面作为响应，并从界面中分离业务逻辑也是有很多好处的。以相同的方式，在服务器端框架中将UI从数据库记录中分离出来是非常有用的，同样，对于在JavaScript中从数据模型处分离UI也是有用的（稍后我们将了解更多相关内容）。
MVC的其他服务器端实现（比如PHP Zend框架）也实现了前端控制器设计模式。这种模式在单一入口点后面放置一个MVC堆栈。这种单一入口点意味着所有HTTP请求（例如http://www.example.com、http://www.example.com/whicheverpage/等）不依赖URI，由服务器配置将其路由到相同的处理程序。
当前端控制器接收HTTP请求时，它会分析请求，并决定调用哪个类（控制器）和哪个方法（动作）。选定的控制器action接管并与相应的模型进行交互来完成请求。控制器接收从模型返回的数据，加载一个适当的视图，然后将模型数据注入到其中，并将响应返回到浏览器。
例如，假设我们在www.example.com上有个博客程序，我们想编辑一篇文章（id=43），然后请求http://www.example.com/article/edit/43。
在服务器端，前端控制器将分析URL并调用article控制器（对应于URI的/article/部分）以及其编辑动作（对应于URI的/edit/部分），在该动作内会对文章模型及其Articles::getEntry(43)方法（43对应URI末尾的/43）进行调用，并将从数据库中返回需要编辑的博客文章数据。article控制器将加载（article/edit）视图，包括注入文章数据的逻辑，以便将数据放置到一个合适的表单中，用于编辑内容、标题以及其他（元）数据。最后，生成的HTML响应将被返回到浏览器。
可以想象，在表单中单击“保存”按钮后，发送的POST请求也需要一个类似的流程。POST动作的URI看起来类似/article/save/43。该请求将通过相同的控制器，但是这次save动作将被调用（由于是/save/ URI），文章模型使用Articles::saveEntry(43)将编辑后的文章保存到数据库，浏览器将被重定向到/article/edit/43的URI，以进行进一步的编辑。
最后，如果用户请求http://www.example.com/，前端控制器将调用默认的控制器和动作（例如，index控制器及它的index动作）。在index动作内，将对文章模型的Articles::getLastEntries(10)方法进行调用，该方法将返回最新的10篇博客文章。控制器将加载blog/index视图，该视图内含有列出博客文章的基本逻辑。图2-2所示显示了服务器端MVC中的典型HTTP请求/响应生命周期。图2-2 服务器端MVC中的HTTP请求/响应生命周期
服务器接收到一个HTTP请求，并通过一个单一入口点对它进行路由。在该入口点，前端控制器分析请求，并调用适当控制器的动作。这个过程称为路由（routing）。该动作模型要求返回并（或者）保存提交的数据。模型与数据源（例如数据库或API）进行通信。一旦模型完成工作，就会把数据返回到控制器，然后控制器加载合适的视图，视图再利用其提供的数据执行表示层逻辑（循环文章，并输出标题、内容等）。最后，HTTP响应返回到浏览器。2.1.3 客户端MVC和单页面应用程序
多项研究已经证实，延迟改进对网站和应用程序的使用以及用户参与都有积极的影响。这与传统的Web应用程序开发方法不同，传统方法以服务器为中心，需要重新加载一个完整的页面才能完成从一个页面到下一个页面的过程。即使有大量缓存，浏览器仍然需要解析CSS、JavaScript、HTML，并把界面渲染到屏幕上。
除了导致大量的重复内容返回给用户以外，这种方法还影响了延迟和用户体验的整体响应能力。在过去几年，改进感知延迟的一个趋势是创建单页面应用程序（SPA）——在初始页面加载后，应用程序能够处理后续导航和数据请求，而不需要重新加载页面。
当用户导航到一个新视图时，应用程序使用XHR（XMLHttpRequest）请求视图所需的额外内容，其通常与服务器端REST API或终端进行通信。Ajax（异步JavaScript和XML的简称），与服务器进行异步通信，以便数据可以在后端进行传输并处理，可以让用户能够在没有交互作用的情况下使用页面的其他部分。这可以改进可用性和响应性。
从一个视图移到另一个视图时，SPA还可以利用浏览器的特性，如HistoryAPI，来更新显示在地址栏里的地址。这些URL还可以让用户制作书签并分享特定的应用程序状态，而不需要导航到全新的页面。
典型的SPA由代表逻辑实体的接口小块组成，它们都有自己的UI、业务逻辑和数据。一个很好的示例是Web商城应用程序中的购物车，可以向其中添加商品。这个购物车可以在页面的右上角，以一个盒子的形式呈现给用户（见图2-3）。图2-3 单页面应用程序中的购物车形式
购物车及其数据以HTML的方式呈现。HTML中的数据及其相关的视图随时间变化而变化。我们曾经使用过jQuery（或类似的DOM操作库）和一堆Ajax调用与回调函数来保持两者同步，但这通常会导致生成结构欠佳或难以维护的代码，并会经常产生Bug，甚至不可避免。
对快速、复杂、响应式的Ajax Web应用程序的需求，导致需要在客户端复制大量的这种逻辑，这极大地增加了驻留在客户端代码的大小和复杂性。最终，这将导致我们需要在客户端实现MVC（或类似架构），以便更好地组织代码，并在应用程序的生命周期内更容易维护和扩展它。
经过不断发展和反复试验，JavaScript开发人员已经强化了传统MVC模式的功能，同时也开发了多个使用MVC的JavaScript框架，如Backbone.js。2.1.4 客户端MVC：Backbone风格
让我们首先来看看，Backbone.js是如何利用示例中的Todo应用程序，将MVC的好处带给客户端开发的。在接下来的内容探索Backbone的特性时，我们会将这个示例作为构建基础，但现在我们只把重点放在核心组件与MVC的关系上。
我们的示例将需要一个div元素，以便可以附加一系列的todo项；还将需要一个HTML模板，该模板包含todo项标题和标记完成的复选框。通过以下HTML提供：
在todo应用程序（demo.js）中，Backbone模型的实例用于保存每个todo项的数据：
todo模型扩展了Backbone.Model，简单地为两个数据属性定义了默认值。你会发现在接下来的章节里，Backbone模型提供了更多的功能，但是这个简单的模型表明了一件最重要的事——模型首先是一个数据容器。
每个Todo实例都将通过TodoView在页面上进行渲染：
我们通过扩展Backbone.View定义TodoView，并用一个关联的模型对它进行实例化。在示例中，render()方法使用模板来构建todo项的HTML内容，该HTML内容被放置在li元素里面。每一次调用render()，都会使用当前模型的数据来替换li元素中的内容。因此，视图实例使用相关模型的属性来渲染DOM元素中的内容。稍后我们将会看到视图如何将其render()方法绑定到模型更改事件，以便在模型发生变化时视图能够重新渲染。
到目前为止，我们已经看到，Backbone.Model实现了MVC的模型，Backbone.View实现了视图。然而，正如我们前面所指出的，在控制器方面，Backbone偏离传统的MVC，没有Backbone.Controller。
相反，控制器的责任在视图内得到了处理。回想一下，控制器响应请求并执行适当的操作，这可能会导致模型修改和视图更新。在SPA中有事件，而不是传统意义上的请求。事件可以是传统的浏览器DOM事件（如单击）或内部应用程序事件（如模型变更）。
在TodoView中，events属性承担控制器配置的角色，定义了在视图DOM元素内发生的事件如何被路由到视图中所定义的事件处理方法上。
而在这个示例中，事件帮助我们把Backbone关联至MVC模式，我们将看到事件在SPA应用程序中担任了更大的角色。Backbone.Event是Backbone的一个基础组件，它混入到了Backbone.Model和Backbone.View中，为它们提供了丰富的事件管理能力。注意，传统的视图角色（Smalltalk-80-style）由模板担任，而不是Backbone.View。
这就完成了与Backbone.js的第一次接触。本书的其余部分将探讨该框架的很多其他特性。在继续之前，让我们看看JavaScript MV *框架的常见功能。2.1.5 实现规范
SPA通过一个正常的HTTP请求和响应加载到浏览器。该页面可能仅仅是一个HTML文件（就像前面的例子），也可能是一个由服务器端MVC实现所构建的视图。
SPA一旦加载，客户端路由就会截获URL并调用客户端逻辑，而不是发送新的请求到服务器。图2-4显示了由Backbone实现的客户端MVC的典型请求处理。图2-4 Backbone处理请求的方法
URL路由、DOM事件（如鼠标单击）和模型事件（如属性更改）都在视图中触发处理逻辑。这些处理程序更新DOM和模型，并且也可能会触发其他事件。模型与数据源进行同步，可能会涉及与后端服务器的通信。1．模型● 在不同的框架中，模型的内置功能也不同；然而，它们一般都支
持属性验证，属性（attributes）表示模型的属性（properties），
比如模型标识符。● 在实际应用程序中使用模型时，我们通常也需要一种持久化模
型。持久化允许我们在知道所保存模型的最新状态下，对其进行
编辑和更新，例如，在Web浏览器的localStorage数据源中保
存，或者与数据库进行同步。● 一个模型可能会有多个视图在观察它的变化。通过观察，每当模
型更新时，视图就可以获得通知，使得视图能够确保将屏幕上显
示的内容与模型中的数据保持同步。根据你的需求，你可以创建
一个显示所有模型属性的视图，也可以创建多个单独的视图来显
示不同的属性。最重要的是，该模型不会关注这些视图的组织方
式，只是在必要时通过框架的事件系统宣布它的数据进行了更
新。● 现代MVC/MV*框架所提供的一种将模型分组在一起的方式是不
常见的。在Backbone中，这些分组被称为集合。在分组中管理
模型，可以让我们在组内模型发生变化时，根据来自组的通知来
编写应用程序逻辑，避免了手动观察单个模型实例的麻烦。我们
将在本书后面部分看到这个操作。集合还可以在多个模型上执行
任何聚合操作。2．视图● 用户与视图进行交互，通常意味着读取或修改模型数据。例如，
在Todo应用程序中，Todo模型的查看是在所有任务列表的用户
界面上发生的。在列表内部，每个todo都渲染自己的标题并完成
复选框。模型的修改是用户通过选择特定todo的标题后在编辑视
图中完成的。● 在视图中定义render()方法，它负责使用JavaScript模板引擎（由
Underscore.js提供）渲染模型的内容，并更新视图的内容，这些
内容可以由this.el进行引用。● render()回调函数作为模型的构造函数进行添加，以便模型改变
时触发视图更新。● 你可能想知道用户交互在什么地方发挥作用。当用户单击视图中
的todo元素时，视图没有责任知道下一步要做什么。控制器做这
个决定。在Backbone中，我们通过在todo元素上添加事件监听
器来完成该操作，todo元素将会把单击事件委托给事件处理程序。3．模板
在支持MVC/MV*的JavaScript框架的上下文中，值得仔细了解是的JavaScript模板以及它与视图的关系。
通过字符串连接，手动在内存中创建大量的HTML标记，一直被认为是糟糕的实践（计算起来成本很高）。使用这种技术的开发人员经常发现要自己遍历数据，并把它封装在嵌套的div中，然后使用document.write等过时的技术将模板注入到DOM中。这种方法通常意味着，在标准标记内保持脚本标记很快就变得难以阅读和维护，特别是在构建大型应用程序时。
JavaScript模板库（比如Mustache或Handlebars.js）通常将视图模板定义为包含模板变量的HTML标记。这些模板可以保存在自定义类的
试读结束[说明：试读内容隐藏了图片]