jquery - 组织 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