使用jQTouch增强您的下一个移动web应用程序-51CTO.COM

　　对 web 开发的兴趣，包括移动 web 应用程序，从未像现在这般高涨。一些开发桌面或者服务器端应用的开发人员也开始对移动 web 感兴趣。然而，许多人想要将他们目前的 web 开发技巧应用到移动 web 开发中，这样他们就不用学习完全不同的事物了，只为移动用户进行开发。这是他们寻求移动 web 而非本地移动开发的部分原因。在 web 开发的世界中，有很多客户端框架，但是 jQuery 是最流行的。那么，理所当然有很多对 jQuery 非常了解的开发人员对移动 web 开发感兴趣。这些开发人员将会很乐意学习 jQTouch — 一个基于 jQuery 的 web 框架，专为移动 web 开发而设计的。本文将从移动 web 开发人员的角度关注 jQTouch。

　　先决条件

　　本文对 jQTouch 作一简要概述。正如之前所提到的，这个框架是基于 jQuery 的。如果您对 jQuery 有一定了解，那么 jQTouch 对您将并不陌生。虽然本文并不需要熟知 jQTouch 知识，但是 JavaScript、HTML 和 CSS 方面的知识一定要熟悉。这里所有的代码都是纯客户端的，可以被部署到任何 web 服务器上。本文中一起使用 jQTouch 1.0-beta2 和 jQuery 1.3.2。参见参考资料获取这些工具的链接。

　　jQTouch 简介

　　迄今为止，本系列已经介绍了两个 web 应用程序框架，借鉴了大量 Apple 的 Cocoa 应用程序框架。这些框架抽象出 HTML 和 CSS — web 的关键表示技术。Cappuccino 框架甚至提取出许多 JavaScript，使用自己的编程语言 Objective-J 对其进行替换。jQTouch 框架采用一个非常不同的方法。它包括核心 web 技术，使普通的 Web 开发任务更容易、更直观。

　　jQTouch 之所以受欢迎是因为它构建于 jQuery 之上。从技术上来说它是一个 jQuery 插件，添加特定移动功能和样式到应用程序。具体来说，它添加样式和可视效果，旨在利用 iPhone 的功能优势。尽管它的很多特性在其他移动设备上也能很好地工作，jQTouch 设计时无疑参考了 iPhone。我们来看一个构建于 jQTouch 之上的一个简单的移动 web 应用程序。

　　jQTouch 应用程序开发：利用 web 技巧

　　正如前面所提到的，和其他框架（比如 SproutCore 和 Cappuccino）相比，jQTouch 框架采取了一个截然不同的方法来进行 web 应用程序开发。jQTouch 框架和这些框架也有很多共同之处；它同样允许您从您的服务器上检索数据以及在客户端创建整个用户接口。但是，不像这些框架，它不要求您使用此方法。事实上，它不仅仅建立在 JavaScript 上，也建立在 HTML 和 CSS 上。要了解这一点，从基础开始。

　　jQTouch 基础

　　如果您阅读了本系列的前两篇文章，您对这个将要使用 jQTouch 构建的应用程序应该比较熟悉。它是针对内部 web 应用程序的一个员工通讯录。您需要加载您在本系列上两期中所使用的数据。然而，jQTouch 提供更移动友好的用户界面元素，因为它有一个更好的 UI。您将需要以表格形式和清单形式显示数据。从一个主界面开始，如清单 1 所示，该界面允许用户选择表格格式或清单格式的数据。

清单 1. 应用程序要点和主屏幕代码

> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Intranet Employee Directorytitle> 
<style type="text/css" media="screen"> 
@import "jqtouch/jqtouch.min.css";  
style> 
<style type="text/css" media="screen"> 
@import "themes/jqt/theme.min.css";  
style> 
<script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript"   
charset="utf-8">script> 
<script src="jqtouch/jqtouch.min.js" type="text/javascript"   
charset="utf-8">script> 
<script type="text/javascript"> 
var jQT = $.jQTouch({  
icon : 'icon.png'  
});  
script> 
head> 
<body> 
<div class="home"> 
<div class="toolbar"> 
<h1>Employeesh1> 
div> 
<ul class="edgetoedge"> 
<li class="arrow"><a href="#list-style">Lista> 
li> 
<li class="arrow"><a href="#table-style">Tablea> 
li> 
ul> 
div> 
body> 
html>

