【问题标题】：jquery mobile multiple html files vs multiple page [closed]jquery mobile多个html文件与多个页面[关闭]
【发布时间】：2013-01-03 17:55:12
【问题描述】：

在我的 phonegap/jquery 移动应用中，使用了多页面模型。 index.html 有我的应用程序的所有页面，到目前为止 6 pages 。如果这个应用程序增长太多，变成一个 html 文件中的 19 页，会不会很糟糕？我创建了其他应用程序来测试并为每个页面使用一个 html 文件。但是貌似每次页面改变，整个 DOM 都会重新加载，是吗？

请告诉我哪种结构更适合大型应用程序

【问题讨论】：

标签： javascript jquery jquery-mobile

【解决方案1】：

使用 jQuery Mobile 时首先要考虑的是我应该使用哪种页面模板。我已经在我之前的一个ARTICLES 中谈到了这个话题，现在我需要进一步澄清这部分故事。

简而言之（我不会谈论页面架构，您需要了解的所有内容都可以在之前的链接中找到）。这个答案也可以在 THIS 位置找到，为了透明，这是我的个人博客。

多 HTML 页面模板：

这是一个模板，其中一个 jQuery Mobile 页面被放置在一个 HTML 页面中。

好

更小更轻，每个 data-role="page" 都在一个单独的 HTML 文件中，页面结构更加模块化。
如果每个后续 HTML 页面都从 HEAD 内容或任何不是 data-role="pšage" div 的内容中删除，则可能会变得更小。不幸的是，在这种情况下，如果不支持 JavaScript，则回退是不可能的。
DOM 尺寸比较小，只有第一页永久加载到 DOM 中，其他页面也会加载到 DOM 中但同时在不主动使用时也会被移除，基本上每次从它。
如果不支持 JavaScript，则更好的回退。页面刷新后在桌面浏览器中效果很好，主要是因为每个 HTML 页面都有一个现有的 HEAD 内容。这也使您的应用可以像普通网络应用一样运行，主要是因为可以关闭 AJAX。

...与坏人相比

在每个页面导航生成一个新请求时消耗更多带宽。当从每个页面移出时，将从 DOM 中永久删除，除非启用兑现。
导航回之前加载的页面将再次生成新的请求。
初始页面加载速度很快，但随后的页面加载速度比在多页模板中慢。这可能会在页面转换期间导致问题，在移动设备上更是如此。桌面浏览器没有这个问题。
比移动浏览器更适合桌面浏览器。也适用于更大的应用程序，这也是移动设备的问题。
每次访问页面时都会触发 Pageinit 事件（对于那些不知道此事件的人，该事件会替换 jQuery Mobile 中准备好的文档，因此它应该只运行一次），从而导致多事件绑定出现问题。
不能在任何后续的 HTML 页面中使用多个 data-role="page"，只有初始的可以有多个页面。

多页模板

这是一个模板，其中一个或多个 jQuery Mobile 页面是单个 HTML 文件的一部分。

好

由于所有页面都已加载，因此不会生成额外的页面间导航请求。
文件越大，第一次加载越慢，但随后的页面导航速度很快，因此过渡更加流畅。几乎原生喜欢平滑，强调几乎。
适用于相对较小的应用程序和您了解目标平台功能（包括是否支持 JavaScript）的情况，因此使其成为混合应用程序的绝佳解决方案。它作为 Phonegap 应用程序比多 HTML 模板效果要好得多。
“页面”数据角色元素是必需的。

...与坏人相比

更重。所有页面都在一个 html 文件中。具有许多页面的大型应用程序会增加 DOM 大小。
在使用 Ajax 导航时需要 JavaScript 支持。
存在多个页面容器，并且在页面加载时仅显示第一个。
对内部页面使用 data-ajax="false" 会忽略 data-transition 属性，默认使用幻灯片
样式繁重的页面在移动设备上可能会变得迟缓。

最后，优秀的 jQuery Mobile 页面架构的秘诀就在中间。

【讨论】：

几个 cmets：1) 单页模板不是更轻，而是更重，因为你必须下载一堆你每次都看不到的 HTML你访问一个页面。 2) 您可以在 jQuery Mobile 初始化之前使用任一方法全局关闭 AJAX 导航。 *****)** 最重要的是您发布链接的博客太旧而无法相关。这篇博文现在已经快一年了，对于这个特定的框架来说，那是一段很长的时间，它在去年已经成熟了很多。请参阅我对 Leng 关于细胞信号的回答的评论，这是一个非常重要的考虑因素。
Jasper，您的定义颠倒了，请参阅 JQuery 移动文档。 “单页”是指每个 HTML 文件一页，而“多页”是指每个 HTML 多页。使用这些标准定义，Gajotres 具有正确的要点。他列出的博文可能很旧，但仍然具有相关性。
@donramos 您在评论中发布的定义与我使用的定义相同。 1) 如果您有 5 个单页模板，它们的组合将比您只有一个带有 5 个伪页面的多页模板更重。这是因为第一个 data-role="page" 之外的所有内容都通过网络传输但未使用（被 jQM 剥离）。
使用Phonegap，我有2个模板，第一个5页，第二个8页，在2个单独的html文件index.html，inputs.html。来回导航这 2 个主页时，我收到 Phonegap 错误，因为有时我的数据库对象没有及时初始化，是的，我绑定到 ondeviceready...所以如果您使用的是 Phonegap，请将所有内容放在一个文件。
如果您有递归数据/导航，则多页 html 文件具有很大的浏览器历史限制。例如，您正在编辑树或列表数据结构并使用单个页面来编辑节点#pageNode。在此页面上，您可以遍历节点以加载子节点，但页面保持相同。对于这种结构，我们使用混合方法使用查询字符串参数来识别当前节点。这样我们就可以保存历史。

【解决方案2】：

如果您将每个页面分解为自己的 html 文件，您的代码将更易于维护和更新。

有时您希望在每个页面之间设置动画，或者让输入表单具有多个页面的错觉，但实际上是同一页面上的多个 div。在这些和许多其他情况下，使用一页具有明显的优势。但是，如果您真的不需要这种功能，请拆分您的网站。

【讨论】：

当每个页面都有自己的 html 文件并且发生 changePage 时，它会加载所有 css/js 文件和整个 DOM 吗？慢吗？
如何将代码拆分为多个文档更易于维护（只是想知道您对此的看法）？使用具有多个伪页面的单个文档对于移动设备的延迟有很大的优势。根据当前的活动，手机很容易需要几秒钟的时间来提升其手机信号，因此一次加载它可以减少页面之间的这种提升时间。如果您希望您的网站具有原生的感觉，请使用多页模板。如果您想将桌面网站转换为移动网站，我会使用单页模板，这样您就不必重新创建网站。
@RodrigoDias 在 jQuery Mobile 中加载外部页面时，仅抓取第一个 data-role="page 元素，因此不会抓取后续伪页面，文档的 <head> 中也没有任何内容（或者更具体地说，第一个 data-role="page" 元素之外的任何内容）。
有趣的是，加载外部页面时会抓取内容。在转换到另一个页面时，它会从 DOM 中移除。
@Leng 这是一篇描述这种现象的好文章：stevesouders.com/blog/2011/09/21/making-a-mobile-connection。另外，我知道这是一个不适合 S.O. 的开放式问题。但是这个答案也是如此，你能解释一下你的任何假设吗（例如，使用任何一种方法都有多页表单或页面动画几乎相同）？