领先技术

移动站点开发,第 5 部分:jQuery Mobile

Dino Esposito

 

Dino Esposito在本专栏中,我就分享关于 jQuery 移动,越来越受欢迎的移动技术的几点思考。

随着越来越多的网站两侧,为移动设备用户提供服务的专门网站,方程的形式很多开发人员和管理人员的头脑中。简单地说,这听起来像如下:如果你爱 jQuery,你就太爱 jQuery 移动。事实是,很多人 (包括我) 爱 jQuery,从而可能大量的开发人员将倾向于使用 jQuery 移动作为默认选择任何移动 Web 开发无任何进一步的思考。

我承认我遵循这种模式完全当我开始移动开发。有时它工作 ; 有时它没还。并且,或许更重要的是,有时我以为它有效,但最终我真的没有得到我的客户正在寻找。

移动开发不是简单的 Web 开发分支。大多数情况下,它并不成功的适应化修改 (嗯,大多简化) 什么你已经有,无论该用例、 布局、 图形、 脚本或其他相关的技术。熟,跨设备移动开发是真正的范式转变凡 UX 先和新类型的专业人员显示出来:信息架构师、 交互设计师和内容的战略家。移动软件往往设计和批准通过模型,然后简单地实施在给定位置和给定的格式显示数据。

但是,请注意技术不应该支配你如何取得您的业务需要 ; 技术只应执行您立即发展目标的手段。这可能听起来相当明显,少收的语句,但 — — 老实说来 — — 多少次你见过违反此规则?你听说过关于"宠物技术"的反模式吗?您可以阅读有关它在 bit.ly/OvJdx0。有时刚巧没有令人信服,或面向业务的原因捡一给定的技术。同样,有时它会发生错误的任务为拾取给定的技术 — — 或者,也许更糟的是尚未,其使用导致给定任务较少比理想方法。

在当今瞬息万变的流动的世界里,让用户体验和战略考虑任何技术是一个巨大的风险。中移动发展用例和视觉来第一次,和技术是唯一的一种手段 — — 应总是如此 !

现在我将重点在本专栏中,jQuery 移动,其强弱点计算你能做什么,而不是你想要做什么的尺度往往来衡量的主题上。你可以阅读更多有关在 jQuery 移动 jquerymobile.org

jQuery 移动一瞥

总体而言,jQuery 移动的最适当定义来自它的网站。它解释了 jQuery 移动是基于 HTML5 的 UI 系统为所有流行的移动设备平台。此外,它说 jQuery 的移动代码生成"逐步增强"记住,结果应具有很容易"主题-能"的设计。此外,jQuery 移动是建在 jQuery 和 jQuery UI 的坚实的基础。不过,许多专业开发人员负责 jQuery 移动是轻量级版本的 jQuery 优化的典型的移动设备的限制。

说实话,jQuery 的移动网站的主页上有什么是精确地库的真谛。jQuery 手机是一个框架,许多开发人员易于使用 — — 或者,至少,它原来是远易于使用比大多数其他框架外面构建移动解决方案。它是一个框架,帮助用户界面的工作移动和基于触摸设备上显示时,好的意见。基于触摸 (和随后面向移动) 的意见不仅易于创建,而且它们还容易将联系在一起的形式与过渡和效果的导航系统。利用设施的 jQuery 移动创建的视图以及与智能手机和工作在某种程度上也与旧的设备,从而导致关键的问题:这真的是够你移动 Web 开发吗?

Jquery 移动手机在哪里?

就个人而言,我已建立一个基于 Web 的应用程序的 UI 旨在笔记本电脑或平板电脑的用户使用 jQuery 移动 — — 没有任何的电话 ! — — 和运作良好。正是在这个时候,我最初设想一些有点密切 jQuery UI 和 jQuery 移动之间的关系。

作为也许听起来令人惊讶,让我们提出一点:JQuery 移动真的是一个移动发展框架吗?

基于技术在 jquerymobile.org 上的描述,应考虑作为主要工具 jQuery 移动基于触摸前端的 ui。一个基于触摸的前端有可能是移动设备 (即,平板电脑或智能手机),但移动 Web 开发有很多方面比刚才的前端。

只安排一些 UI,恰好在设备屏幕小房地产使用 jQuery 移动可能是简单的情况中的工作方法。如果采取作为一个整体的、 全面的办法,但是,它可能会有点过分简单化。

来看一下您可能会发现在超越的 jQuery 移动功能的移动解决方案。首先,你应该有明确的目标,您正在构建,表示通过精选了好的用例、 服务器和客户端之间的明确定义数据流量的网站和列表移动的更重要的是,你型材打算为服务。移动配置文件是一个通用的术语,以指示您的网站拟送达的设备的不同家庭:智能手机、 平板电脑、 笔记本电脑、 智能电视和类似设备建在过去几年左右,或任何手机,可以连接到互联网。

