1.4 认识jQuery Mobile

经过之前的学习，相信读者已经了解什么是跨平台移动开发框架，以及为什么要使用跨平台移动开发框架，接下来就应该选择一款框架来进行学习了。

目前市面上有大量的移动开发框架，最重要的是它们还都是免费且开源的，而且这些框架都各具特色，很难说出哪一款比较好一些。因此，想要选择一款适合自己的开发框架是有一定难度的。

1.4.1 为什么选择jQuery Mobile

笔者刚开始了解到的是jQuery Mobile、Sencha Touch和PhoneGap\Cordova这3个框架。PhoneGap\Cordova不必多说，不管是jQuery Mobile还是Sencha Touch，最终都要靠它来打包成apk文件。但是当初之所以选择jQuery Mobile而不是Sencha Touch，主要是因为关于jQuery Mobile的资料要比Sencha Touch多一些，也因为jQuery Mobile确实比Sencha Touch要容易上手。

自从选择了jQuery Moble，笔者就一路与它一起走到了现在。它华丽的UI控件以及强大的跨平台能力让人一直对它非常放心，图1-28列出了它目前所能支持的平台。

图1-28 jQuery Mobile所支持的平台

除跨平台的特性之外，笔者深深地被jQuery Mobile严谨的开发过程所折服。在jQuery Mobile官网上有jQuery Mobile每一个控件的每一项属性的使用方法，毫不夸张地说，它是当前所有跨平台开发框架中文档最详细的一个，如图1-29所示。

图1-29 jQuery Mobile的文档示例

每一个属性的用法都给出了简单但是非常详细的demo，还可以直接查看运行后的效果，为开发者的学习铺平了道路。

随着后来对jQuery Mobile理解的深入，笔者又发现了它更多的优点，主要包括：渐进式增强的主题界面、简单但是有条理的标记化语言规范和自适应布局，下面分别对其进行介绍。

1.4.2 渐进式增强的主题界面

前面提到过，跨平台框架其实并不能支持所有平台，比如IE 6。在阅读jQuery Mobile的支持手册时发现，jQuery Mobile对浏览器的支持竟然分为了不同级别，如图1-30所示。它使用A、B、C 3种不同的标记来定义这3种不同的级别，用以区分浏览器对于jQuery Mobile的支持程度。其中“A”级别中的浏览器对jQuery Mobile的支持度最低，而C级别的浏览器中jQuery Mobile所显示的样式与WAP页面没有什么不同。

图1-30 主流手机浏览器对jQuery Mobile的支持情况

jQuery Mobile官方对这3种级别的定义如下。

        A:a browser that's capable of, at minimum, utilizing media queries (a requirement
    for jQuery Mobile). These browsers will be actively tested against but may not receive
    the full capabilities of jQuery Mobile.

A类浏览器比较强大，大多数具备对视频/音频的支持，因此jQuery Mobile的开发团队也会主要针对这类浏览器进行测试，因此jQuery Mobile在这类浏览器中的运行效果非常好。

        B:a capable browser that doesn't have enough market share to warrant day-to-day
    testing. Bug fixes will still be applied to help these browsers.

B类浏览器也非常不错，但是由于没有很大的用户群，因此jQuery Mobile的开发团队也不会过多地测试这类浏览器上的使用效果，因此仍然会有bug出现。

        C:a browser that is not capable of utilizing media queries. They won't be provided
    any jQuery Mobile scripting or CSS (falling back to plain HTML and simple CSS).

C类浏览器连许多基本的CSS样式都无法支持，因此jQuery Mobile也无法保证jQuery Mobile在这类浏览器上的运行效果。

有一点是肯定的，即使是C级的浏览器，当它运行jQuery Mobile时依然能够保证使用大多数的功能，如本该是文本框的地方仍然是文本框，只是少了一些样式而已。

1.4.3 简单但是有条理的标记化语言规范

jQuery Mobile沿用了绝大多数的HTML 5命名规范，除少数新引入的数据类型之外，其他内容对于HTML 5开发者来说都是非常熟悉的，图1-31是一个基本的jQuery Mobile框架代码。

图1-31 jQuery Mobile基本的框架代码

现在暂时先不去管它们的具体含意，从图中至少可以得到两点信息：

● 它真的非常像普通的HTML页面。

● 代码的缩进非常整齐。

首先第一条是毋庸置疑的，毕竟它就是基于HTML 5的开发框架，不过可以看到在代码中仅使用了div标签而没有引入新的标签，仅仅通过data-role属性来区分各个部分，并且data-role的命名方式也完全符合HTML 5的命名规范。

其次是代码的缩进，可以看到页面被分成了3个部分，各个部分之间的层次感非常强。相信开发过HTML页面的读者们都有被div的层次搞得晕头转向的经历，但是在jQuery Mobile中，只要把握好页面的结构，这样的事情就绝对不会发生。

1.4.4 响应式布局