#p#

　　清单 1 中的代码包含一个 jQTouch 应用程序的基本要点。两个 CSS 文件和两个 JavaScript 文件也包含在内。要使用 jQTouch，这两个 JavaScript 文件您都需要。这些包含 jQuery 库和 jQTouch 插件库。您也需要第一个 CSS 文件（jqtouch.min.css），另一个 CSS 文件是一个可选主题。jQTouch 包括两个主题，一个用来匹配 iPhone (Cocoa Touch) UI，另一个（jqt）较为中性。在清单 1 中，jqt 主题 CSS 文件也包括在其中。最后，您需要初始化 jQTouch 对象。许多选项可以被传送到这个构造函数。在这里，您只要指定一个应用程序图标，如果用户‘安装’ 该应用程序，将会使用这个图标，如图 1 所示。

图 1. 安装到 iPhone 主屏幕的移动 web 应用程序

回到清单 1，余下的代码是基础 HTML。您有一个含有 home 类的 div。这个类没什么特别之处。然而，如果您熟悉 jQuery，那么您将会认出这是 jQuery 中的一个页面。您应用程序中的每个页面（屏幕）在单个 HTML 页面上是一个 div。所以这种情况下，您的页面在顶层有一个 div，含有 toolbar 类。这个特别的类是在核心 jQTouch CSS 文件中定义的几个样式中的一个。接着，您有一个含有 edgetoedge 类的无序列表 — 另一个 jQTouch 样式。这个列表中的每个条目都是链接到 HTML 页面其他部分的链接。此外，它也是另一个常用 jQuery 范式，用于链接一个 web 应用程序中的不同页面。图 2 展示了在清单 1 中创建的应用程序在 iPhone 中的样子。

图 2. iPhone 上的主屏幕

图 2 显示一个相对简单的用户界面；创建它需要的所有代码在清单 1 中，此时您所用是一些 HTML。您清单中的元素也是可点击的，而且它们将导向您应用程序的其他页面。然而，这些页面需要一些加载 Ajax 的数据以正常工作。正如您所看到的，Ajax 是 jQuery 与众不同的另一个方面。

　　使用 jQuery 生成动态数据

　　迄今为止，您已经利用了 jQTouch 为移动设备优化的样式来生成简单的 HTML，并将其变成一个引人注目的移动用户界面。现在生成一个动态清单和一个动态表格。首先检索这些界面的数据，如清单 2 所示。

清单 2. 使用 Ajax 检索数据

$(document).ready(function(){  
$.getJSON('employees.json', function(data){  
data.forEach(addEmployee);  
});  
...  
});  
function addEmployee(e){  
addEmployeeToList(e);  
addEmployeeToTable(e);  
}

　　在清单 2 中，您只用了基本的 jQuery 功能。初始页面加载完成后立即使用 Ajax 从服务器加载数据。这是 Web 开发中的一个常用范式，jQuery 使用 $(document).ready 函数轻松地就可以生成。该函数接受一个函数作为它的输入参数。在这个案例中您使用一个匿名内联函数，也称为一个闭包。这个闭包在在初始页面加载完成后立即执行。jQuery 提供很多方便的函数来处理 Ajax 请求和响应。在这种情况下，数据将被格式化为 JSON，因此，使用 jQuery 的 getJSON 函数，采用一个字符串来表示请求的 URL 端点。这个函数在后台使用一个 XMLHttpRequest 对象生成一个 HTTP GET 来请求这个 URL。

