《jQuery Mobile入门经典》—— 1.1 为什么要使用jQuery Mobile

简介:

本节书摘来异步社区《jQuery Mobile入门经典》一书中的第1章,第1.1节,作者:【美】Phil Dutson,更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.1 为什么要使用jQuery Mobile

jQuery Mobile入门经典
世界正在变得可移动化。根据预测,移动网站的流量在未来几年将会超越桌面网站的流量。即使是现在,随处可以见到人们在使用移动设备来学习、购物、比价,以及在等待约会时作为消遣。移动设备如此方便,可以随意带到任何地方。

来看一下您是如何使用当前的移动设备的。即使您只拥有一台iPod Touch,我敢打赌,您肯定会通过它查看邮件、查找天气预报并且浏览少量的网页。至于您已经安装的应用,其中一部分很有可能或已经是设计精巧的Web应用了。

当您在手机上浏览的时候,大概已经注意到了越来越多的网站提供了一个移动设备的体验或专门的版本。您可能想知道他们是如何创建这个网站的,或者他们是否使用一个复杂的内部系统或框架来制作这个网站。

当然也可能完全不是那样。您可能注意到,通过智能手机或平板电脑上的移动浏览器载入一个网站的时候,设备可能会因为需要载入过多资源而崩溃。

您知道,一定有一种方法使移动网站具备响应式的、灵活、简单的特性,但从何开始呢?大量的移动开发工具包和套件可以使用,但对它们的支持或它们的可靠性又如何呢?

答案其实很简单:您应该使用jQuery Mobile。

1.1.1 响应式

网站的快速响应与许多因素相关:网页转场时如何显示、轻触一个按钮时发生什么,以及网页内容是如何载入的。

您知道“点击”事件与“触摸”事件是有区别的吗?更重要的是,您知道这两个事件有大约300毫秒的时间差吗?当然,300毫秒听起来不算太多,但如果那是点击按钮之后延迟的1/3秒呢?您会因为感觉到延迟而重新点击一次吗?这是jQuery Mobile可以帮助您改善的问题之一。使用触摸事件能减少延迟,加快网站载入时可以感知到的速度,同时极大地提升用户的满意度。

另一个问题是,移动设备在载入普通网页时要花多长时间。有时候您会看到背景先渲染出来,然后是图片占位框,最后才是文本。我曾经遇到过这样的网站,背景载入后就什么也看不到了,因为要等大幅图片或视频完全载入,导致整个页面停在非常难看的未完成状态。我可没有足够的闲功夫去看它们最终是否载入完毕。一个看不到完整网页或不能正确浏览的非响应式网站,无法提供良好的移动体验。

jQuery Mobile在加载图片等内容时,综合运用延迟加载技术和合适的AJAX技术,解决了页面载入的问题。也就是说,网站首先载入对用户来说最重要的内容,当用户被这些第一时间呈现出来的信息所吸引的时候,再同时载入其他的内容。

1.1.2 灵活

在实际开发过程中,当您投入全部精力到一个框架时,却发现不能对它进行自定义,没有比这更糟糕的事情了。假设您不喜欢框架提供的其中一个小部件怎么办?假设样式很难看或与您的品牌不相匹配怎么办?假设框架可以让您自定义样式,却不允许添加自定义的小部件怎么办?这些问题都很实际,使用jQuery Mobile很容易解决。

如果您不喜欢预置的主题,可以使用ThemeRoller来创建属于自己的主题。假设您喜欢整体的主题样式,但需要一个不同颜色的标题样式怎么办?很简单,您可以使用第二个样式表单来覆盖现有的样式。如果要在灵活更改样式方面做到极致的话,您甚至可以把预置的主题替换成自己的主题,从而可以微调所有设置来满足您的需求或与品牌匹配。

至于小部件,可以随意创建您想要的。因为jQuery Mobile基于jQuery框架,您可以像在非移动网站上那样创建和使用小部件或插件。您需要预先考虑到移动环境的不同点(没有鼠标悬停状态或事件、屏幕尺寸受限、较弱的计算能力等),之后就可以自由自在地使用标准JavaScript或借助jQuery框架来创建想要的小部件或插件,并在移动网站中使用它们。

1.1.3 简单

借助于一些新的HTML5推荐标准以及jQuery框架来创建一个网站相当简单。不需要学习框架专有的标记,只是对现在已经在使用的标记的属性进行修改。

1.1.4 支持度与可靠性

jQuery Mobile基于令人惊讶的jQuery库而创建。jQuery库已经证明是一个快速、高效和可靠的JavaScript库。jQuery已经席卷Web开发领域,并改变了开发者在网站与Web应用开发中执行和使用JavaScript的方式。

jQuery团队致力于让jQuery库成为JavaScript开发的第一选择。以此作为基础,jQuery Mobile确保能获得全面的支持,并在未来成为可信赖的解决方案。jQuery还被微软公司作为首选的JavaScript框架,在Visual Studio中包含了全面的代码自动完成支持。

与jQuery Mobile团队取得联系很简单。他们有专门的博客、论坛和Twitter账号,用于持续讨论更新、特性、有用的提示和指导。jQuery Mobile开发社区正在快速地成长,现在正是投入和参与这一项目的最好时机。

相关文章
|
JavaScript 前端开发 开发者
一篇文章带你用jquery mobile设计颜色拾取器
一篇文章带你用jquery mobile设计颜色拾取器
153 0
一篇文章带你用jquery mobile设计颜色拾取器
|
JavaScript 前端开发 CDN
手把手教你用jQuery Mobile做相册
手把手教你用jQuery Mobile做相册
127 0
手把手教你用jQuery Mobile做相册
|
Web App开发 JavaScript 前端开发
15款优秀的jQuery-Mobile插件
移动互联网迅速发展,PC端的网页并不能完全适应移动端页面需求,响应式设计体验产生并成为潮流。由此也促成了jQuery Mobile的流行。jQuery Mobile这样一款基于jQuery和jQuery UI的框架,继承了jQuery的“write less,do more”精髓,具有良好的扩展性和可定制性,全面兼容各种平台设备,对于不支持的手机类型,也会降级到基础样式。
364 0
15款优秀的jQuery-Mobile插件
|
JavaScript 前端开发 开发者
一篇文章带你用jquery mobile设计颜色拾取器
一篇文章带你用jquery mobile设计颜色拾取器
463 0
|
数据采集 JavaScript 前端开发
手把手教你用jQuery Mobile做相册
手把手教你用jQuery Mobile做相册
796 0
|
JavaScript 前端开发 Android开发