组织jQuery Mobile应用程序的最佳实践是什么？

Question

我发现了article撇开这一点。但我的主要问题是每个屏幕都需要单独的.html文件吗？我想是的，但我想要一致投票。另外，这是否也适用于单独的JS文件呢？

编辑：JQM应用程序基本上是管理用户和角色。

Answer 1

我们有一个生产jQM网站这里是我们如何做的事情 - 是的，其他人可能会不同意，但我们发现这适用于一个非常大的网站。

1. 使用多个单一的HTML页面，一个大型的多页面模板击败JQM的Ajax加载的好处，因为你加载所有的HTML在启动（除非你的网站是小）

2. 你一定要使用AJAX加载，JQM只吸入代码在你<div data-role="page">但这种复杂的JS见下文

3. 你不需要多个JS文件，但你需要所有的JS在开始加载，我们通过做两件事来实现这一点：1.我们将on侦听器放在文档根目录下，并监听pageinit/pageshow事件。每次加载页面时，都会触发这些页面，您也可以方便地参考当前页面，并且可以使用页面上的attr来确定页面的位置。 2.让所有JS都包含某种类型（希望您使用的是PHP，CF或其他），并将其放在每个页面上，这样，无论用户通过哪个入口点浏览您的移动网站，所有的代码加载

的缺点是，所有的JS最初加载，但精缩我们发现这没什么大不了的，如果它是真的关心考虑RequireJS - 再加上它使得由于JS调试变得轻而易举在那里，我们可以轻松使用调试器并放置断点。如果您在每个页面上动态加载JS，则您需要在每次页面转换时返回数据，并且由于重新加载多余的JS而很难调试动态JS。

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(oEvent){ 

    var pageType = $(this).data('pagetype'); 

    //handle pageinit/pageshow (oEvent.type) for each pageType 

Answer 2

我认为最好每个屏幕都有不同的html文件。它不仅有助于正确维护应用程序代码并跟踪更改，还可防止dom变得庞大，因为在需要时会添加页面。
至于js，你可以在开发和调试过程中分开使用js文件，但是我建议你应该在部署应用程序并释放它之前将它们捆绑并缩小它们。

Answer 3

这是一个非常主观的话题，但也正在成为一个更大的趋势。有些人更喜欢single page web sites（移动应用程序）。这篇wiki文章在讨论单页应用程序解决的问题方面做得很好。

具体来说，在JQM中，当数据在同一页面上时，从一页到下一页的转换更加顺畅。如果您通过将data-prefetch属性添加到链接来预取常用页面，也可以实现此影响。

但是，它可能很大程度上取决于您的项目的规模。 jQuery Mobile文档涉及large DOMs here的一些性能问题。

Answer 4

使用多个单独的HTML页面。你不需要多个JS文件。每个页面应该完全独立，并且能够独立存在。缩小，合并和压缩。始终在每个页面上使用全局配置脚本。电话号码，地图和电子邮件

href="tel:+1[your telephone number here (numbers only)]" 
href="[standard link to google maps here]" 
href=mailto:[your email address] 

验证使用jQuery验证使用的ThemeRoller。使用单选按钮组而不是选择菜单。添加Google Analytics确定要使用哪种导航样式。不要从代码开始。