　　当 Ajax 请求从服务器成功返回时，该函数也采用另一函数作为一个回调。（也可以利用另一个可选 callback 函数来处理错误，但是为了保持示例的简洁，我们放弃了使用它。）您再一次传递一个闭包作为 callback 函数；此函数预期接收一个 employee 对象数组 — 在本系列之前的文章中您曾使用过的数据。该回调函数然后使用 Array 对象的 forEach 方法。您可能对这个函数不是很熟悉，因为它在旧版本中没有提供。但是在您锁定的这些更现代的浏览器上，它都是可用的。它使用一个函数作为它的参数，然后依次将这个函数应用到 Array 中的每个对象中。尽管您可以传递另一个闭包给它，而不是将其作为一个引用传递给另一个名为 addEmployee 的函数。该函数授权分离函数，将员工对象添加到列表以及添加到表格。看看这些函数如何使用 jQTouch 动态创建 UI。

　　使用 jQTouch 创建动态 UI

　　回到清单 1 ，您将注意到您的主屏幕已经连接到其他两个页面了，一个是数据的列表视图，另一个是数据的表格视图。我们之前提到过，它利用 jQuery 在页面上使用 div 的约定来代表您的应用程序的各个页面。这些页面的 HTML 如清单 3 所示。

清单 3. 列表和表格的 HTML

<div id="list-style"> 
<div class="toolbar"> 
<h1>Listh1> 
<a class="button back" href="#">Backa> 
div> 
<ul class="edgetoedge" id="eList">ul> 
div> 
<div id="table-style"> 
<div class="toolbar"> 
<h1>Tableh1> 
<a class="button back" href="#">Backa> 
<a class="button flip" href="#new">+a> 
div>   
<table> 
<thead> 
<tr> 
<td>Nametd> 
<td>Phonetd> 
<td>Emailtd> 
tr> 
thead> 
<tbody id="eTable">tbody> 
table> 
div>

再一次强调，上面只是一个简单的 HTML。一次只研究一个页面，在列表页中，您再次有一个使用工具栏样式的嵌套 div。它是一个简单标题，含有链接锚文本。注意到锚点有返回类按钮。再一次说明，这是 jQTouch 提供的一种样式，它将为页面创建一个返回按钮，看起来像源自移动平台的。图 3 显示了这个工具栏在 iPhone 中的效果。

图 3. 列表页面工具栏

正如您所看到的，jQTouch 允许您使用少量代码轻松地创建高质量的界面。返回到清单 3 ，您可以看到您也有一个空的无序列表。注意，它使用 jQTouch 提供的 edgetoedge 风格，如果您想水平拉伸整个屏幕，这是一个很合适的条目。使用您在清单中从服务器检索到的数据来填充这个列表，如清单 4 所示。

清单 4. 创建一个列表

function addEmployeeToList(e){  
var list = $("#eList");  
var text = e.firstName + " " + e.lastName +  
", " + e.phone + ", " + e.email;  
var li = $("<li>").html(text);  
list.append(li);  
}

#p#

　　在典型 web 开发中动态创建 HTML 元素是一个比较繁琐的任务；这再一次成为 jQuery 炫目的地方。清单 4 中的代码是纯 jQuery 代码。您首先可以通过向 jQuery 传递一个 CSS 选择器从清单 3 中获取这个无序列表的一个引用。创建您想要放入列表中的文本，然后使用 jQuery 提供的便捷方法来创建 DOM 元素，并向其中添加一个文本节点。最后，将这个 DOM 元素添加到无序列表中。图 4 使用模拟数据显示了这个列表的样子。

图 4. 列表视图

要创建您的列表，使用一些基本的 jQuery 代码来从服务器检索数据，然后创建一些标准 HTML 元素（以及一个引用 jQTouch 样式的 HTML 框架），这也是创建上述 UI 所必需的。如果您在一个移动设备上测试它，您将注意到它的加载速度很快而且屏幕滚动很流畅。现在看看您如何创建一个表格来显示同样的数据。

　　回到清单 3 ，注意您的表格页面类似于列表页面。它有一个类似的工具栏，只有一个额外按钮。（不久您就会看到这个按钮的功能。）它也有一个纲要表格 — 即，有表头但没有数据。数据和列表中的一样。您只需要为您的表格创建行即可，如清单 5 所示。

清单 5. 创建表行

