《jQueryMobile快速入门》——2.2多页面模板

本节书摘来异步社区《jQuery Mobile快速入门》一书中的第2章&＃xff0c;第2.2节&＃xff0c;作者&＃xff1a;【美】Brad Broulik&＃xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2　多页面模板

jQuery Mobile快速入门
jQuery Mobile支持在一个HTML文档中嵌入多个页面的能力&＃xff0c;如程序清单2-3所示。该策略可以用来预先获取最前面的多个页面&＃xff0c;当载入子页面时&＃xff0c;其响应时间会缩短。在下面的例子中可以看到&＃xff0c;多页面文档与我们前面看到的单页面文档相同&＃xff0c;第二个页面附加在第一个页面后面的情况除外。多页面的具体细节在程序清单2-3中有突出显示&＃xff0c;并会在下面进行讲解。

b6616c4da0c48f71954344e4d470ac8fea24b10d

1&＃xff0e;多页面文档中的每一个页面必须包含一个唯一的id。每个页面可以有一个page或dialog的data-role。最初显示多页面时&＃xff0c;只有第一个页面得到了增强并显示出来。例如&＃xff0c;当请求multi-page.html文档时&＃xff0c;其id为“home”的页面将会显示出来&＃xff0c;原因是它是多页面文档中的第一个页面。如果想要请求id为“contact”的页面&＃xff0c;则可以通过在多页面文档名的后面添加#号&＃xff0c;以内部页面的id名方式来显示&＃xff0c;此时就是multi-page.html#contact。当载入一个多页面文档时&＃xff0c;只有初始页面会被增强并显示。后续页面只有当被请求并被缓存到DOM内时&＃xff0c;才会被增强。对于要求有快速响应时间的页面来说&＃xff0c;该行为是很理想的。为了设置每一个内部页面的标题&＃xff0c;可以添加data-title属性。

2&＃xff0e;当链接到一个内部页面时&＃xff0c;必须通过页面的id来引用。例如&＃xff0c;contact页面的href链接必须被设置为href&＃61;“#contact”。

3&＃xff0e;如果你想查看特定页面中的脚本&＃xff0c;则它们必须被放置在页面容器内。该规则同样也适用于通过Ajax载入的页面&＃xff08;我们将在下一节详细介绍&＃xff09;。例如&＃xff0c;在multi-page.html#contact的内部声明的任何Javascript无法被multi-page.html#home来访问。只有活跃页面的脚本可以被访问。但是&＃xff0c;在父文档的head标签内声明的所有的脚本&＃xff0c;包括jQuery、jQuery Mobile和你自己的自定义脚本&＃xff0c;都可以被内部页面和通过Ajax载入的页面来访问。

2.2.1　设置内部页面的页面标题

需要重点注意的是&＃xff0c;内部页面的标题&＃xff08;title&＃xff09;可以按照如下优先顺序进行设置。

1&＃xff0e;如果data-title值存在&＃xff0c;则它会用作有内部页面的标题。例如&＃xff0c;“multi-page.ht ml#home”页面的标题将被设置为“Home”。

2&＃xff0e;如果不存在data-title值&＃xff0c;则页眉&＃xff08;header&＃xff09;将会用作内部页面的标题。例如&＃xff0c;如果“multi-page.html#home”页面的data-title属性不存在&＃xff0c;则标题将被设置为页面header标记的值“Welcome Home”。

3&＃xff0e;最后&＃xff0c;如果内部页面既不存在data-title&＃xff0c;也不存在页眉&＃xff0c;则head标记中的title元素将会用作内部页面的标题。例如&＃xff0c;如果“multi-page.html#page”页面不存在data-title属性&＃xff0c;也不存在页眉&＃xff0c;则该页面的标题将被设置为其父文档的title标记的值“Multi Page Example”。

重要&＃xff1a;

当链接到一个包含多个页面的页面时&＃xff0c;必须为其链接添加rel&＃61;“external”。

050ae166f08868e7098c1bc611b50354a8bfe67a

这将会执行一个全页面的刷新。由于jQuery Mobile无法将一个多页面文档载入到活动页面的DOM中&＃xff0c;因此会用到这个刷新。jQuery Mobile之所以无法将多页面文档载入到DOM中&＃xff0c;是因为它使用了URL&＃xff08;#&＃xff09;&＃xff0c;由此产生了命名空间冲突。

jQuery Mobile使用#来识别多页面文档中的内部页面。

此外&＃xff0c;由于jQuery Mobile使用了#来识别DOM内的唯一页面&＃xff0c;因此无法使用锚标签书签特性&＃xff08;index.html#my-bookmark&＃xff09;。jQuery Mobile会将my-bookmark当作一个页面识别符&＃xff0c;而不是当作书签。Ajax驱动的导航将在下面的小节进行详细讲解。

2.2.2　单页面文档与多页面文档的对比

你需要确定页面访问的发展趋势&＃xff0c;以方便从带宽和响应时间的角度来选择最合适的广式。多页面文档在最初载入时&＃xff0c;会占用较多的带宽&＃xff0c;但是只需要向服务器发送一个请求即可&＃xff0c;因此它们的子页面会以相当短的响应时间载入。而单页面文档尽管占用的带宽较少&＃xff0c;但是每访问一个页面&＃xff0c;就需要向服务器发送一个请求&＃xff0c;因此响应时间会比较长。

如果你通常会按顺序访问多个页面&＃xff0c;则最为理想的方式是将它们放置在同一个文档内的最前面&＃xff0c;以方便载入。这样尽管最初占用的带宽会略高&＃xff0c;但是在访问下一个页面时&＃xff0c;可以实现即时响应。如果用户同时访问两个页面&＃xff08;尽管概率很低&＃xff0c;但毕竟存在&＃xff09;&＃xff0c;则可以将文件单独存放&＃xff0c;从而在初次载入时能够消耗较少的带宽。

现在有一些可用的工具&＃xff0c;可以辅助收集页面访问趋势或者其他度量&＃xff0c;从而帮助优化页面访问方式。例如&＃xff0c;Google Analytics1或Omniture2都是常见的用于分析移动Web应用程序的解决方案。

提示&＃xff1a;

在大多数情况下&＃xff0c;建议使用单页面模型&＃xff0c;然后在后台将常用的页面动态添加到DOM中。通过为我们希望动态载入的任何链接添加data-prefetch属性&＃xff0c;即可实现该行为。