新书：《24 小时学会 jQuery Mobile》

Sams 出版社最近出版了 Phil Dutson 的一本新书《24 小时学会 jQuery Mobile（Sams Teach Yourself jQuery Mobile In 24 Hrs）》，它向 web 开发者介绍了如何使用 jQuery Mobile 构建移动 Web 应用。这本书分为 24 个独立的章节，希望读者在每个章节上花费一个小时。

InfoQ 联系了 Phil，以从总体上了解这本书以及移动 web 应用的开发。

InfoQ：你没有使用任何特定的服务端编程语言，而主要专注于表现层，对于想要阅读本书的程序员来说，在阅读之前你认为至少要拥有哪些经验呢？

Phil：使得 jQuery Mobile 框架如此强大的原因之一就是，刚刚开始 web 开发的开发者就可以使用它，而不需要很多知识。我建议读者拥有足够的 HTML 和 CSS 的知识，从而能够创建网页。尽管这么说，本书还是适用于所有技能等级的开发者。对于新开发者，首先我给出了关于 HTML、CSS 和 JavaScript 的预备课程，然后向他们展示可以如何使用已经具备的知识创建漂亮、功能完整的站点，而不需要经历陡峭的学习曲线。

InfoQ：你曾经提到过，针对触摸屏和鼠标界面的编程有几处关键的区别，比方说 touchstart 和 click 事件之间细微但不容忽视的区别。如果你要列举出一些最重要的区别，会是哪些呢？

Phil：jQuery Mobile 另一种非常适合的情况就是，需要考虑你所使用的设备的支持。你已经指出，touchstart 和 click 事件之间有不容忽视的区别，另一种区别就在于使用 swipe 事件。使用带按钮而没有触摸区域的鼠标的桌面用户无法做出滑动的操作，从而与网站或者应用程序交互，而使用触摸操作的用户需要使用滑动来滚动或者操作数据。另一种在移动设备上常见的事件是按住并保持（tap-and-hold）。jQuery Mobile 针对桌面用户处理了这个事件，让他们可以点击并保持（click-and-hold），从而触发相同的事件。

InfoQ：你发现，使用或者不使用 jQuery Mobile 的时候，开发者在创建网站的移动版本时，出现的最大错误是什么？

Phil：使用 jQuery Mobile 框架当然会让你先了解如何处理当前的大多数移动设备，然而我还看到一些相当差的实现，开发者没有花费时间合适地针对所使用的设备来调整站点的格式。有些站点跳过了很多步骤，像使用内建的网格系统，或者使用大量自定义的 class 处理使得 CSS 过于复杂，这样，当设备从横向转到纵向的时候，就无法正确显示。

不使用 jQuery Mobile，我遇到的最大问题是很奇怪的双击行为，它会发生在 touchstart 和 click 事件没有正确绑定的时候，从而导致在对话框上的点击会穿透到下面（这很多是发生在模态或者对话框窗口和下拉菜单的导航上）。对事件的不合适处理是移动用户非常头疼的严重问题。

InfoQ：你也提到了虚拟的鼠标事件，可以有助于解决移动和桌面应用的兼容性问题，你可否说明这在哪里有用，而在哪里应该避免使用，最好能够提供一些例子？

Phil：如果你曾经在移动设备上访问过使用下拉菜单或者导航栏的站点，那么当你在移动设备上点击的时候，就会被站点闪出菜单的方式弄得很郁闷。这在我和一家特别大型的在线零售商打交道的时候是最大的问题，每次我从移动站点切换到完整站点的时候都会出现。尽管他们现在已经修正了这个问题，但其实当时我们可以检测悬停（hover）事件，并使用虚拟鼠标事件来处理它。你只需要绑定 mouseover 事件，使其在载入页面的 pageinit 阶段运行，就可以处理这种非常复杂的事件。

另一种可以使用虚拟鼠标事件的地方是在使用鼠标输入来绘制或者创建直线的 web 应用程序中。使用这些事件，你可以获得屏幕的精确触点，并过滤那些用来基于触摸或者滑动点跟踪、绘制或者操作的数据。