function addEmployeeToTable(e){  
var table = $("#eTable");  
var tr = $("<tr>")  
.append($("<td>").html(e.firstName + " " + e.lastName))  
.append($("<td>").html(e.phone))  
.append($("<td>").html(e.email));  
table.append(tr);  
}

　　清单 5 中的代码类似清单 4 中的。您可以依赖 jQuery 的便捷方法来创建 HTML DOM 元素，然后一起添加。注意，便利的附加函数允许您使用一个构建器模式来快速创建表行，其中有 3 个单元格。图 5 使用模拟数据显示了表格的样子。

图 5. 表格视图

清单 5 显示了预期的用户界面。您可以使用标准 CSS 使这个表格更漂亮。您可能会注意到在顶部工具栏的右端有一个加号（+）按钮。回到清单 3 ，注意到这个链接连接到另一个名为 New 的页面，也注意一下这链接上的类是按钮翻转。这将再次创建一个本机外观按钮，起链接到新页面的作用。该类的翻转指明 jQTouch 应该使用一个翻转转换。这是一个专有 WebKit CSS 3D 动画，目前仅在 iPhone 中支持，是 jQTouch 易于利用的 2D 和 3D 动画其中的一种。当您点击加号按钮时，将显示一个用于创建新员工表单的页面。清单 6 显示了该页面的代码。

清单 6. 新员工对话框

<div id="new"> 
<div class="toolbar"> 
<h1>Add Employeeh1> 
<a class="button cancel" href="#">Cancela> 
div> 
<form id="addEmp" method="post"> 
<ul> 
<li><input type="text" placeholder="First Name" id="fn"   
name="firstName" /> 
li> 
<li><input type="text" placeholder="Last Name" id="ln"   
name="lastName" /> 
li> 
<li><input type="email" placeholder="Email"   
autocapitalize="off" id="email" name="email" /> 
li> 
<li><input type="tel" placeholder="Phone" id="phone"   
name="phone" /> 
li>   
ul> 
<input type="submit" class="submit" value="Submit"/> 
form> 
div>

清单 6 中的代码是一个简单的 HTML，工具栏是使用一个应用 toolbar 类的 div 创建的。此时，您有一个 Cancel 链接，是使用 button cancel 类设计的。当然 button 类是将这个链接放进一个按钮中的。cancel 类会使链接返回到之前的页面，类似于 back 类。然而，和 back 类有所不同，它将自动使用与转换到该页面效果相反的效果。

　　有了工具栏之后，您就有一个封装在无序列表之内的简单 HTML 表单。您可能会注意到一些不同寻常的事。首先，所有字段都使用占位符属性，这是一个 HTML5 特性，因此会一直显示占位符文本，直至该字段获得焦点。这可以方便地替换对标签的使用，特别是当一个移动屏幕非常小的时候。注意电子邮件输入框有一个设置为 false 的 autocapitalize 属性。这是另一个 iPhone 特有的特性，通知浏览器临时禁用输入该框的文本的 OS 级自动大写。同时我们还注意到，邮件和电话输入类型都是不寻常的（email 和 tel），这是在 iPhone 和 Android 浏览器上都支持的一个特性，当焦点集中在输入字段时，通知浏览器弹出不同的键盘。图 6 显示了每个字段的样子。

#p#

图 6. Android 和 iPhone 浏览器，焦点在 tel 和 email 输入框

最后一点值得注意的是，清单 6 中的表单是 Submit 按钮，注意它的类是 submit。这是另一个使按钮（至少在 iPhone 上）更具吸引力的 jQTouch 类。清单 7 显示了当表单提交后，如何使用 jQTouch 建立一个事件处理程序。

清单 7. 处理表单提交

$(document).ready(function(){  
// Ajax call can be found in Listing 2  
$("#addEmp").submit(function(){  
var e = {  
firstName : $("#fn")[0].value,  
lastName : $("#ln")[0].value,  
email : $("#email")[0].value,  
phone : $("#phone")[0].value  
};  
addEmployee(e);  
jQT.goBack();  
return false;  
});  
});

