详情
本书是设计和构建大规模JavaScript单页Web应用（SPA）的宝贵指南。本书大约三分之二的内容专门讲解单页Web应用的客户端开发，剩下三分之一的内容讲解SPA的服务端开发和其他与单页应用相关的知识，如Node.js、MongoDB、CDN、搜索引擎优化、数据分析、错误日志以及各个层级的缓存等。最后两个附录分别介绍JavaScript的编码规范和SPA的测试。
包勇明 译
北京
图书在版编目（CIP）数据
单页Web应用：JavaScript从前端到后端/（美）米可夫斯基（Mikowski,M.S.），（美）鲍威尔（Powell,J.C.）著；包勇明译.--北京：人民邮电出版社，2014.10
书名原文：Single page web applications：AJavaScript end-to-end
ISBN 978-7-115-36362-6
Ⅰ.①单… Ⅱ.①米…②鲍…③包… Ⅲ.①JAVA语言—程序设计 Ⅳ.①TP312
中国版本图书馆CIP数据核字（2014）第178040号
版权声明
Original English language edition，entitled Single Page Web Applications:JavaScript end-to-end by Michael S.Mikowski and Josh C.Powell,published by Manning Publications Co,209 Bruce park Avenue,Greenwich,CT 06830.Copyright © 2014 by Manning Publications Co.
Simplified Chinese-language edition copyright © 2014 by Posts & Telecom Press.All rights reserved.
本书中文简体字版由Manning Publications Co.授权人民邮电出版社独家出版。未经出版者书面许可，不得以任何方式复制或抄袭本书内容。
版权所有，侵权必究。
◆著 [美]Michael S.Mikowski Josh C.Powell
译 包勇明
责任编辑 杨海玲
责任印制 彭志环 焦志炜
◆人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 10064 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
北京艺辉印刷有限公司印刷
◆开本：800×1000 1/16
印张：25.5
字数：558千字 2014年10月第1版
印数：1-3500册 2014年10月北京第1次印刷
著作权合同登记号 图字：01-2013-7459号
定价:69.00元
读者服务热线：（010）81055256 印装质量热线：（010）81055316
反盗版热线：（010）81055315
本书是设计和构建大规模JavaScript单页Web应用（SPA）的宝贵指南，这些应用从前端到后端都使用JavaScript：浏览器端应用、Web服务器和数据库。
本书大约三分之二的内容专门讲解单页 Web 应用的客户端开发，先定义何为JavaScript单页应用，接着介绍书中使用的单页Web应用的架构，然后依次讲解Shell模块、功能模块、Model模块、Data模块和Fake模块等，其中还专门拿出一整章讲解开发单页 Web 应用时需要掌握的 JavaScript 概念和特性；剩下三分之一的内容讲解单页 Web应用的服务器端开发和其他与单页Web应用相关的知识，如Node.js、MongoDB、CDN、搜索引擎优化、数据分析、错误日志以及各个层级的缓存等。本书最后的两个附录分别介绍JavaScript的编码规范和单页Web应用的测试。
本书适合Web开发人员、架构师和产品经理阅读，需要读者至少要有些JavaScript、HTML和CSS的开发经验。
包勇明 资深前端工程师，有七年多的前端开发经验，热爱各种前端技术，注重实践，也非常注重基础理论知识，已经开发过多个颇具规模的单页应用。目前正在开发和维护一个云盘和协作类的产品。
单页Web应用（single page web application，SPA）无疑是目前网站开发技术的弄潮儿，很多传统网站都在或者已经转型为单页Web应用，新的单页Web应用网站（包括移动平台上的）也如雨后春笋般涌现出来，如 Gmail、Evernote、Trello 等。如果你是一名 Web开发人员，却还没开发过或者甚至是没有听说过单页应用，那你已经Out很久了。
单页 Web 应用和前端工程师息息相关，因为最主要的变革发生在浏览器端，用到的技术其实还是HTML+CSS+JavaScript，所有的浏览器都原生支持，当然有的浏览器因为具备一些高级特性，从而使得单页 Web 应用的用户体验更上一层楼。关于单页应用的优点和缺点，网上讲解的文章有很多，这里就不展开论述了。
单页Web应用，顾名思义，就是只有一张Web页面的应用。浏览器一开始会加载必需的HTML、CSS和JavaScript，之后所有的操作都在这张页面上完成，这一切都由JavaScript来控制。因此，单页Web应用会包含大量的JavaScript代码，复杂度可想而知，模块化开发和架构设计的重要性不言而喻。
随着单页Web应用的崛起，各种框架也不断涌现，如Backbone.js、Ember.js、Angular.js等，还有RequireJS等模块加载器。但是，本书没有讲解这些框架和模块加载器，这也正是我最喜欢这本书的原因。作者坦言自己很少使用框架，认为框架的限制过多，一旦不符合框架本身的设计哲学，结果可能适得其反。在翻译的过程中，曾多次想给作者鼓掌，因为我一直以来的观点和想法多次和作者的不谋而合。当然我和作者一样，也并不反对使用框架。不管是按照书中的方法来开发，还是决定使用其他可用的框架库，书中的思想都是适用的。
本书作者主要是介绍他们多年来开发单页Web应用网站的经验，他们已经从中提炼出单页Web应用的架构设计，这些架构设计思想是本书的精华所在，是本书最有价值且最值得回味和学习的知识。我特别欣赏作者那种毫无保留的分享精神和对技术认真严肃的态度，讲解的过程中一直担心遗漏了什么，结果使得本书的篇幅大大超出了他们最初的计划。
本书前面6章都在讲解单页Web应用的客户端。鉴于完整性的需要，最后3章讲的是服务端技术，同样讲得深入浅出，推荐所有Web开发人员尤其是前端工程师仔细阅读。作者特意选择和JavaScript相关的服务端技术，即Node.js和MongoDB。作者想证明全栈JavaScript 开发的可行性。作者表示结果是令他们自己满意的。当然服务端也可以选择其他平台，作者从来没有也不会说Node.js和MongoDB是最好的服务端技术，这一点也是特意强调过的。最后还添加了两个附录，分别介绍JavaScript的编码规范和单页Web应用的测试，这也是程序开发的两大话题，很值得一读。
单页 Web 应用的开发会遇到很多挑战，但我相信随着技术的不断发展和人们的不断努力，这些挑战会被一一突破。比如，目前棘手的 SEO 问题，需要搜索引擎公司和开发人员的不断尝试和配合，我相信会有那么一天，SEO的问题将不复存在。
由于本人水平有限，加之时间仓促，翻译过程中难免有纰漏之处，敬请广大读者批评指正。
2006年，我编写了生平第一个JavaScript单页Web应用，当时还不叫单页Web应用。这对我的改变非常大。在职业生涯的早期，我关注的是底层Linux内核技术以及并行和分布式计算，用户界面一直就是简单的命令行。在2006年接受了旧金山大学的终身教师职位后，我启动了一个颇具野心的分布式计算项目，叫River（http://river.cs.usfca.edu）,它需要交互式图形界面来简化分布式机器的管理和调试。
当时Alex Russell刚刚杜撰了“comet”这个词，我们从中受到了启发，并决定使用这一技术，界面使用Web浏览器。在尝试使用JavaScript来实现实时交互时，争论颇多，遇到了很大的挑战。尽管做出了一些成果，但是效果并没有希望的那么好。这一挑战就是我们不得不自己来开发所有的东西，因为当时还没有今天使用的库和技术。比如，jQuery，它的第一个版本是后来才发布的。
2011年6月，Mike Mikowski以UI架构师的身份加盟了SnapLogic（http://snaplogic.com）公司，当时我是研发主管。我们在同一个团队工作，设计下一代数据集成产品。Mike和我花了无数时间讨论软件工程和语言设计的核心问题。我们互相学到了很多东西。Mike 也和我分享了这本书的草稿，我也学习了他和Josh构建单页Web应用的方法。很明显，他们已经开发了几代商业级单页 Web 应用，并且利用这一经验提炼出了全面、清晰和相对简单的技术和架构。
自从2006年我投入到River项目以来，开发浏览器原生单页Web应用的技术已经成熟，它们通常优于第三方插件，像Java或者Flash。有很多好书关注这些技术，像HTML、CSS、JavaScript、jQuery、NodeJS和HTTP，但遗憾的是，很少有书能很好地把这些技术结合在一起。
这本书是一个例外。它详细地展示了精心测试过的技巧，在从前端到后端都使用JavaScript来构建引人注目的单页Web应用时，需要用到这些技巧。它分享了从几代单页Web应用中提炼出来的深刻见解。可以说Mike和Josh走过很多的弯路，这样你就不用重蹈覆辙了。有了这本书，你就可以关注应用的目标，而不是应用的实现。
这本书中的解决方案使用了现代 Web 标准，在相当长的时间内都是有效的，可以在很多浏览器和设备上正常运行。真希望在 2006 年开发 River 项目时，就具备今天的技术和拥有这本书。我们当然会很好地对它们加以利用。
Gregory D.Benson
旧金山大学计算机科学系教授
Josh是我在找工作的时候认识的，2011年夏天他给我提供了一个Web架构师的职位。尽管最终我决定接受另外一个机会，但是我们相见甚欢，并讨论了一些关于单页 Web 应用的有趣问题以及互联网的未来。有一天，Josh天真地建议我们俩合写一本书，我傻傻地同意了，于是数百个周末我们把自己关起来，经历着相同的命运。我们最开始预计这会是一本很薄的书，少于300页。最初的想法是作为经验丰富的开发者提供从前端到后端都使用 JavaScript 来创建产品级单页 Web 应用的深刻见解。本书中的概念适用于任何开发JavaScript单页Web应用的人，不管他们是按照书中的方法来开发，还是决定使用其他可用的框架库。
当首次发布MEAP版本的时候，第一个月就有将近 1000 人购买了此书。我们倾听着他们的反馈，也在聚会、大学和行业会议上向成千上万的开发者和有影响力的人发表演讲，使其知道为什么单页Web应用如此吸引人。我们听到的声音是渴望了解与这个主题相关的知识。我们发现开发者渴望学习构建Web应用的更好的方法。于是又添加了很多内容，覆盖了更多的主题。例如，添加了附录B，详细演示了如何进行无头单页Web应用[1]的测试，因为很多人觉得书稿中关于测试的讲解还不够全面。
我们还提供了开发产品级单页Web应用的深刻见解，也讲解了一些读者真正想要的额外主题。于是，我们的“小”书的篇幅就比最初估计的大约翻了一番。希望你喜欢这本书。
Michael S.Mikowski
注 释
[1].headless SPA，即不在浏览器中运行的单页应用，具体内容请见附录B。——译者注
Michael Mikowski是一位屡获殊荣的工业设计师和单页应用架构师，是一位有着13年经验的全栈Web开发人员和架构师。他担任HP/HA平台开发经理将近四年，该平台在大规模集群中使用mod_perl应用服务器，每天需要处理数十亿次请求。
在2007年，他开发了AMD公司的“Where to Buy”网站，受网站托管技术的限制，他无法使用其他解决方案，于是他就着手开发商业级单页Web应用。之后，他被单页应用的发展潜力迷住了，持续不断地设计和开发了很多类似的解决方案。他坚信面向质量设计、创造性地破坏、简约主义和有针对性的测试技巧可以消除单页应用开发的复杂度和混乱。
他是很多开源项目的贡献者，发布了很多jQuery插件。他出席了2012年和2013年的HTML5开发者大会、Developer Week 2003，并出现在旧金山大学和很多公司。近期他的工作是UI架构师、顾问和用户体验工程学的主管。
Josh Powell自从IE6还算好的浏览器开始就已经投身于Web开发。他是一位有着超过13年经验的软件工程师和Web架构师，他痴迷于开发Web应用的技巧，并组建团队来做这件事情。目前他正沉浸于尝试不同的单页Web应用技术，并乐此不疲。
本性使然，他活跃于公开演讲，并出席过单页应用和JavaScript大会，如HTML5开发者大会和NoSQL Now!，从大学到硅谷公司，如Engine Yard、RocketFuel和其他很多公司。他还为www.learningjquery.com和各种在线杂志撰写文章。
两位作者想感谢下面这些人。
Joey Brooks，负责介绍我俩认识的招聘人员。这一切都是你的错，Joey。
John Resig和所有jQuery开发者，你们创建了一个极其专注、可扩展和给力的库。jQuery使得开发单页Web应用更加快速、可靠和有趣。
Ian Smith，编写和维护TaffyDB，这是一个在浏览器中操作数据的强大工具。
Niels Johnson（亦称“Spikels”），他校对书稿以换取对书稿的早期访问。我认为我们是这笔交易的赢家，因为他的评论异常详尽，对最后的编辑非常有用。
Manning公司的Michael Stephens，是他帮助我们理出了首个大纲，并创建了本书的结构。
Bert Bates，他知道如何更好地编写技术书籍，胜于这个星球上的绝大多数人。在思考本书的读者群时，他确实帮了很大的忙。
Karen Miller，我们的开发编辑，在编写这本书的大多数时间里我们都在一起，督促我们及参与到这个过程中的其他人，保持本书的向前推进。
Benjamin Berg，我们的文字编辑，Janet Vail，我们的产品编辑，她擅长沟通交流，使本书得以高效出版，以及所有在这本书上帮助过我们的Manning工作人员。
Ernest Friedman-Hill，我们的技术插图顾问，本书中一些最令人瞩目的插图背后就是他提供的思想。
John J.Ryan，在出版本书之前不久，他很仔细地对最终书稿进行了技术校对。
所有的审阅者，他们对我们编写的内容和代码提供了详尽的分析，这样我们就能够按照需要对其进行简化和增强，他们是Anne Epstein、Charles Engelke、Curtis Miller、Daniel Bretoi、James Hatheway、Jason Kaczor、Ken Moore、Ken Rimple、Kevin Martin、Leo Polovets、Mark Ryall、Mark Torrance、Mike Greenhalgh、Stan Bice 和Wyatt Barnett。
成千上万MEAP版本的购买者、与会人员和同事：他们要求我们对书中演示的解决方案进行优化。
Mike还想感谢下面这些人。
建议我写这本书的Josh Powell。这是一个很棒的主意，也是一次很不错的学习经历。现在请准许我回归原来的生活，好吗？
本书序的撰写者Gregorgy Benson。
Gaurav Dhillon、John Schuster、Steve Goodwin、Joyce Lam、Tim Likarish 和SnapLogic 团队的其他人，他们懂得经济和优雅设计的价值。
Anees Iqbal、Michael Lorton、David Good 和GameCrush团队的其他人。虽然GameCrush 开发的产品并不尽如人意，但它是我曾见过的最接近成功的产品。
我的父母，他们给我买了一台电脑，却拒绝为它购买任何软件。这是学习如何写代码的强大动力。
我忘了提及的每个人。墨菲定律第8条清楚地表明，我忘记的一些很重要的人，只能在本书出版后才会想起来。为此，我真诚地表示歉意并希望你们会原谅我。
Josh想感谢下面这些人。
答应和我一起写这本书的Mike Mikowski。我很高兴我并没有尝试靠自己一个人编写整本书。很傻，很天真！我的意思是……谢谢。
我的兄弟Luca Powell，拥有追随梦想的勇气，创建了一家企业，可以做他自己。是他鼓舞了我。
我家里的其他人还有朋友，没有他们我就不会是现在的我。
让我自由完成本书的John Kelly，他懂得这事儿是得花时间的。它真是花时间！
Mark Torrance，是他指导我成长为经验丰富的开发团队成员，并给了我自由，让我能开始编写这本书。
Wilson Yeung和Dave Keefer，推动我深入学习Web开发的知识。你们对我的职业生涯和软件工程知识及经验产生了最大的影响。
在考虑写这本书的时候，我们设想的是三分之二的内容关注单页Web应用开发的客户端，其他三分之一的内容关注Web服务器和单页Web应用所需要的服务。但我们无法决定使用何种Web服务器。我们使用Ruby/Rails、Java/Tomcat、mod_perl和其他平台编写过大量的传统网站和单页Web应用网站的服务器，它们都各有缺点，尤其是对单页Web应用的支持有所欠缺，这使得我们想要的更多。
最近我们切换到了“纯”JavaScript栈：Web服务器使用Node.js，数据库使用MongoDB。虽然有挑战，但我们发现这经历是令人解脱和信服的。相同的语言和数据格式的好处意义深远，它们比从“多语言栈”（polyglot-stack）中失去的某种语言功能都更为重要。
迄今为止，我们觉得“纯”JavaScript栈可以向读者提供最大的价值，因为我们知道没有其他书本演示如何把各个部分组合在一起。我们认为这种“纯”JavaScript栈会继续受到欢迎，并成为单页应用最常使用的开发方式。
本书导读
第1章介绍单页应用。这一章会对JavaScript单页应用进行定义，并和其他单页应用进行对比。这一章还会比较传统Web网站和单页应用，并讨论使用单页应用的时机、好处和挑战。在这一章的最后，会指导读者开发一个可用的单页应用。
第2章讲解对构建单页应用必需的JavaScript功能和特性。由于单页应用中的所有代码都使用JavaScript编写，并不是事后为了提供一些用户交互而添加的，所以理解语言是如何工作的就非常重要。这一章会讨论变量、格式和函数，还有其他一些高级主题，如执行环境、闭包和对象原型。
第3章介绍本书使用的单页应用架构，也介绍用户接口主模块Shell。Shell会协调功能模块和浏览器相关的事件和数据（如URL和cookie）。这一章还会实现一种事件处理程序和用来管理页面状态的锚接口模式。
第4章详细讲解功能模块，它向单页应用提供定义良好和有作用域的功能。精心编写的功能模块就相当于第三方JavaScript模块。提倡隔离以确保质量和模块化。
第5章演示如何构建Model模块，它将客户端的所有业务逻辑整合在一个名字空间中。Model 负责数据管理和同服务器的交互，从而隔离客户端。这一章还会设计和开发 People API，使用Fake数据模块和JavaScript控制台对Model进行测试。
第6章完成Model的其他工作。这一章会设计和开发ChatAPI，依然使用 Fake数据模块和JavaScript控制台对它进行测试。这一章会引进Data模块，对应用加以修改，以便使用来自Web服务器的真实数据。
第7章介绍Web服务器Node.js。由于单页应用的大多数代码都在客户端，后端可以用任何语言编写，只要它能很好地满足应用的要求即可。后端使用JavaScript编写，可以使编程环境保持一致，并能简化全栈开发。如果之前从没用过Node.js，那么这是很不错的介绍，即使对于一位经验丰富的Node.js开发者，本章也有一些关于单页应用中服务器所扮演角色的深刻见解。
第8章介绍了数据库。我们使用MongoDB，因它是有产品证明的数据库，按JSON文档来存储数据，客户端使用的也是相同的数据格式。在深入了解单页应用中服务器所扮演的角色之前，我们会向没有使用过MongoDB的人做基本介绍。
第9章讲解一些单页应用概念上的细节，它们不同于传统的MVC Web应用：单页应用的搜索引擎优化、收集单页应用的分析数据和记录单页应用中的错误日志。我们也会讲解一些对于传统Web应用很重要的领域知识，它们对单页应用的开发尤其重要：通过CDN快速提供静态资源内容以及栈的各个层级的缓存。
附录A会非常详细地介绍JavaScript的编码标准，它们对读者可能有用也可能没用，但我们已经发现它们是组织单页应用中的JavaScript代码的宝贵指南，使之易测试、易维护并且非常易读。在这里我们会讲解为什么编码标准很重要，组织代码并为之添加文档，命名变量和方法，保护名字空间，组织文件，以及使用JSLint来验证JavaScript。我们还会提供两张Web页面作为读者编码时的参考。
附录B会讲解单页Web应用的测试。测试单页应用可以另外写本书，但它是一个很重要并且很关键的话题，不容忽视。我们讲解了设置测试模式，选择测试框架，创建测试集，以及修改单页应用的模块以便添加测试设置。
读者群体
本书是为 Web 开发人员、架构师和产品经理编写的，他们至少要有一些 JavaScript、HTML和CSS的开发经验。如果你从来没有接触过Web开发，本书不适合你，但不管怎样还是欢迎购买。有很多非常不错的教初学者开发和设计网站的书，但这一本不是。
希望本书成为很好的设计和构建大规模单页应用的指南，这些应用从前端到后端都使用JavaScript。数据库、Web服务器和浏览器应用所使用的语言都是JavaScript。本书大约三分之二的内容专门讲解客户端，最后三分之一的内容演示如何使用 JavaScript 工具（如Node.js和MongoDB）构建服务器。如果你受限于其他服务器平台，大部分的逻辑应该很容易转化，而通信服务则需要一台事件驱动的Web服务器。
编码规范和下载
出现在代码清单或者正文中的以等宽字体显示的源代码，是用来把它和普通文本分隔开的。代码清单中的注释是强调的重要概念。
本书中的示例源代码可以到 Manning 出版社的网站下载：www.manning.com/SinglePageWebApplications。
软件和硬件需求
如果你使用的是最近的Mac OSX或者是Linux电脑，假如你安装了我们在讲解过程中提到的软件，那么对于本书中的练习，很少或者不会有什么麻烦。
如果你使用的是 Windows，对于本书的第一部分和第二部分内容，很少或者不会有什么麻烦。第三部分内容需要一些Windows上没有或者有限制的工具。我们推荐使用免费可用的虚拟机（请查看 http://www.oracle.com/technetwork/server-storage/virtualbox/downloads /index.html）和 Linux 发行版（推荐 Ubuntu Server 13.04，请查看 http:// www.ubuntu.com/download/server）。
作者在线支持
购买这本书将免费获得Manning出版社运营的私有Web论坛的访问权限，在这里可以对本书提出意见、咨询技术问题和得到作者和其他用户的帮助。在 Web 浏览器中打开www.manning.com/SinglePageWebApplications，可以访问和订阅该论坛。注册之后，页面会提示如何使用论坛，在论坛可以得到哪种帮助，以及需要遵守哪些规则。
Manning会向读者保证提供一个场所，在那里读者之间以及读者和作者之间可以进行一些有意义的交流。但不保证作者会有指定量的参与度，他们对作者在线论坛的贡献是自愿行为（并且是没有报酬的）。我们建议你尝试向作者提有挑战性的问题，以免他们对问题提不起兴趣。
只要本书还在印刷，作者在线论坛和之前存档的问题就可以通过 Manning 出版社的网站访问。
本书封面上的图片的标题是“Gobenador de la Abisinia”，或曰阿比西尼亚州长，今天叫做埃塞俄比亚。这幅插图取自首次于1799年出版的“西班牙地区服饰习俗概略”。这本书的标题页写着：
Coleccion general de los Trages que usan actualmente todas las Nacionas del Mundo desubierto,dibujados y grabados con la mayor exactitud por R.M.V.A.R.Obra muy util y en special para los que tienen la del viajero universal.
尽可能按字面意思翻译如下：
在已知的世界中使用的一般服饰的收集作品，由R.M.V.A.R非常精确地设计和印刷。这项工作非常有用，特别是对那些环球旅行者来说。
尽管对设计师、雕刻师和手工为该插图着色的工人一无所知，但是在这张画中，他们“精确”的工作是显而易见的。这本图集作品非常丰富多彩，“Gobenador de la Abisinia”只是很多张图片中的一张。它们的多样性把200年前世界不同国家服饰的独特性和个性化展现得淋漓尽致。
Manning通过将来自这本图集中的图片作为封面的方式来庆祝创造性、主动性和计算机业务的乐趣，也让两个世纪前丰富多彩的生活重新焕发光彩。
阅读本页所逝去的这段时间，有3500万人将花费1分钟的时间来等待传统网站页面的加载。这些旋转图标所消耗的时间，足够好奇号登陆车[1]往返火星96次。传统网站的生产成本是惊人的，这些成本足以让企业毁灭。加载慢的网站会把用户从我们的网站赶走，我们的竞争对手会笑得合不拢嘴，欢迎用户跑进他们的“钱包”。
由于流行的 MVC 服务端框架关注的是为客户端提供一页页的静态内容，这些客户端从本质上说是哑客户端（dumb client），这是传统网站慢的原因之一。例如，当我们在展示幻灯片的传统网站上点击链接时，页面会“闪白”，过几秒钟后所有的东西都会重新加载：导航栏、广告、标题、文本和底部都会重新渲染。然而唯一改变的东西只是幻灯片图片，可能还有描述文字。更糟糕的是，当页面中的某些元素可用的时候却没有任何提示。例如，有时当链接在页面上显现时就可以点击，其他时候得等到重绘100%完成，再过5秒钟才可以点击。对于经验越来越丰富的Web用户来说，这种迟钝的、不一致的和笨拙的体验就变得难以接受。
单页应用（single page web application）[2]是我们准备学习的另外一种更好的开发Web应用的方法。单页应用是在浏览器中运行的桌面应用。因此它具有快速响应的体验，用户会感到惊喜和愉悦，而不是困惑和恼火。在第一部分我们将学习：
单页应用是什么以及它给传统网站带来的好处；
单页应用如何使Web应用更具响应性和更令人着迷；
为了开发单页应用，如何提升JavaScript技能；
如何构建单页应用的示例。
产品设计逐渐被视为商业和企业 Web 应用成功的决定性因素。单页应用经常是提供最佳用户体验的最好选择。因此，我们期待以用户为中心的设计需求，带动更多人采用单页应用，并使之日臻完美。
本章涵盖的内容
定义单页应用
比较最流行的单页应用平台：Java、Flash和JavaScript
编写第一个JavaScript单页应用
使用Chrome开发者工具查看单页应用
探讨单页应用对用户的好处
本书是为Web开发人员、架构师和产品经理而编写的，他们至少要有些JavaScript、HTML和CSS的经验。如果你从来没有涉猎过Web开发，本书就不适合你，但不管怎样还是欢迎购买。有很多非常不错的教初学者开发和设计网站的书，但这一本不是。
希望本书成为很好的设计和构建大规模单页应用的指南，这些应用从前端到后端都使用JavaScript。如图1-1描述，实际上数据库、Web服务器和浏览器应用都使用JavaScript语言。
我们花费了最近的6年时间，主导开发了很多大规模的商业级和企业级单页应用。在这期间，我们不断变更方法以便战胜遭遇的挑战。我们在本书中分享了这些方法，它们帮助我们更快速地进行开发，提供了更好的用户体验，保证了质量，提升了团队的沟通效率。
单页应用是指在浏览器中运行的应用，在使用期间页面不会重新加载。像所有的应用一样，它旨在帮助用户完成任务，比如“编写文档”或者“管理Web服务器”。可以认为单页应用是一种从Web服务器加载的富客户端。
单页应用已经出现了很长一段时间。我们来看一些早期的示例。
井字棋——http://rintintin.colorado.edu/～epperson/Java/TicTacToe.html。嗨，我们没说这游戏会很好玩。这个应用是在井字棋游戏中挑战强大无情的电脑对手。需要安装Java插件，请查看http://www.java.com/en/download/index.jsp。为了能运行这个小程序（applet），你可能需要对浏览器进行授权。
Flash空间登陆器——http://games.whomwah.com/spacelander.html。这是早期的Flash 游戏，大约在2001 年由Duncan Robertson 编写。需要安装Flash 插件，请查看http://get2.adobe.com/flashplayer/。
JavaScript按揭计算器——http://www.mcfedries.com/creatingawebpage/mortgage. htm。这个计算器几乎和JavaScript自己一样古老，但计算完全没问题。不需要插件。
机灵的读者（甚至一些懒散的人[3]）会注意到我们展示了三种最流行的单页应用平台示例：Java小程序、Flash/Flex和JavaScript。上述这些读者可能已经注意到，只有JavaScript单页应用不需要第三方插件就能运行，没有什么开销和安全方面的顾虑。
如今，JavaScript单页应用通常是这三个平台之中的最佳选择。但是 JavaScript花了一段时间才变得具有竞争力，或者说是适用于绝大多数单页应用。我们来看下这是为什么。
在 2000 年以前，Flash和Java小程序发展得很不错。Java被用来在浏览器中运行复杂的应用，甚至是完整的办公套装软件 [4]。Flash成了运行富浏览器游戏的选择平台，还有后来的视频。另一方面，JavaScript主要致力于的，仍旧不过是按揭计算器、表单验证、翻转特效和弹窗而已。问题在于我们无法依靠JavaScript（或者是它使用的渲染方法）在所有流行的浏览器上提供一致的关键功能。尽管如此，JavaScript单页应用还是比Flash和Java小程序拥有很多引人入胜的优势。
不需要插件——用户不用关心插件的安装和维护以及操作系统的兼容性，就能访问应用。开发人员也同样不用为单独的安全模型而担心，这能减少开发和维护时令人头痛的问题[5]。
不臃肿——使用JavaScript和HTML的单页应用，所需的资源要比需要额外运行环境的插件少得多。
一种客户端语言——Web架构师和大多数开发人员需要知道很多种语言和数据格式，HTML、CSS、JSON、XML、JavaScript、SQL、PHP/Java/Ruby/Perl 等。当我们已经在页面上的其他地方使用了JavaScript，为什么还要用Java编写小程序、或者是用ActionScript编写Flash应用呢？在客户端上的所有东西只使用一种编程语言，可以大大地降低复杂性。
更流畅和更具交互性的页面——我们已经看过了网页上的Flash和Java应用。应用通常只显示在某个小方盒内，小方盒周围的很多东西和HTML元素不同：图形widget不一样、右键不一样、声音不一样、与页面的其他部分交互也受到限制。而JavaScript单页应用的话，整个浏览器窗口都是应用界面。
随着JavaScript的成熟发展，它的大部分缺点不是被修复了，就是被缓解了，它的价值优势也水涨船高。
Web浏览器是世界上最广泛使用的应用——很多人会整天开着浏览器窗口并一直使用着。访问JavaScript应用只不过是在书签栏上点击一下罢了。
浏览器中的JavaScript是世界上分布最广的执行环境之一——到2011年12月，每天激活的Android和iOS移动设备差不多有一百万台。每台设备的系统都内置了稳健的 JavaScript 执行环境。最近三年，在世界各地的手机、平板、笔记本电脑和台式机上，发布了超过十亿个稳健的JavaScript实现。
部署JavaScript应用很简单——把JavaScript应用托管到HTTP服务器上后，就能被超过十亿的Web用户使用。
JavaScript对跨平台开发很有用一现在可以使用Windows、Mac OS X或者Linux来创建单页应用，部署了一个单独的应用，不但可以在所有的台式机设备上使用，而且可以在所有的平板和智能手机上使用。我们得感谢趋于一致的跨浏览器标准实现，还有诸如jQuery以及PhoneGap这样成熟的库消除了不一致性。
JavaScript的运行速度变得惊人的快并且有时能和编译型语言匹敌——它的快速发展得益于Mozilla Firefox、Google Chrome、Opera和Microsoft之间持续不断的激烈竞争。现代JavaScript实现利用了诸如即时编译（JIT）成本地机器码、分支预测、类型推断和多线程的高级优化技术 [6]。
JavaScript 逐渐引入了高级功能——这些功能包括 JSON 原生对象、本地 jQuery风格的选择器和更加一致的AJAX功能。使用成熟的库，如Strophie和Socket.IO，推送消息要比以往容易得多。
HTML5、SVG 和CSS3的标准和支持已向前推进——这些进步可以完美地渲染像素级别的图形，这是可以和Java或Flash的生成速度和质量相媲美的。
整个Web项目从头到尾都可以使用 JavaScript——现在我们可以使用卓越的Node.js Web 服务器，使用诸如CouchDB 或者MongoDB来保存数据，它们都用JSON来通信，JSON是一种JavaScript数据格式。我们甚至可以在服务器和浏览器之间共享代码库。
台式机、笔记本甚至移动设备都越来越强大了——多核处理器的普及和G级别的内存，意味着过去在服务器上完成的处理工作，现在可以分给客户端的浏览器了。
有了这些优势，JavaScript单页应用已变得相当流行，对有丰富经验的JavaScript开发人员和架构师的需求也日益旺盛。曾经为多种操作系统（或者是为Java或Flash）开发的应用，如今只需运行一个JavaScript应用即可。创业公司选择使用Node.js作为Web服务器，移动应用开发人员使用JavaScript和PhoneGap为多种移动平台创建“原生的”应用，这只需要一份代码库。
JavaScript并不完美，我们轻而易举就能发现遗漏的、不一致的和其他不喜欢的东西。但所有的语言都一样。一旦适应了它的核心思想，采取最佳方法并学会了哪些部分应该避免使用，JavaScript开发就会变得愉悦和高效。
生成式的JavaScript：殊途同归
我们发现直接使用JavaScript开发单页应用更加容易。我们把这些应用叫做原生的单页应用。另外一种出人意料的流行方法是使用生成式的JavaScript，开发人员使用另一种语言来编写代码，然后再转换成 JavaScript。这种转换要么发生在运行时，要么发生在单独的生成阶段。著名的JavaScript生成器有以下几个。
Google Web Toolkit(GWT)——请查看http://code.google.com/webtoolkit/。GWT使用Java来生成JavaScript。
Cappuccino——请查看 http://www.cappuccino.org/。Cappuccino 使用 Objective-J， Objective-J是Mac OS X上的Objective-C的副本。Cappuccino自身是从Cocoa应用框架移植过来的，Cocoa也源自OS X。
CoffeeScript——请查看 http://coffeescript.org/。CoffeeScript 将一种自定义的语言转换成JavaScript，它提供了一些语法糖。
考虑到Google在Blogger、Google Groups 和其他许多网站上使用了GWT，我们可以放心地说生成式的JavaScript单页应用已被广泛地使用了。这就有个问题：何苦要用一种高级语言来编写代码，然后把它转换成其他语言？这儿有很多生成式的JavaScript仍然很受欢迎的理由，以及为什么这些理由已经没有原来那么令人信服了。
熟悉度——开发人员可以使用更熟悉或者更简单的语言。有了生成器和框架，他们不用学习JavaScript的古怪语法就能进行开发。问题在于，在转换的过程中，最终还是会丢失一些东西。当发生这样的情况时，开发人员不得不查看生成的JavaScript并弄懂它，从而使之正常工作。我们觉得使用抽象层级的语言，还不如直接使用 JavaScript 来得高效。
框架——开发人员明白，在服务端和客户端使用一致的构建库GWT，使得整个体系结构紧密地结合在了一起。这是一个很有说服力的论据，尤其当团队已经具备了很多专业知识和有很多正在研发中的产品。
多目标——开发人员可以用生成器为多个目标编写代码，比如一个文件给Internet Explorer使用，另一个文件给其余的浏览器使用。尽管为不同的目标生成代码听起来很不错，但是我们认为，为所有的浏览器只部署一份JavaScript源代码更加高效。幸亏是趋于一致的浏览器实现和成熟的跨浏览器库（如 jQuery），现在编写复杂的单页应用要简单得多了，无需修改就能在所有主流的浏览器上运行。
成熟度——开发人员认为开发大规模应用，JavaScript没什么结构化可言。然而JavaScript还是逐渐地成为一种更好的语言，有令人印象深刻的优势和容易控制的缺陷。从强类型语言（比如Java）转来的开发人员，有时候觉得类型安全的缺失是不可饶恕的。还有些从有配套框架（比如 Ruby on Rails）转来的开发人员，则对结构化的明显缺失而有所不满。令人欣慰的是，可以结合代码验证工具、代码标准和使用成熟的库来缓解这些问题。
今天，我们相信原生的JavaScript单页应用通常都是最佳选择。这也是我们在本书中要设计和构建的单页应用。
本书演示了如何从前端到后端都使用JavaScript[7]来开发有吸引力的、稳健的、可扩展的和易于维护的单页应用。除非另有说明，否则从这一刻起，当提到单页应用时，我们指的就是原生的JavaScript应用，业务和显示逻辑直接使用JavaScript编写，由浏览器执行。JavaScript利用浏览器技术来渲染界面，如HTML5、CSS3、Canvas或者SVG。
单页应用可以使用许多服务端技术。自从这么多的 Web 应用转移到了浏览器端，通常对服务器的要求就大大地降低了。图1-2展示了业务逻辑和HTML的生成是如何从服务端迁移到客户端的。
在第7章和第8章，我们会重点讨论后端，所使用的Web服务器和数据库的语言都是 JavaScript。你可以不选择这种方式或者可能喜欢另一种后端。这没关系，不管后端使用的是什么技术，本书中使用的大部分单页应用的思想和技术都是有效的。但是如果你想从前端到后端都使用JavaScript，那我们已经为你代劳了。
我们在客户端使用的库，包括用来操作DOM的jQuery，还有历史管理和事件处理的插件。我们使用TaffyD B2来提供高性能的、以数据为中心的模型。使用Socket.IO提供在服务端和客户端之间无缝的、近实时的消息传输。在服务端，使用Node.js作为基于事件的Web 服务器。Node.js使用Google V8 JavaScript引擎，擅长处理成千上万的并发连接。在Web服务器上也使用了Socket.IO。使用的数据库是MongoDB，它是一种NoSQL数据库，使用JavaScript原生的数据格式JSON来保存数据，也有JavaScript API和命令行接口。所有这些都是久经考验和流行的解决方案。
开发单页应用所需要编写的JavaScript代码，在规模上至少要比传统网站大一个数量级，这是因为应用的很多逻辑从服务端转移到了浏览器端。开发一个单页应用，可能需要很多开发人员同时编写代码，最终的代码量可能远远超过 100 000 行。以前为服务端开发而保留的约定和规范，在这种规模下工作是必需的。另外一方面，服务器软件已被简化，只和认证、验证和数据服务相关。在演示示例的过程中，请记住这一点。
现在是时候来开发单页应用了。我们将会采取最佳做法，在讲解的同时会进行解释。
我们的第一个单页应用，目标不太大，在浏览器窗口的右下角显示一个聊天滑块，你可能在Gmail或者Facebook上见过，和它们是类似的。当应用加载时，滑块是收起的。当点击滑块时，它就会展开，如图1-3所示。再次点击，它又会收起来。
除了打开和关闭聊天滑块以外，单页应用通常还会做很多其他的事情，比如发送和接收聊天消息。为了使这个简介示例相对简单和简洁，我们会省略这些麻烦的细节。借用一句名言，单页应用不是一天建成的。不用担心，在第6章和第8章会再来讲解发送和接收消息。
在接下来的几个小节，我们会为单页应用开发创建一个文件，介绍一些我们喜欢的工具、开发聊天滑块的代码以及强调一些最佳做法。我们在这儿给出了很多需要吸收的东西，并不期望你现在就能理解所有的事情，尤其是我们使用的一些JavaScript技巧。在接下来的几章里面，每一个主题都会更详细地进行讨论，但是现在，请放松，不要担心这些鸡毛蒜皮的小事，知道是什么情况就行啦。
我们使用单个文件spa.html来创建应用，外部库只使用jQuery。一般而言，更好的做法是将CSS和JavaScript分成单独的文件，但开始时使用单个文件，对开发和示例都很方便。我们先规定在哪儿放置样式和 JavaScript，还会添加一个<div>容器，在其中编写应用的HTML代码，如代码清单1-1所示。
代码清单1-1 “小荷才露尖尖角”——spa.html
现在已经准备好了文件，我们使用Chrome开发者工具来查看应用的当前状态。
使用Google Chrome 打开清单（spa.html）。看到的是浏览器空白窗口，因为还没有添加任何内容。但底层已有所效果了。我们使用Chrome开发者工具查看一下。
可以点击Chrome右上角的扳手图标来打开Chrome开发者工具，选择“工具”，然后选择“开发者工具”（菜单>工具>开发者工具）。这会显示开发者工具，如图1-4所示。如果没有看到 JavaScript控制台，点击左下角的Activate console按钮就能显示控制台。控制台应该是空白的，这意味着没有JavaScript 警告或者错误。这是正确的，因为当前还没有JavaScript。控制台上方的“Elements”区域显示了HTML代码和页面结构。
尽管我们在这里乃至整本书都使用Chrome开发者工具，但是其他浏览器也有类似的功能。比如，Firefox有Firebug，IE和Safari也都提供了它们自己的开发者工具。
在这本书中，当展示清单的时候，我们将经常使用 Chrome 开发者工具，以便确保HTML、CSS和JavaScript可以很好地在一起工作。现在我们来创建HTML和CSS。
我们需要在HTML中添加一个单独的聊天滑块容器。先在spa.html文件的<style>区块添加容器的样式。对样式部分的修改，如代码清单1-2所示。
代码清单1-2 HTML 和CSS——spa.html
当在浏览器中打开spa.html时，看到的滑块是收起的，如图1-5所示。我们使用了流式布局（liquid layout），界面按显示大小自适应，滑块总是固定在右下角。我们没有给容器添加边框，因为这会增加容器的宽度，从而妨碍开发，因为必须修改容器的大小来适应这些边框。在创建并验证了基本布局之后再来添加边框是很方便的，之后的章节就是这么做的。
现在已经有了视觉元素，该是使用JavaScript给页面添加交互功能的时候了。
我们想使用JavaScript 的最佳写法。有个工具会有所帮忙，它就是由Douglas Crockford编写的JSLint。JSLint是一种JavaScript验证器，能确保代码不会破坏很多明显的JavaScript最佳写法。我们也想使用jQuery，它是一种操作DOM的工具，由John Resig编写。jQuery提供了能很容易实现滑块动画的跨浏览器工具。
在编写JavaScript之前，我们先把想要做的事情列个提纲。第一个脚本标签加载jQuery库。第二个脚本标签会包含我们自己的JavaScript，分成以下三个部分。
（1）声明JSLint设置的头部。
（2）spa函数，创建和管理聊天滑块。
（3）一行在浏览器DOM可用时就调用spa函数的代码。
我们仔细地看一下需要spa函数做什么。经验告诉我们，要用一个区块来声明模块变量，包括配置常量。需要一个函数来切换聊天滑块，需要一个接收用户点击事件的函数，它会调用切换函数。最后，需要一个函数来初始化应用的状态。我们把提纲再细化一下，见代码清单1-3。
代码清单1-3 JavaScript 开发，第一轮——spa.html
这是一个好的开端！我们保持注释的原貌，来添加代码。为清楚起见，注释以粗体显示，见代码清单1-4。
代码清单1-4 JavaScript 开发，第二轮——spa.html
现在来进行spa.html的最后一轮开发，如代码清单1-5所示。先加载jQuery库，然后引入自己的JavaScript，其中包括JSLint设置、spa模块和一行在DOM可用时调用spa模块的代码。spa模块的功能现在是完备的。如果你现在没明白所有的事情，请不用担心，这儿有很多需要吸收的知识，在之后的章节我们会更加详细地讲解所有的内容。这仅仅是一个示例来告诉你能做些什么。
代码清单1-5 JavaScript 开发，第三轮——spa.html
不要过于担心JSLint验证，因为在之后的章节会详细地讲解它的用法。但现在需要讲解一些值得注意的概念。首先，脚本顶部的注释设置了验证偏好。其次，这段脚本和设置会通过验证，没有任何错误和警告。最后，JSLint要求函数在使用前就要声明，因此脚本是“从下往上”读取函数的，级别最高的函数在最后面。
我们使用jQuery，是因为它为基础的JavaScript功能提供了最优的、跨浏览器的工具：DOM的选取、遍历和操作，AJAX方法以及事件。比如，使用jQuery的$(selector).animate(...)方法，就能很容易地编写相当复杂的动画效果：在指定的时间周期内，使聊天滑块从收起到展开做高度变化的动画（反之亦然）。滑块的运动，先缓慢地启动，加速，然后再慢慢地停下来。这种运动叫做缓动，需要帧频计算、三角函数和跨主流浏览器的奇特实现知识。如果我们自己来编写，则需要几十行额外代码。
jQuery(document).ready(function)也帮我们节省了很多工作。只有在DOM可用之后才会运行这个函数。传统为此的做法是使用window.onload事件。由于各种各样的原因，window.onload对于要求很高的单页应用来说并不是一种高效的解决方案，尽管在这里区别不是很大。但是编写在所有的浏览器中都能使用的正确代码，是一件痛苦乏味和繁琐的事情 [8]。
如前面的示例所示，使用 jQuery所带来的好处，大大地超过了它的成本。在上面的示例中，它缩短了开发时间，减小了脚本长度，并提供了稳健的跨浏览器功能。由于jQuery库压缩后的体积很小，并且用户在他们的设备上很可能已经有它的缓存，因此它的使用成本很低甚至可以忽略不计。图1-6演示了动画完成后的聊天滑块。
现在已经完成了聊天滑块的初步实现，我们使用Chrome开发者工具，来看一下应用实际上是如何工作的。
如果Chrome开发者工具你已经用得很顺手了，可以略过此部分内容。如果没有，我们强烈建议你动手试一试。
在Chrome中打开文件spa.html。在它加载完之后，就马上打开开发者工具（菜单>工具>开发者工具）。
你注意到的第一件事可能是，DOM 中有了<div class="spa-slider"...>元素，它已经被模块更改了，如图1-7所示。随着讲解的深入，我们会向应用中添加更多这样的动态元素。
我们可以研究JavaScript的执行情况，请点击开发者工具顶部菜单中的Sources按钮。然后选择包含JavaScript的文件，如图1-8所示。
在之后的章节，我们会把 JavaScript 放在单独的文件中。但对于这个示例，它是在HTML页面中的，如图1-9所示。需要向下滚动才能找到想要查看的JavaScript。
滚动到第76行时，看到的是一条if语句，如图1-10所示。我们应该想在执行该语句之前查看代码，点击左边的空白处添加断点。每当JavaScript解释器到达脚本的这一行时，它会暂停，所以能查看元素和变量，以便我们更好地理解发生了什么事情。
现在回到浏览器，点击滑块。我们将会看到JavaScript停在了76行的红色箭头上，如图1-11所示。当应用暂停的时候，可以查看变量和元素。可以打开控制台，输入各种变量，按下回车键查看该暂停状态下它们的值。我们发现if语句的条件为真（slider_height为16，configMap.retracted_height为16），甚至可以查看configMap对象这样的复杂变量，如控制台的底部所示。当查看完时，可以点击第76行左边的空白处来移除断点，然后点击右上角的Resume按钮（Watch Expressions的上面）。
一旦点击了 Resume 按钮，脚本会从 76 行继续执行，完成滑块的切换。我们回到Elements选项卡，看一下DOM发生了什么变化，如图1-12所示。在图中，我们看到由类spa-slider提供的height CSS属性（请看右下角的Matched CSS Rules），它被元素style的样式覆盖了（元素的style的样式的优先级比class或者id的要高）。如果再次点击滑块，可以观察到随着滑块的收起，高度实时地在发生变化。
我们简短地介绍了 Chrome 开发者工具，只演示了很小的一部分功能，以便帮助我们理解和改变应用底层正在发生的事情。在开发这个应用的时候，我们会继续使用这些工具，并且建议你花费一些闲暇时间学习一下http://mng.bz/PzIJ上的在线手册。磨刀不误砍柴工。
现在已经构建了第一个单页应用，相对于传统网站，我们认为单页应用的主要好处是：它提供了更加吸引人的用户体验。单页应用可以做到一举两得：桌面应用的即时性以及网站的可移植性和可访问性。
单页应用可以和桌面应用一样渲染——单页应用只需重绘界面上需要变化的部分。相比之下，传统网站的许多用户操作都会重绘整张页面，结果是当浏览器从服务器获取数据的时候，页面会假死并有“闪烁”现象，然后再重绘页面上的所有东西。如果页面很大，服务器又繁忙，或者网络连接很慢，这种“闪烁”现象会持续好几秒钟甚至是更长时间，用户只得猜测页面什么时候才可以再次使用。与单页应用的快速渲染和即时反馈相比，这是一种很恐怖的体验。
单页应用可以拥有和桌面应用一样的响应速度——尽可能地把（临时的）工作数据和处理过程从服务端转移到浏览器端，单页应用由此把响应时间缩减至最小。单页应用在本地拥有大多数需要决策判断的数据和业务逻辑，因此是很快的。只有数据验证、授权和持久存储必须要放在服务端，原因我们会在第6章到第8章中进行讨论。传统网站的大多数应用逻辑在服务端，对大部分的用户输入的响应，他们必须等待一个“请求/响应/重绘”的循环周期。与接近即时响应的单页应用相比，这需要花费几秒钟的时间。
单页应用可以和桌面应用一样，把它的状态通知给用户——当单页应用确实必须等待服务器的响应时，可以动态地显示进度条或者繁忙指示器，因此用户不会因延时而困惑。相比传统的网站，用户实际上只能猜测页面何时加载完并可用。
单页应用像网络一样，几乎随处可以访问——不像大多数的桌面应用，用户可以通过任何网络连接和适当的浏览器来访问单页应用。如今，这一名单包括智能手机、平板电脑、电视、笔记本电脑和台式计算机。
单页应用可以像网站一样即时地更新和发布——用户不需要做任何事就能明白它的好处：他们只要重新加载浏览器就行了。维护软件的多个并存版本的麻烦在很大程度上消除了 [9]。开发单页应用的作者，在一天之内就能构建和更新很多次。桌面应用经常需要下载并且安装新版本需要管理访问权限，版本之间的间隔可能是很多个月或者很多年。
单页应用和网站一样，是跨平台的——和大多数的桌面应用不一样，精心编写的单页应用可以在提供现代HTML5浏览器的任意操作系统上运行。尽管这通常被认为是对开发人员的好处，但对很多同时使用多种设备的用户来说是非常有用的，比如工作时用Windows，在家用Mac，Linux服务器，Android手机和Amazon平板电脑。
所有这些好处意味着，你可能会想把下个应用做成单页应用。每次点击后都会重新渲染整张页面的笨拙网站，容易日益疏远富有经验的用户。精心编写的单页应用具有互动和快速响应的界面，还伴有访问网络的功能，这将帮助我们把客户留在属于他们的地方：使用我们的产品。
单页应用已经出现了有一段时间。直到不久前，Flash和Java都是客户端平台上使用最为广泛的单页应用，因为它们的功能、速度和一致性，都超过了那些使用JavaScript和浏览器来渲染的应用。但是最近，JavaScript 和浏览器渲染到达了一个引爆点，它们克服了最为麻烦的缺陷，比其他客户端平台具有显著的优势。
我们关注的是使用原生的JavaScript和浏览器渲染来创建单页应用，除非另有说明，当提及单页应用时，我们指的是原生的JavaScript单页应用。我们的单页应用所使用的工具包括jQuery、TaffyDB2、Node.js、Socket.IO和MongoDB。所有这些工具都是久经考验的流行解决方案。你可以选择采用这些技术的替代者，但是不管特定的技术决策是什么，单页应用的基本结构是不会变的。
我们开发的简单聊天滑块应用，演示了JavaScript单页应用的很多特征。对用户输入的即时响应，使用客户端存储的数据（而不是服务端的数据）进行决策判断。使用了JSLint来确保应用不包含常见的JavaScript错误。还有使用jQuery来选取DOM，为DOM添加动画效果，当用户点击滑块的时候会进行事件处理。我们研究了Chrome开发者工具来帮助我们理解应用是如何工作的。
单页应用可以做到一举两得，桌面应用的即时性，网站的可移植性和可访问性。在超过数十亿计的支持现代Web浏览器的设备上，都能见到JavaScript单页应用，并且不需要专有的插件。只要稍许多做点工作，它就可以支持运行很多种不同操作系统的台式机、平板电脑和智能手机。单页应用的更新和发布很简单，通常不需要用户进行任何操作。所有这些好处说明了为什么你可以把你的下个应用做成单页应用。
在下一章，我们将会探讨一些关键的但是经常会被忽略或者被误解的 JavaScript 概念，这对单页应用开发是需要的。然后在本章开发的示例基础上，改进和扩展这个单页应用。