InfoQ：你在整整一个小时 / 章节中专门讨论视频和音频的编码格式以及各种编码工具。你能否简要地说明，作为移动网站的开发者，知道这些细节为什么很重要？

Phil：这来自于电子商务的视角，富媒体是促进或者突破产品销售的方式之一。随着移动设备销售和激活的剧增，需要一种方式把那些内容传递给消费者。不幸的是，并非所有设备都以统一标准创建，只有很少设备会处理同样的媒体类型。当 Motorola Xoom 发布的时候我了解到的一些事情是，即便它运行 Android，应该拥有大量回放的编解码器，但是在试图播放同一个在 iPad 上可以完美播放的 MP4 文件时，会非常不幸地出现问题。对于想要把视频推送给消费者的 web 开发者来说，知道如何对视频编码，能够以及应该使用哪种编解码器，以及这与文件大小和分发有什么关联都非常重要。对小型的工作室，他们没有财力支持和流视频提供商协作，这尤其重要。另外，还要知道的很重要的一件事是，从那里产出的软件与使用商业解决方案的软件相比，想要得到相同的结果，要付出更多代价。

InfoQ：作为 web 开发者，你在什么时候会考虑创建本地应用（或者使用类似于 titanium 或者 phonegap 的技术创建跨平台的应用程序）而不是移动 web 应用呢？ （根据应用所需要做的事情）

Phil：这真是一个很难回答的问题，我也无法给出快速而可靠的答案。它实际上取决于你的具体情况，以及你想要用应用程序做什么。例如，如果你构建的是游戏，想要压榨出最大的性能、声音和特效，那么很大程度上你应该考虑构建本地应用程序。那并非是说你无法做出让人惊叹的 HTML 5 应用程序，只是说你无法使用移动设备所包含的所有特性。企业级开发者可能对构建混合式应用程序（使用 PhoneGap/Cordova 或者 Appcelerator/Titanium 构建的应用）很感兴趣。这让它们拥有深入设备硬件控制的灵活性，同时还可以加入新特性，检查更新，并支持来自于 web 应用程序端的附加应用程序安全性。

你需要的只是坐下来决定应用程序要做什么，你计划如何分发和更新它，以及它是否依赖于摄像头、gps、加速计等设备控制器。一旦你做出了这个列表，就可以开始专注于应用程序需要什么，然后就可以专心于你所需要开发的内容了。

InfoQ：你使用过其他专门用于移动开发的框架，像 Sencha 和 JQTouch 吗？ 对那些框架有什么看法吗？

Phil：我曾经涉猎过 Sencha，知道一些开发者非常喜欢它。Sencha 是一种非常棒的框架，真正有助于改善本地应用程序的感观。我认为他对于真的想要深入探究框架语义并推动它用于开发支持触摸屏的 web 应用程序的开发者来说非常棒。也就是说，我发现，相对于习惯于使用 jQuery 的人来说，这个框架让更多人可以参与进来。

Dojo Mobile 是另一种我了解过的框架，尽管我发现它在某些属性上非常类似，但我认为它还是有些笨重，在跨设备和浏览器的情况下，无法达到我期望的渲染效果。话虽如此，它是一种非常稳定的框架，构建在另一种非常稳定和测试完备的框架（Dojo）之上。

至于 jQTouch，是我最先开始研究的移动框架中的一种。当我第一次载入该框架的时候，就被其中的主题以及页面转换所吸引。可能熟悉 jQuery 的人不会感到太惊奇，其中的页面转换最初就是从 jQTouch 借用过来的，并做了一些调整。

InfoQ：在各种移动设备之间是否有某些特定的不一致性，如果不存在的话，是否会让开发者的生活更轻松？