注意，这是您在清单 2 中所见到的初始化代码的一部分。在这里您使用另一个 jQuery 选择器来获取表单（清单 6 中显示的）的一个引用。jQuery 提供一种简便的方法来劫持表单的 submit 事件。再一次传递一个闭包来处理该事件。在闭包中，创建一个 JavaScript employee 对象，但是从表单中检索值。然后使用您在清单 2 中看到的 addEmployee 函数来将新员工信息添加到列表和记录视图中。接着，使用一个 jQTouch 函数 goBack。其工作方式类似于您之前看到的 Cancel 按钮，转回到上一页。最后，返回 false 来阻止表单提交。显然，该代码只能将员工信息添加到本机屏幕。您可以想像一个可将员工信息添加到共享数据库的服务端 API，而且您可以使用 jQuery 卓越的 Ajax 和表单功能来将数据序列化，然后发送回服务器。这样，在样例应用程序中就完成了所有功能。现在，您已经使用 jQTouch 构建了一个移动 web 应用程序，看看其结果如何。

　　使用 jQTouch 的移动 web 应用程序

　　尽管 jQTouch 框架可能是 jQuery 之上的一个简单插件，它的确通过接受核心 web 技术以及使开发更为容易扩展了 jQuery 框架的理念。它添加大量移动优化的用户界面元素，使您可以轻松地将简单的 CSS 样式应用于 HTML，并获取较为成熟的结果。此外，这些主题和特性（比如页面转换）也为应用程序带来了一种原生感觉。

　　提到处理应用程序逻辑，jQTouch 不像其他架构那样试图提取出工作流。相反地，它依赖功能强大的 jQuery 工具使得表单处理、Ajax、页面转换这类任务变得更为容易。如果您是一名经验丰富的、且习惯于使用 web 应用程序的 web 开发人员 — 使用 web 功能强大的 HTML、JavaScript 和 CSS 组合— 那么，jQTouch 也会非常适合您。您可以快速生成具有吸引力、易于使用的移动 web 应用程序。然而，如果您想采用一个更结构化的方法，那么您将不得不自己添加结构。这极大地改变了通常由一个开发团队来处理的巨大且复杂的应用程序。此外，jQTouch 不改变创建 web 应用程序所涉及到的标准工作流 — 它只是试图让每个工作流步骤更容易。其他框架进一步提取大量步骤，并使用较少的样板文件提供一个更有逻辑的工作流。

　　最后，另一个 jQuery 项目值得一提。这个项目就是 jQuery Mobile 项目（见参考资料），恰如其名。和 jQTouch 不一样，它不是一个插件；它和 jQTouch 一样有很多共同的特性，但是它有更为远大的目标。它的目标是提供更多 UI 小部件，并使它们可以跨平台工作。例如，您构建的应用程序在 Android 手机上运行良好，但是很显然它是用于 iPhone 的。jQuery Mobile 应用程序的设计目的是在 Androids 和 iPhones、以及其他平台上都能良好运行。它不仅仅是一个 jQuery 插件；相反地，它从根本上是为移动电话构建的，转换成更简洁、更灵活的代码：jQTouch 有 69 KB 的 JavaScript 和 8KB 的 CSS，而 jQuery Mobile 只有 12KB 的 JavaScript 和 6KB 的 CSS。写这篇文章时，发布的是该项目的第一个 α 版本，显然还是比较粗糙。然而，如果您对 jQTouch 很感兴趣，及时了解 jQuery Mobile 的最新信息。

　　结束语

　　本文证实了可以应用您的 web 开发技巧来构建一个移动应用程序，只需 jQTouch 提供少量帮助。对于很多开发人员来说，这可能是进行移动开发最直接的方法。如果您是一名 web 开发人员，可能早对 jQuery 有过了解，这使得 jQTouch 更具吸引力。深入挖掘卓越的 jQTouch 文档并探究它的更多的特性。这使得您可以在移动 web 应用程序中更加轻松地使用 iPhone 和 Android 浏览器上可用的很多高级 HTML5 功能。

　　下载源码：intradir-jqtouch.zip
文章出处：IBM developerWorks