Javascript jquery mobile 多个 html 文件 vs 多个页面

jquery mobile multiple html files vs multiple page

提问by Rodrigo Dias

In my phonegap/jquery mobile app, the multi page model is been used. index.html have all the pages of my app, so far 6 pages . If this app would grow too much and it turned to be 19 pages in a single html file, would it be bad? I created other app to test and used one html file to each page. But looks like every time the page is changed, the whole DOM is loaded again, is that right?

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

Please tell me which structure is better for a big app

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

采纳答案by Leng

Your code will be easier to maintain and update if you break each page into its own html file.

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

Sometimes you want to animate between every page, or have an input form that has the illusion of being multiple pages but is in fact multiple divs on the same page. In these and many other cases, using one page has distinct advantages. If you have no real need for that kind of functionality, though, break apart your site.

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

回答by Gajotres

When working with jQuery Mobile first thing to think about is what kind of page template should I use. I have already talk a little bit about this topic in one of my previous ARTICLESand now I have a need to clarify this part of a story a little bit more.

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

To make a story short (I am not going to talk about page architecture, everything you need to know can be found in a previous link). This answer can also be found on THISlocation, to be transparent it is my personal blog.

简而言之（我不打算谈论页面架构，您需要知道的一切都可以在上一个链接中找到）。这个答案也可以在这个位置找到，透明的是我的个人博客。

Multi HTML page template:

多 HTML 页面模板：

This is a template where one jQuery Mobile page is placed inside a single HTML page.

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

Good

好的

• Smaller and lighter, each data-role="page"is inside a separate HTML file and page structure is much more modular.
• Can become even smaller if every subsequent HTML page is stripped from HEAD content, or anything that isn't data-role="p?age"div. Unfortunately in this case fallback if JavaScript is not supported is out of question.
• DOM size is relatively small, only first page is permanently loaded into the DOM, any other page will also be loaded into the DOM but at the same time it will also be removed when not used actively, basically each time you move from it.
• Better fallback if JavaScript is not supported. Works great in desktop browsers after a page refresh, mainly because every HTML page has an existing HEAD content. This also allows your app to behave like normal web app mainly because AJAX can be turned off.

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

...vs the bad

...与坏

• Consumes more bandwidth as each page navigation generates a new request. When moved from every page will be permanently removed from the DOM, unless cashing is turned on.
• Navigating back to a previously loaded page will again generate a fresh request.
• Initial page load is fast but subsequent page loads are slower then in multipage template. This can cause problems during page transitions, more so on mobile devices. Desktop browsers don't have this problem.
• Much more suitable for desktop browsers then mobile browsers. Also suitable for larger applications, again this is problem for mobile devices.
• Pageinit event will be triggered each time page is visited (for those who don't know this an event that replaces document ready in jQuery Mobile and thus it should run only once), which consequently causes problems with multiple event binding.
• Can't use more then one data-role="page" inside any subsequent HTML page, only initial one can have more then one page.

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

Multipage template

多页模板

This is a template where one or more jQuery Mobile pages are part of a single HTML file.

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

Good

好的

• Since all pages are already loaded, no additional requests are generated for navigating between pages.
• First load is slower as the file size is larger, but subsequent page navigation is fast, thus making transitions much more smooth. Almost native like smooth, emphasize on almost.
• Suitable for relatively smaller applications and situations where you know the capabilities of your target platforms including presence of JavaScript support, thus making it a great solution for a hybrid app. It works much much better as a Phonegap app then multi HTML template.
• The "page" data-role element is required.

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

...vs the bad

...与坏

• Heavier. All the pages are in a single html file. Large applications with many pages will increase the DOM size.
• Needs JavaScript support as Ajax Navigation is used.
• Multiple page containers are present, and only the first one is shown when page loads.
• Using data-ajax="false" for internal pages ignores the data-transition attribute, by default slide is used
• Heavily styled pages can become sluggish on mobile devices.

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

In the end, the secret of a good jQuery Mobile page architecture is somewhere in the middle.

最后，一个好的 jQuery Mobile 页面架构的秘诀就在中间。