Phil：尽管我更愿意花费时间专注于各种移动设备所提供的好东西，但还是有一些设备和平台，并非总是能够表现得很好。对很多设备，触摸 / 点击事件会导致问题，而且确定样式也总是一种痛。在理想的情况下，会有一种浏览器来规定他们的规则，那可能会是基于 Webkit。那并不是说其他设备的本地浏览器不可用，或者说其他移动浏览器像 Opera Mobile 和 Firefox Mobile 在显示移动 web 应用上做得不够好。那只是说，每种设备和浏览器看起来都认为它们知道如何渲染一切，而且他们的方式显然是正确的。这正是 jQuery Mobile 之类的框架起作用的地方，你只需要设计一次，然后框架就会完成大量工作，确保大多数设备都能够尽可能像你最初设计的那样渲染应用程序。的确，它并非总是可以像你期望的方式一样工作（像投下阴影，偶尔圆角看起来会有些偏移），但是通过经常更新，通过框架实现各种支持，会使得开发者的工作变得更轻松。

InfoQ：你可否举个移动网站或者 web 应用的例子，说明它是很优秀、以移动设备为中心的设计？

Phil：有一些站点支持响应式设计，从而为移动设备提供内容，还有不少使用 jQuery Mobile 的站点，在为用户提供优秀移动体验方面做得很棒。Adidas、迪斯尼世界以及 Verizon 都为用户提供了非常好的移动体验。这些网站还支持对于移动用户非常重要的功能——定位程序。尽管这个特性似乎偶尔会被遗忘，但它对于需要找到实体的用户非常重要，或者在迪斯尼世界应用中，可以在公园中找到这个人。如果你能抽出一分钟，那么取出移动设备并快速浏览一下这些站点，你会看到非常易于导航的站点，展示给你简单、清晰的界面，让你能够最大化购物或者找到信息的能力，并且不会耗尽所有带宽。这些站点还能够很好地扩展，所以如果你拥有平板电脑或者大屏幕移动设备的话，你会看到美观、易用的站点。对于其他使用 jQuery Mobile 构建的站点，确保要查看 jQuery Mobile Gallery 。

InfoQ：对于移动 web 应用，你预见到哪些暂时没有，但会很快具备的功能？

Phil：随着浏览器技术和设备速度的提升，本地应用程序和 web 应用程序之间的界限变得越来越模糊。随着 HTML5 发布最终版本的日子越来越近，视频和音频整合的标准也即将确定，而且用不了多久，它们就会在移动设备中完整实现。你现在可以依赖所使用的容器和编解码器播放视频，这让 web 开发者可以提供非常丰富的媒体体验，并对最终用户降低延迟，优化视频和音频的播放。对 websocket 的完整支持还会帮助开发者为实时数据传输创建低带宽的解决方案。另一种值得注意的功能是对 CSS3 在所有移动设备上的完整支持，可以用于转换、动画和样式。CSS3 极大地减少了渲染所需的元素、请求和带宽，从而可以创造出非常炫的应用程序。值得密切关注的项目是 Firefox OS，它会提供一种构建在 HTML5 之上、在 Gecko 引擎中渲染的操作系统。这很有希望成为未来移动 web 开发者获得创意的资源，从而创建并提交他们自己的创意，同时有助于进一步推动移动 web 设备功能的发展。

这篇文章基于《Sams Teach Yourself jQuery Mobile in 24 Hours》这本书，作者 Phil Dutson，由 Pearson/SAMS 在 2012 年 7 月出版，ISBN 是 0672335948，SAMS 出版社 2013 版权所有。想要获得更多信息，请访问出版商的网站

关于书的作者

Phil Dutson 是 ICON Health and Fitness 的首席前端开发工程师，该机构是世界上最大的在线健身设备零售商。在那里他专注于跨多种浏览器和平台创建无缝的客户体验。它曾经从事过 NordicTrack、ProForm、Freemotion、Sears、Costco、Sam’s Club 等项目。他最初是 iFit 项目的团队成员，该项目把 Google Maps 整合到个人锻炼的创建和回放中。Phil 共同创建了“The E-Com DevBlog”——专注于 web 开发和解决方案的开发博客，并且当前在管理它。

查看英文原文： New Book: JQuery Mobile In 24 Hrs