详情
本书由浅入深地讲解了HTML5框架的知识及技术应用，并通过各种实例，向读者展示了HTML5作为新一代网页开发的新标准，其内部的规则及演化。全书包括客户端架构、移动Web、为移动Web构造程序、桌面Web、WebSockets、用Web Storage进行优化、Geolocation、Device Orientation API、Web Workers等内容。
书名：HTML5和JavaScript Web应用开发
ISBN：978-7-115-32980-6
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
著 [美] Wesley Hales
译 姚 军
责任编辑 汪 振
人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
读者服务热线：(010)81055410
反盗版热线：(010)81055315
Copyright © 2013 by O’Reilly Media. Inc.
Simplified Chinese Edition, jointly published by O’Reilly Media,Inc.and Posts & Telecom Press,2013.Authorized translation of the English edition,2013 O’Reilly Media, Inc.,the owner of all rights to publish and sell the same.
All rights reserved including the rights of reproduction in whole or in part in any form.
本书中文简体字版由O’Reilly Media, Inc.授权人民邮电出版社出版。未经出版者书面许可，对本书的任何部分不得以任何方式复制或抄袭。
版权所有，侵权必究。
本书主要介绍如何使用HTML5、JavaScript和最新的W3C规范构建可用于所有浏览器和设备的Web应用。全书将通过丰富详实的实例，向读者介绍在应用架构中加入Web Storage、Web Worker、Geolocation、Device Orientation和WebSocket的方法。通过本书的学习，读者将能很快掌握用支持离线客户端的松耦合后端基础架构构建客户端应用的方法。
本书适合熟悉服务器端编程并了解一定HTML5基础知识的开发人员阅读使用。
Wesley Hales是来自乔治亚州亚特兰大的一位用户界面架构师。他已经在创业公司和企业环境中从事UI和用户体验工作十余年。Wesley在JBoss的4年半内参与了多个企业框架的创建（包括JBoss Portlet Bridge和AeroGear项目），还是最近收购的创业公司InstaOps的创始人之一。总体上，Wesley喜欢创建世界级的用户界面和人们喜爱的体验。你有时可以看到他在会议上发表演讲，在wesleyhales.com上看到他的帖子。
本书封面上的动物是烟管鱼科的鳞烟管鱼。因为它细长的外形，所以也被称为管口鱼或者枪鱼。鳞烟管鱼有4个种类，生活在大西洋、西太平洋和印度洋上，多见于珊瑚礁、近海、海草和沙滩上。
鳞烟管鱼是一种细长、长鼻小口的鱼类，可以长到200厘米长。它的脊柱末端有一条特别的细丝，这更增加了其长度。它们以其他鱼类、小型甲壳类和无脊椎动物为食。本书封面的图片取自Wood的《Animate Creation》。
本书是关于使用HTML5和W3C规范构建Web应用的书籍，这两种标准广受所有设备和浏览器的支持。本书适用于需要用JavaScript、CSS和HTML将更多代码移到前端，同时提供低耦合度的后端架构以及离线客户支持的编程人员。
本书的目标是带你经历研究和开发的所有步骤，在当今这个新颖而大胆的世界中，构建移动优先、灵敏、先进的Web应用以及基于任何JavaScript架构的应用程序。每一章都包含了实际的例子，并使用了所讨论的每个规范。
一些W3C核心规范被看作是当今“企业级”Web应用的基石：Web Storage、Web Worker、Geolocation、Device Orientation和Web Socket。在本书的章节中，你将学习如何在移动和桌面环境上使用这些规范，以及处理“分裂”（Fragmentation）的方法。在这期间，你还会发现创建有史以来最引人入胜的应用程序所必须知道的秘密。
许多书都描述了W3C和WHATWG在创造HTML5时的戏剧性情节，许多人都会告诉你，“HTML5”现在是个营销术语。在某种程度上我同意这一观点，但这是片面的说法。我们需要了解的重点（也是本书的焦点）是HTML5全新的特点，以及使用HTML5进行规范开发Web应用会遇到的难点。
编写Web应用的方式正在改变——也将继续地改变。本书试图捕捉HTML5革命的概况，由浅入深地介绍各个主题。你可能是刚刚开始学习Web应用开发的新手，也可能是正在微调现有产品的专家。无论如何，本书都能为你提供构建高级客户端Web应用的基础。
如果你是以编写快速的HTML5驱动应用，以及理解服务器与当今更新颖的客户端概念和技术交互方式为目标的开发人员，这本书就是为你所写的。
如果你刚刚开始学习JavaScript、CSS或HTML，那么这本书就不适合你。在开始阅读本书之前，你可以先学习介绍Web应用开发基础的书籍。本书假设你已经理解Web应用的方法，并且已经使用jQuery、Prototype或者普通的旧DOM API等程序库编写过程序。
还有，如果你相信从服务器端生成标记是未来的方法，也有可能不会喜欢本书。这里介绍的主题针对“离线优先”，以及编写不用操心服务器的现代Web应用的开发人员。推动本书的主要思路是将浏览器当作一个平台。
最后，本书与UI紧密相连。书中有少数服务器端代码的例子（主要在第5章），其他都是JavaScript和CSS客户端代码。
HTML5和移动的世界正在快速变化，我们见证了一场革命，从传统的服务器端概念转向客户端。在这种环境下，纯粹用HTML5和相关规范构建Web应用复杂而具有挑战性。但是，这些标准可以很好地在移动和桌面浏览器之间移植，本书将帮助你面对这种挑战。
第1章和第2章从移动Web的概述开始，帮助你很好地掌握支持本书谈及的标准的浏览器以及你应该支持的浏览器。在这两章中，你将学习如何为浏览器分级，以便开发团队、QA团队和客户能够知道你所支持的浏览器。
第3章直接跳到用HTML5进行移动Web应用开发。这一章为你构建具有原生触摸事件和过渡的应用程序提供出发点。你还将学习用AppCache添加离线支持，根据用户所在的网络类型（3G、Wi-Fi等）动态增强应用程序。
第4章介绍适用于所有浏览器（移动和桌面）的概念和功能，介绍高级服务器端主题，例如压缩和精简，以及能帮助你开发一个构造过程的框架。本章还比较了目前5个最好的JavaScript MVC框架，以及它们与服务器之间的交互方式。和其他只介绍JavaScript MVC基础知识的书籍不同，第4章更深入地介绍了这些框架与服务器的交互。
剩下的章节详细地介绍5个主要HTML5规范的原始实现，以及在现实情境和用例下的使用。每一章都以介绍可用于支持各种技术的框架为结束。
例如，第5章广泛介绍了WebSocket，以及它在客户端和服务器上的应用。这是唯一深入介绍服务器端代码的章节。你将安装一个简单的WebSocket服务器，比较可用于移动和桌面浏览器的框架。另外，本章还包含Socket.IO、Vert.x和Atmosphere的详细对比。
第6章详细介绍了Web Storage。你将了解Google、Yahoo!、Twitter和Amazon是如何在客户端存储数据的，并研究存储数据的最佳方法，并对可用框架进行剖析。
第7章关注Geolocation，讨论用移动Web浏览器跟踪用户的现实应用以及其他概念。本章概述了这种技术的使用方法，以及各种实现中可能遇到的困难。
第8章介绍了Device Orientation API。尽管这不是现存最杰出的规范，但它极具价值和有效的用途。这一章的最后介绍了利用设备方向在移动设备上进行页面导航的实现。
第9章聚焦于Web Worker，研究浏览器中线程的实际用途，不仅介绍了在不同线程中处理质数的方法，还更详细地介绍了其他知识。这一章提供了使用Web Worker处理图像数据的实际示例，并说明了创建自己的线程池的方法。
在本书的最后，你应该适应了可以在你希望支持的浏览器上正常工作的HTML5 Web应用的编写。你将真正理解用HTML5所能构建的功能、可用的框架和今天的Web浏览器。
本书中的例子在http://github.com/html5e上维护。JavaScript和CSS包含在简单的框架Slidfast.js和slidfast.css中。JavaScript有意地不依赖任何其他程序库或者框架。它专门构造用来说明每章中介绍的浏览器提供的核心JavaScript和DOM API。这些框架是学习用的，不是用于公共消费的，你可以从中学习并在必要的地方使用。
本书使用下面的字体约定：
斜体
表示新术语、URL、电子邮件地址、文件名和文件扩展名。
固定宽度
用于程序清单，以及正文段落中对编程元素的引用，如函数名、数据库、数据类型、环境变量、语句和关键字。
固定宽度粗体
展示应该由用户输入的命令或者其他文本。
固定宽度斜体
展示应该由用户提供值或者上下文确定的值代替的文本。
提示
该图标表示提示、建议或者一般的注解。
警告
该图标表示警告或者警示。
本书将帮助你完成工作。一般来说，你可以将本书中的代码用于程序或者文档。你不需要联系我们获得授权，除非你重用大部分代码，即用本书的几个代码块编写程序不需要授权。
应用本书和示例代码回答问题不需要授权，而在你的产品文档中引用本书的大量例子则需要授权。
建议在引用代码时写明出处，包括含书名、作者、出版商和ISBN，例如：“HTML5 and JavaScript Web Apps by Wesley Hales (O’Reilly). Copyright 2013 Hales Consulting, Inc., 978-1-449-32051-5.”
如果你觉得对代码示例的使用超出了上述许可中的正当使用范围，可以发邮件到permissions@oreilly.com联系我们。
Safari Books Online（www.safaribooksonline.com）是一个按需数码图书馆，以书籍和视频的形式交付来自世界顶尖的技术和商业作家的专业内容。
技术专家、软件开发人员、Web设计人员和商业及创意专家都使用Safari Books Online作为研究、解决问题、学习和认证培训的主要资源。
Safari Books Online为组织、政府机构和个人提供产品组合和定价计划。订阅者有权访问数以千计的书籍、培训视频和出版前的手稿，这些来自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 Books Online的信息请访问我们的网站。
请将关于本书的意见和问题寄给出版商：
O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
800-998-9938 (in the United States or Canada)
707-829-0515 (international or local)
707-829-0104 (fax)
我们有一个本书的网页，列出了勘误表、示例和其他信息。你可以通过网址http://oreil.ly/HTML5-JS-Web-Apps 访问该页面。
发送邮件到bookquestions@oreilly.com评论或者询问关于本书的技术问题。
关于我们的书籍、课程、会议和新闻，参见网站http://oreilly.com。
访问Facebook网址http://facebook.com/oreilly。
访问Twitter网址http://twitter.com/oreillymedia。
访问YouTube网址http://www.youtube.com/oreillymedia。
今天，客户端开发显然需要在HTML驱动应用架构中更多地思考和投资。随着Web应用的发展，我们见证了从具有紧耦合模板逻辑以及繁重的后端处理的传统服务器端框架向松耦合的JavaScript的转变，实现任何时候不管是上线还是离线都能运行。
但是，这只是过去的重复吗？在20世纪八九十年代，我们不是已经经历了胖客户端时代（如图1-1所示）吗？
图1-1 20世纪八九十年代风靡一时的胖客户端
和20年前不同，浏览器——如今的客户端平台要强大得多，更不要说移动浏览器了。此外，如今的客户端能够通过浏览器和蜂窝网络报告各种有趣的数据，例如你所在位置的经纬度。
推动浏览器成为客户端平台的另一个因素是许多公司，包括Google、Apple、Mozilla和Microsoft，每周对它们的混合胖客户端技术平台进行数千种改进。
过去，建立严重依赖服务器的应用程序大有益处，这使核心的后端开发人员无须担心DOM操纵和CSS。如果开发人员能够获得与后端代码紧密相关的数据表格或者分页组件，生成兼容IE6到IE8的标记，就很了不起了（见图1-2）。
图1-2 JSF数据表格组件的输出
但是，这种自动生成的标记是要付出代价的，特别是在当今快速变化、分裂的浏览器世界。我们一直都需要灵活可控的标记。开放Web的变化比任何时候都快，用户界面不再允许服务器成为过去的陈腐观念和如前高速可伸缩的前端代码之间的瓶颈，开发人员从未像现在这样关心过浏览器的性能。标记的显示和异步资源的加载可能成就你的应用，也可能毁灭它。更轻快的前端等于更多的线索转化、更高的SEO排名和更低的数据中心成本。
在HTML5和移动设备出现之前，前端（或者UI）开发人员不用关心用户界面后面的架构，眼前充满的是破解（Crack）和专利的插件。许多开发人员专注于支持IE6、Firefox、Safari等少数几种浏览器，他们编写清晰的语义标记，担心XHTML的有效性，偶尔也会导入JavaScript程序库，以创建一些漂亮的效果。
一旦开发人员处理完浏览器的问题和给定应用程序的缺陷，剩下的事情就几乎一样了。高级Web应用程序的架构主要在服务器上被管理。应用程序依赖于入站HTTP请求的速度以及标记显示到用户Web浏览器的速度。利用服务器端模板和组件框架，服务器解析模板，数据与常规的XHTML或者HTML标记交织在一起；对于Java，则可以使用JSP、Velocity、Tiles、GWT或JSF来实现；对于Ruby，可以使用ERB、HAML或者RedCloth，这样的框架还在不断涌现。每个服务器端Web框架都有一个附属或者可以选择的UI模板引擎，这就是过去十几年的UI开发方法，而现在应该考虑建立新一代Web应用的方法了。
你可能会问“为什么我们需要改变前端的生成方式？”或者“为什么我们要将所有代码移到浏览器中运行，而不是在服务器上运行？”因为Web浏览器正在成为一个平台。我们的应用程序现在存在于比其前辈的能力提高了几个数量级的平台（或者浏览器）上。Web应用程序就是这样。我们不再创建网站，而是用HTML5、CSS和JavaScript创建可靠的应用程序。如图1-3所示是HTML5标志。
图1-3 HTML5标志
现在，我们应该回头看看应用程序的构建方法，为客户端编程打下基础。开发人员必须了解，为任何应用程序构建一个可伸缩、稳固的用户界面需要的框架和方法。
不可否认，传统的服务器端模板正逐渐被JavaScript模板所取代。随着许多新JavaScript框架的出现，我们似乎也有些反应过度，但这就是技术发展过程中所出现的现象：由于浏览器变得更加容易移动，并且通过JavaScript API得到更多硬件访问能力，因此驱动UI的技术也在变化。从某种程度来说，客户端和服务器端方法中用户界面的构件是相通的，它们都需要显示和收集数据。我们仍然需要在代码中添加框架专有的标记或者属性，以便知道数据在哪里显示，但是不再需要依赖服务器。现在，我们从间歇性的REST风格和WebSocket连接得到对象和数据，这些连接通过客户端的JavaScript框架自动与UI绑定。我们的应用程序现在能够偶然同步数据，并且拥有离线工作的能力。
为了加强这种能力，处理应用程序的不同状态，我们必须考虑使用新的客户端代码管理方法。jQuery和Prototype之类的JavaScript程序库不能定义前端开发模式，我们应该认真考虑使用跨浏览器DOM来操纵程序库，但是可伸缩客户端架构比以前更复杂了。利用Erich Gamma等人的经典著作《Design Patterns:Elements of Reusable Object-Oriented Software》（http://en.wikipedia.org/wiki/Design_Patterns）（Addison-Wesley Professional，1995）中收集的成熟技术组织代码和应用程序结构只是一个开始。现在，超过40个MVC JavaScript框架自认为是MVC框架，但是它们应该叫做MV*。它们都使用了不同的技术管理模式、视图和控制器，许多框架与原始的Smalltalk MVC概念已经有了很大的不同。尽管JavaScript框架为我们提供了很好的代码组织和构造手段，我们仍然必须自己处理输出硬件级访问的浏览器API，例如Geolocation或者Web Workers。重量级的HTML5驱动用户界面架构仍然处于探索期，但是你很幸运，因为本书能够帮助你看清前方的道路。
Web浏览器正在成为（或者已经成为）应用程序的另一个平台。在选择应用程序支持的时候，对浏览器的考虑至少和服务器端一样重要，我们的前端代码现在打包为HTML5驱动的原生应用、扩展和操作系统。正如我们在Google的Chrome OS和Mozilla的Boot2 Gecko项目中看到的一样，Open Web很明显被看作编写应用程序的一个平台。
HTML5、Open Web和移动设备已经进一步推动了浏览器平台，使浏览器能够在离线状态下存储数据和运行应用，但是许多驱动这一平台的更新标准可能还未完成，或者还未在你针对的所有浏览器上一致地实现。幸运的是，Microsoft、Opera、Google、Apple和Mozilla等浏览器供应商都明确地用各自的浏览器为开发人员提供平台（见图1-4）。
图1-4 可能要出现的浏览器平台
不管你是为大公司还是为新兴的公司工作，你都必须磨练技能，眼光不要停留在漂亮的首页、黑客新闻或者社交网站上，而应该为当前的项目作出有价值的决策。你必须建立和维护编写、测试和调试代码与所选择框架的工作流。这些工作流可能包含许多程序库和过程，从使用JSHint自动化检查IDE，到用应用程序包含的所有JavaScript的精简组合版本测试代码。总而言之，理解并实施Web应用程序或者改进现有应用工具是很有价值的。
客户端应用架构仍然处于初级阶段，随着时间的推移，工具和过程将会越来越好，JavaScript将被看作Web上的汇编语言。但是，在那一天到来之前，我们是前端开发新时代的先锋。现在，抓住这个机会，创建性能强大、可伸缩的应用程序，利用Web提供的最新规范将其推进一步，使其变得更好。
