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

【问题标题】：What is the best practice organize a jQuery Mobile application?组织 jQuery Mobile 应用程序的最佳实践是什么？
【发布时间】：2012-02-20 14:10:14
【问题描述】：

我发现article 略过这个。但我的主要问题是每个屏幕都需要一个单独的 .html 文件吗？我认为是的，但我希望获得一致投票。另外，这也适用于单独的 JS 文件吗？

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

【问题讨论】：

与“最佳实践”有关的事情很少有“一致投票”。

标签： jquery mobile jquery-mobile

【解决方案1】：

我们有一个生产 jQM 站点，这是我们的工作方式 - 是的，其他人可能不同意，但我们发现这适用于一个非常大的站点。

使用多个单一的 HTML 页面，一个大的多页面模板会破坏 jQM 的 ajax 加载的好处，因为您在开始时加载所有 HTML（除非您的网站很小）
你肯定想使用 ajax 加载，jQM 只在你的 <div data-role="page"> 中提取代码，但这会使你的 JS 变得复杂，见下文
您不需要多个 JS 文件，但您确实需要在开始时加载所有 JS，我们通过做两件事来实现这一点：1. 我们放了一个 @987654322 @listener 在文档根目录，并监听 pageinit/pageshow 事件。每次加载页面时都会触发这些，您还可以方便地引用当前页面，并且可以使用页面上的属性来确定它是哪个页面。 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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案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 确定要使用的导航样式。不要从代码开始。

【讨论】：