在HTML中，对于不同尺寸分辨率屏幕的匹配一直是令开发人员头疼的一个问题，不过在jQuery Mobile中却不需要再为这样的事情发愁。因为jQuery Mobile能够根据屏幕的尺寸自动匹配最合适的样式。图1-32和图1-33是本书后面将要介绍的一个例子，笔者分别在较小的窗口和全屏的浏览器中运行它，对比同一个页面在不同屏幕中的效果。

图1-32 jQuery Mobile运行在全屏的浏览器中（1366×768像素）

图1-33 jQuery Mobile运行在手机屏幕上

通过对比可以发现，虽然屏幕的长宽比例发生了变化，但是却并没有影响整个界面的协调性。jQuery Mobile通过将页面中的全部元素拉伸到占据页面宽度的全部，使得每一行中仅有一个元素来保证不会发生位置上的变形。同时也固定某些控件的相对位置，比如列表每一项右侧的箭头永远在列表项的最右侧。另外，在图1-33中，列表项中实际上有一部分内容是超出屏幕范围的，jQuery Mobile会自动将这部分文字省略隐藏起来，以保证页面整体的美观和协调。

1.4.5 jQuery Mobile的缺点

介绍了jQuery Mobile那么多优点，那它是不是就是一款完美的应用了呢？当然不是。纵然jQuery Mobile有千万条优点，但是却不得不承认它有一个非常致命的缺点——慢。

曾经有人在优酷上做过一个测试，用两台相同的手机同时运行界面相同的APP，它们分别是使用jQuery Mobile通过PhoneGap编译生成的安装文件和使用AppCan生成的文件。其中AppCan生成的应用非常流畅，完全没有卡顿的现象；但使用jQuery Mobile生成的应用，每次进行页面切换时总能感觉屏幕顿了一下，如图1-34和图1-35所示。jQuery Mobile的开发者在API中也多次提到这个问题，但可惜的是一直没有合适的解决方案。

图1-34 使用AppCan生成的应用已经启动，而jQuery Mobile生成的应用还在加载中

图1-35 运行速度很明显不一致

笔者也做过一些测试，发现jQuery Mobile速度慢这一现象在真实应用中并没有测试视频中那么严重，因为毕竟Web应用还需要从网络中读取数据，而这一时间延迟比jQuery Mobile进行页面切换时所耗费的时间要长得多。

另外，在使用jQuery Mobile开发应用时，合理搭配jQuery Mobile各个部件的生命周期也可以有效减少卡顿的情况。笔者曾经试着做过一个与测试视频中几乎完全一样的页面，然后对它的内容进行了一定程度的优化，再利用PhoneGap\Cordova进行封装，在同样的手机中运行发现卡顿现象不见了。也就是说，只要合理安排页面中的元素还是可以避免卡顿的。

还有不可忽略的一点是，随着手机硬件水平的提高，这点运算量终究不会成为阻滞jQuery Mobile向前发展的绊脚石。

1.4.6 jQuery Mobile案例

介绍完jQuery Mobile的优点和缺点之后，接下来就通过几个例子来进一步证明jQuery Mobile确实是一套值得依赖的跨平台移动开发框架。

首先来看看jQuery Mobile开发团队自己做出来的东西，如图1-36和图1-37所示。该应用是jQuery Mobile开发团队设计的jQuery Mobile的说明文档，很明显是使用jQuery Mobile开发的。其界面非常简洁和漂亮，本书第16章就仿照这种样式开发了一款简单的视频播放器。

图1-36 jQuery Mobile说明文档主界面

图1-37 jQuery Mobile说明文档界面

除此之外，斯坦福大学也用jQuery Mobile开发了适合手机访问的校园新闻网站，网址为：

        http://m.stanford.edu

其整体界面简洁大气，如图1-38所示。

图1-38 斯坦福大学的手机网站

WordPress是Web开发者都非常熟悉的开源个人博客，已经有开发者为WordPress开发了基于jQuery Mobile的手机版主题，如图1-39、图1-40和图1-41所示。

图1-39 基于jQuery Mobile的WordPress主题1

图1-40 基于jQuery Mobile的WordPress主题2

图1-41 基于jQuery Mobile的WordPress主题3

图1-42是另一个基于jQuery Mobile的WordPress主题版本，只不过它是为平板电脑设计的。

图1-42 基于jQuery Mobile的WordPress主题

当然，它也有针对手机设计的版本，如图1-43所示。

图1-43 基于jQuery Mobile的WordPress主题

另外，jQuery Mobile的官方网站还提供了许多利用jQuery Mobile开发的应用，如图1-44、图1-45和图1-46所示。在http://www.jqmgallery.com/可以找到更多这样的例子，事实上这个网站也是基于jQuery Mobile的，不得不说这是一件非常有意思的事情。

图1-44 基于jQuery Mobile开发的网站1

图1-45 基于jQuery Mobile开发的网站2

图1-46 基于jQuery Mobile开发的网站3

从这些例子中可以看出，国外利用jQuery Mobile的技术已经非常成熟了，遗憾的是，目前还没有找到国内使用jQuery Mobile比较成功的例子。这与整个业界的技术交流氛围有很大的关系。