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

我找到了一篇文章 ,撇开了这篇文章 。 但我的主要问题是我是否需要为每个屏幕单独的.html文件? 我想是的,但我希望得到一致投票。 另外,这也适用于单独的JS文件吗?

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

我们有一个生产jQM网站,这是我们做事的方式 – 是的,其他人可能不同意,但我们发现这适用于一个非常大的网站。

  1. 使用多个单页HTML页面,大型多页面模板会破坏jQM的ajax加载的好处,因为您在开始时加载了所有HTML(除非您的网站很小)

  2. 你肯定想使用ajax加载,jQM只会拉入你的

    中的代码但是这会使你的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 

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

这是一个非常主观的话题,但也正在成为一个更大的趋势。 有些人更喜欢单页网站 (移动应用)。 这里的wiki文章很好地讨论了单页面应用程序解决的问题。

特别是在JQM中,当数据在同一页面上时,从一个页面到下一个页面的转换更加平滑。 如果通过向链接添加data-prefetch属性来预取常用页面,也可以实现此影响。

但是,它可能在很大程度上取决于项目的大小。 jQuery Mobile文档涉及大型DOM的一些性能问题。

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

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

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