jquery移动多个html文件与多个页面

Question

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

请告诉我哪个结构更适合大型应用

Answer 1

在使用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文件的一部分.

好

• 由于已加载所有页面,因此不会生成用于在页面之间导航的其他请求.
• 文件大小越大,第一次加载越慢,但后续页面导航速度越快,从而使转换更加平滑.几乎像柔和的本土,几乎强调.
• 适用于相对较小的应用程序和情况,您可以了解目标平台的功能,包括JavaScript支持,从而使其成为混合应用程序的理想解决方案.它作为Phonegap应用程序然后多HTML模板工作得更好.
• "page"数据角色元素是必需的.

......对坏人

• 重.所有页面都在一个html文件中.具有许多页面的大型应用程序将增加DOM大小.
• 使用Ajax导航时需要JavaScript支持.
• 存在多个页面容器,并且在页面加载时仅显示第一个容器.
• 对内部页面使用data-ajax ="false"会忽略数据转换属性,默认使用幻灯片
• 在移动设备上,重度风格的页面可能会变得迟钝.

最后,一个好的jQuery Mobile页面架构的秘密就在中间.

Answer 2

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

有时您想要在每个页面之间进行动画处理，或者有一个输入表单，它看起来像是多个页面，但实际上是同一页面上的多个 div。在这些以及许多其他情况下，使用一页具有明显的优势。但是，如果您并不真正需要此类功能，请拆分您的网站。