jquery移动多个html文件vs多页
在我的phonegap / jquery移动应用程序中，使用了多页面模型。 index.html拥有我的应用程序的所有页面，到目前为止6页。 如果这个应用程序会增长太多而且在单个html文件中变成了19页，那会不会很糟糕？ 我创建了其他应用程序来测试并使用一个html文件到每个页面。 但看起来每次更改页面时，整个DOM都会再次加载，是吗？
请告诉我哪个结构更适合大型应用
如果将每个页面分成自己的html文件，您的代码将更易于维护和更新。
有时您希望在每个页面之间设置动画，或者有一个输入表单，该表单具有多页面的错觉，但实际上是同一页面上的多个div。 在这些和许多其他情况下，使用一个页面具有明显的优点。 但是，如果您不需要这种function，请将您的网站分开。
在使用jQuery Mobile时，首先要考虑的是我应该使用哪种页面模板。 我已经在之前的一篇文章中谈了这个话题，现在我需要更多地澄清这个部分的故事。
为了简化故事（我不打算讨论页面架构，您可以在之前的链接中找到您需要知道的所有内容）。 这个答案也可以在这个位置找到，透明它是我的个人博客。
多HTML页面模板：
这是一个模板，其中一个jQuery Mobile页面放在一个HTML页面中。
好
- 更小更轻，每个data-role =“page”都在一个单独的HTML文件中，页面结构更加模块化。
- 如果每个后续HTML页面都从HEAD内容中剥离，或者任何不是data-role =“pšage” div的内容，则可以变得更小。 不幸的是，在这种情况下，如果不支持JavaScript，则回退是不可能的。
- DOM大小相对较小，只有第一页被永久加载到DOM中，任何其他页面也会被加载到DOM中，但同时它也会在不主动使用时被删除，基本上每次都从它移动。
- 如果不支持JavaScript，则更好地回退。 页面刷新后在桌面浏览器中运行良好，主要是因为每个HTML页面都有现有的HEAD内容。 这也允许您的应用程序像普通的Web应用程序一样运行，主要是因为可以关闭AJAX。
……与坏人相比
- 每个页面导航生成新请求时消耗更多带宽。 当从每个页面移动时，将从DOM中永久删除，除非打开兑现。
- 导航回先前加载的页面将再次生成新请求。
- 初始页面加载速度很快，但后续页面加载比多页模板慢。 这可能会导致页面转换期间出现问题，移动设备更是如此。 桌面浏览器没有此问题。
- 更适合桌面浏览器，然后移动浏览器。 同样适用于大型应用，这也是移动设备的问题。
- 每次访问页面时都会触发Pageinit事件（对于那些不知道这个事件的人来说，这个事件会替换jQuery Mobile中的文档，因此它应该只运行一次），这会导致多个事件绑定的问题。
- 不能在任何后续HTML页面中使用多个data-role =“page”，只有初始页面可以有多个页面。
多页模板
这是一个模板，其中一个或多个jQuery Mobile页面是单个HTML文件的一部分。
好
- 由于已加载所有页面，因此不会生成用于在页面之间导航的其他请求。
- 文件大小越大，第一次加载越慢，但后续页面导航速度越快，从而使转换更加平滑。 几乎像柔和的本土，几乎强调。
- 适用于相对较小的应用程序和情况，您可以了解目标平台的function，包括JavaScript支持，从而使其成为混合应用程序的理想解决方案。 它作为Phonegap应用程序然后多HTML模板工作得更好。
- “page”数据角色元素是必需的。
……与坏人相比
- 重。 所有页面都在一个html文件中。 具有许多页面的大型应用程序将增加DOM大小。
- 使用Ajax导航时需要JavaScript支持。
- 存在多个页面容器，并且在页面加载时仅显示第一个容器。
- 对内部页面使用data-ajax =“false”会忽略数据转换属性，默认情况下使用幻灯片
- 在移动设备上，重度风格的页面可能会变得迟钝。
最后，一个好的jQuery Mobile页面架构的秘密就在中间。