本节书摘来异步社区《jQuery Mobile快速入门》一书中的第2章，第2.2节，作者：【美】Brad Broulik，更多章节内容可以访问云栖社区“异步社区”公众号查看。
2.2 多页面模板
jQuery Mobile快速入门
jQuery Mobile支持在一个HTML文档中嵌入多个页面的能力，如程序清单2-3所示。该策略可以用来预先获取最前面的多个页面，当载入子页面时，其响应时间会缩短。在下面的例子中可以看到，多页面文档与我们前面看到的单页面文档相同，第二个页面附加在第一个页面后面的情况除外。多页面的具体细节在程序清单2-3中有突出显示，并会在下面进行讲解。
1．多页面文档中的每一个页面必须包含一个唯一的id。每个页面可以有一个page或dialog的data-role。最初显示多页面时，只有第一个页面得到了增强并显示出来。例如，当请求multi-page.html文档时，其id为“home”的页面将会显示出来，原因是它是多页面文档中的第一个页面。如果想要请求id为“contact”的页面，则可以通过在多页面文档名的后面添加#号，以内部页面的id名方式来显示，此时就是multi-page.html#contact。当载入一个多页面文档时，只有初始页面会被增强并显示。后续页面只有当被请求并被缓存到DOM内时，才会被增强。对于要求有快速响应时间的页面来说，该行为是很理想的。为了设置每一个内部页面的标题，可以添加data-title属性。
2．当链接到一个内部页面时，必须通过页面的id来引用。例如，contact页面的href链接必须被设置为href=“#contact”。
3．如果你想查看特定页面中的脚本，则它们必须被放置在页面容器内。该规则同样也适用于通过Ajax载入的页面（我们将在下一节详细介绍）。例如，在multi-page.html#contact的内部声明的任何JavaScript无法被multi-page.html#home来访问。只有活跃页面的脚本可以被访问。但是，在父文档的head标签内声明的所有的脚本，包括jQuery、jQuery Mobile和你自己的自定义脚本，都可以被内部页面和通过Ajax载入的页面来访问。
2.2.1 设置内部页面的页面标题
需要重点注意的是，内部页面的标题（title）可以按照如下优先顺序进行设置。
1．如果data-title值存在，则它会用作有内部页面的标题。例如，“multi-page.ht ml#home”页面的标题将被设置为“Home”。
2．如果不存在data-title值，则页眉（header）将会用作内部页面的标题。例如，如果“multi-page.html#home”页面的data-title属性不存在，则标题将被设置为页面header标记的值“Welcome Home”。
3．最后，如果内部页面既不存在data-title，也不存在页眉，则head标记中的title元素将会用作内部页面的标题。例如，如果“multi-page.html#page”页面不存在data-title属性，也不存在页眉，则该页面的标题将被设置为其父文档的title标记的值“Multi Page Example”。
重要：
当链接到一个包含多个页面的页面时，必须为其链接添加rel=“external”。
这将会执行一个全页面的刷新。由于jQuery Mobile无法将一个多页面文档载入到活动页面的DOM中，因此会用到这个刷新。jQuery Mobile之所以无法将多页面文档载入到DOM中，是因为它使用了URL（#），由此产生了命名空间冲突。
jQuery Mobile使用#来识别多页面文档中的内部页面。
此外，由于jQuery Mobile使用了#来识别DOM内的唯一页面，因此无法使用锚标签书签特性（index.html#my-bookmark）。jQuery Mobile会将my-bookmark当作一个页面识别符，而不是当作书签。Ajax驱动的导航将在下面的小节进行详细讲解。
2.2.2 单页面文档与多页面文档的对比
你需要确定页面访问的发展趋势，以方便从带宽和响应时间的角度来选择最合适的广式。多页面文档在最初载入时，会占用较多的带宽，但是只需要向服务器发送一个请求即可，因此它们的子页面会以相当短的响应时间载入。而单页面文档尽管占用的带宽较少，但是每访问一个页面，就需要向服务器发送一个请求，因此响应时间会比较长。
如果你通常会按顺序访问多个页面，则最为理想的方式是将它们放置在同一个文档内的最前面，以方便载入。这样尽管最初占用的带宽会略高，但是在访问下一个页面时，可以实现即时响应。如果用户同时访问两个页面（尽管概率很低，但毕竟存在），则可以将文件单独存放，从而在初次载入时能够消耗较少的带宽。
现在有一些可用的工具，可以辅助收集页面访问趋势或者其他度量，从而帮助优化页面访问方式。例如，Google Analytics1或Omniture2都是常见的用于分析移动Web应用程序的解决方案。
提示：
在大多数情况下，建议使用单页面模型，然后在后台将常用的页面动态添加到DOM中。通过为我们希望动态载入的任何链接添加data-prefetch属性，即可实现该行为。
这种混合方式可以让我们有选择性地选择想要载入和缓存的链接。再次强调，只建议将该方法用于需要频繁访问的页面，原因是该行为会引发一个额外的HTTP请求，以动态载入页面。
