8

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

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

4

2 回答 2

28

使用 jQuery Mobile 时首先要考虑的是我应该使用什么样的页面模板。我已经在我之前的一篇文章中谈到了这个话题，现在我需要再澄清一下这个故事的这一部分。

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

多 HTML 页面模板：

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

好的

  • 更小更轻，每个data-role="page"都在一个单独的 HTML 文件中，并且页面结构更加模块化。
  • 如果从 HEAD 内容或任何不是data-role="pšage" div 的内容中删除每个后续 HTML 页面，则可以变得更小。不幸的是，在这种情况下，如果不支持 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 页面架构的秘诀就在中间的某个地方。

于 2013-01-03T22:50:38.380 回答
2

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

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

于 2013-01-03T18:01:45.073 回答