不是每个移动网站需要支持多个设备配置文件,即使这种必要性正变得越来越严格和更迫切。支持多个设备配置文件意味着处理不同的意见和动态调整的目标响应设备特性和功能的基础。我最后一列中 (msdn.microsoft.com/magazine/jj618291) 我向基于服务器端设备描述存储库 (如无线通用的资源文件或 WURFL multi-serving 提出了一种方法 (见 wurfl.sourceforge.net)。什么样的外框支持你从 jQuery 移动这方面?

jQuery 移动和反应迅速的设计

反应迅速的设计是为特定设备提供定制版本页面框架的能力。在本文中,较早前报价 jquerymobile.org 网站,我提到逐步增强为 jQuery 移动框架的支柱之一。渐进增强是自下而上的 Web 设计模式创建页逐步加强在任何浏览器工作的核心。渐进增强是相反的"优雅退化,"选择的自上而下的方法:定义最佳体验,作为正常,你可以如果浏览器未命中一些所需的能力降低。渐进增强可被视为模式使您的 Web 体验更积极的反应。

请注意使 Web 体验更积极的反应可能包括提供一些特设的移动支持,但正在响应在浏览器上并不一定意味着移动客户端为重点。

所以通过使用 jQuery 移动,您可能不担心检测设备功能,因为图书馆保证输出还将在低级别浏览器上。让我们回顾的 jQuery 移动执行渐进增强模式的核心。

浏览器进行分区

JQuery 流动图书馆支持三个浏览器配置文件 — — 名为 A、 B 和 C — — 凡 A 级浏览器接收最增强的标记库可以为服务和 C 级的浏览器只接收纯 HTML 内容与没有额外的功能,例如样式和 AJAX。每个配置文件的特点是浏览器提供图书馆的需求方面的功能的列表。例如,支持 CSS 媒体查询是中移动,jQuery 的关键能力,这是根本的先决条件,浏览器将分为 A 组。除了 CSS 媒体查询,A 级的浏览器支持 JavaScript,AJAX 和完全的文档对象模型 (DOM) 操作。A 级的浏览器是在其全力,运行库和 A 级浏览器列表经常更新的地方。

A 级和 B 级的浏览器之间的基本区别是缺乏支持 AJAX。在 B 级的浏览器,jQuery 移动停止使用 AJAX 页面过渡效果和请求。所以你可能希望能够进行操作成功,但不太愉快的体验。

最后,C 级浏览器大多是旧版浏览器不支持媒体查询和 JavaScript、 CSS 和 DOM 操纵的有限的支持。在 C 级的浏览器,没有标准的 DOM 操作应用于网页元素,和普通的 html。浏览器及职系的最新的矩阵是可在 jquerymobile.com/gbs图 1图 2 A 级和 C 级的浏览器上显示在同一页的呈现方式。

A Sample Page on an A-Grade Android Device
图 1 示例页 A 级 Android 设备上

A Sample Page on a C-Grade Android Device
图 2 示例页 C 级的 Android 设备上

合理,jQuery 流动图书馆没有为 B 级和 C 级浏览器优化。作为图 2 所示,您的用户可能仍会收到很好的治疗,但更重要的是,你有不能控制的。在 HTML 图 1图 2 相当简单,并不包含多于一个无序列表。如果您有与图像、 弹出窗口、 各种长度、 格式和按钮的文本块的更为复杂的页面吗?

jQuery 移动欠其漂亮的图形 (如中所示图 1) 向集约 DOM 操作和 AJAX 功能。A 级的浏览器之外,jQuery 手机只能保证网页是可查看。您可能会发现更突然转换 (没有 AJAX 等) 和更简单的 DOM 操作,或者可能完全回退到纯 HTML。尽管这 jQuery 移动可以为三个不同的视图相同的页,基本的 HTML 仍然相同和转换规则固定的和不受控制。

底线是如果您需要支持以上 A 级的浏览器,你可能会更好滴 jQuery 的手机浏览器分级和介绍自己的逻辑来处理浏览器配置文件和特设的意见 (见图 3)。

Targeting Different Grades of Browsers
图 3 针对不同职系的浏览器

上个月的列中的代码示例提供了此方法的一个示例。

总之,jQuery 移动是基本上不会很好地让您可以使用熟悉的 HTML 元素,创作视图时的 UI 框架。下一步,它将普通 HTML 元素转换为基于触摸的环境中很好的工作和适合于小的屏幕大小的语义上等效对象。jQuery 移动实现渐进增强模式,并不会留下任何浏览器。然而,这并不意味着直接通过 jQuery 移动,您可以有效地处理设备碎片问题 — — 大量的明显不同的移动浏览器和设备。有时你必须提供完全不同的意见,对不同类别的配置文件和甚至确保您分区浏览器根据不同的逻辑。jQuery 移动包括响应 Web 设计的逻辑,并侧重于 CSS 媒体查询。我 2012 年 7 月的专栏文章中所述 (msdn.microsoft.com/magazine/jj190798),CSS 媒体查询很棒,可以使用具有丰富设备 (也许智能手机、 笔记本电脑、 智能电视片) 所有你想要做在哪里复位和隐藏您不能显示的元素。媒体查询需要丰富的浏览器,并且不移动特定功能。

我建议你拥抱 jQuery 移动之前,你问下列问题:它是作为真的很喜欢你的网站的入口点确定以指定某些智能手机 (或类似设备) 吗?如果是的话,然后移动 jQuery 是更多为您的确定。否则为进一步采取并探讨其他选项。

Dino Esposito是《Architecting Mobile Solutions for the Enterprise》(Microsoft Press,2012 年)和《Programming ASP.NET MVC 3》(Microsoft Press,2011 年)的作者,同时也是《Microsoft .NET:Architecting Applications for the Enterprise》(Microsoft Press,2008 年)的合著者。Esposito 定居于意大利,经常在世界各地的业内活动中发表演讲。有关他的情况,请访问 Twitter twitter.com/despos

衷心感谢以下技术专家对本文的审阅:克里斯托弗 · Bennage