如何组织 Phonegap HTML 文件答案

【问题标题】：How to Organize Phonegap HTML Files如何组织 Phonegap HTML 文件
【发布时间】：2013-08-16 06:40:05
【问题描述】：

我正在使用 Phonegap 构建一个 iPad 应用程序。

应用程序应该是离线的（除了表单提交），所以它大部分是静态页面，所以我会有很多 HTML 文件，因为我没有使用 JS MVC / 需要 JS 来最小化复杂。我看的越多，它基本上就是一个用Phonegap封装的静态站点来构建一个应用程序。

由于我将拥有大量的 HTML 文件，因此如果我不使用任何模板引擎，管理（例如）页眉/页脚的更改将是一件痛苦的事。到目前为止，我使用 Codekit 将 Jade 文件编译为 HTML，效果很好，我只使用 Jade 进行布局/块/包含功能和 HTML 编译。

我不太喜欢使用 Jade 的一件事是，如果您的文件有很多嵌套的 HTML 标记（例如，使用 Zurb Foundation/Twitter Bootstrap 标记的复杂表单设计），那么 Jade 突然看起来不那么好了不再清洁了。

不过，我认为必须有更好的方法来做到这一点。你们有没有人用Phonegap做过一个大部分是静态页面的应用程序？有更好的建议吗？

谢谢

【问题讨论】：

标签： html cordova pug template-engine codekit

【解决方案1】：

我正在成功使用 JQuery 移动版。我使用 RazorEngine 作为模板服务，他们将文件编译为静态 html。 Jquery Mobile 有一个不错的分页引擎，它使用 ajax 获取静态 html 文件，然后在页面上显示这些文件，以及许多其他不错的移动特定功能。

【讨论】：

我没有使用 jQuery Mobile，因为应用程序的设计非常不像“应用程序”（没有标题/导航栏等），所以我不能使用 jQuery Mobile。

【解决方案2】：

我使用了一个非常标准的工作流程，它在 Web 开发中非常受欢迎 - Grunt。 Grunt 执行的任务与 Codekit 编译翡翠的方式非常相似，只是 Grunt 非常稳定，拥有庞大的社区并通过安装 grunt-contrib-jade 来支持翡翠。它会与多个模板引擎集成。

Grunt 一开始似乎有一个学习曲线，但它是一个很好的替代品，开源且免费使用。

咕噜网站：http://gruntjs.com/

【讨论】：

由于我使用 Codekit，我没有使用 Grunt，但我肯定会在下一个项目中使用 Grunt，因为它看起来是当今的最佳实践。

【解决方案3】：

您可以使用 1 个文件，将数据保存在 sqlite 中或作为 JS 文件中的变量。代码应该是这样的：

<!doctype html>
<html>
<head></head>
<body>
<div id="page1" class="page">...</div>
<div id="page2" class="page">...</div>
<div id="page3" class="page">...</div>
<div id="page4" class="page">...</div>
</body>
</html>

那么你可以在js文件中创建一个函数“navigate(page_id)”：

public function navigate(pageid){
$('page').hide();
if(pageid == 'page1'){
  $('#'+pageid).show();
  // get data and append it in the div.
}
...
}

当然您可以使用 Jquery Mobile，但它会强制您使用预定义的模板，我个人不使用它，因为编写自己的模板要好得多，并且可能会提供更多选择。

【讨论】：

这有点复杂，因为每个“页面”可以有多个子页面，并且每个子页面也可能有一个或两个其他子子页面。这就是为什么我说，这个所谓的应用程序在概念上非常不像应用程序。我将使用简单的页面刷新进行主导航，但我认为我会使用 jquery/ajax 进行一些子页面链接。感谢您的建议。
你可以用同样的方式处理子页面，我有一些应用程序有 30 个页面，为每个页面分配一个 id 就可以了；）这是最简单的方法。如果要创建多个文件，则应考虑文件（html、css、JS ...）的加载时间
所以最终结果将是一个巨大的 html 文件，由所有页面组成，每个页面都有不同的 id？
基本上是的，和任何html5单页网站一样，不用太担心，你可以在加载文件时使用闪屏，也可以使用AngularJS之类的JS (viralpatel.net/blogs/angularjs-controller-tutorial) , 在为移动设备编写 html5 应用程序时有一些技巧，使用 ids 而不是 class 来定位您的 html 标签，通过删除所有空格和换行符来简化所有 JS，使用小变量（“var mh”而不是“ Var Main_homepage")...

【解决方案4】：

我建议this framework。页面导航很容易实现，不需要将所有页面都放在一个文件中，这样阅读或维护起来会非常困难。该框架允许您将任何文件（html、js、css）分成非常小的文件，以便每个文件易于阅读和维护。

它还使用 Ajax 来获取 html（页面/部分视图），因此您可以使用 html 做您喜欢的事情。

我们phonegap团队已经完成了一些基于这个框架的项目，并且非常成功。该站点上有带有源代码的演示，可以帮助您设置项目。可以通过源码一目了然文件结构。

我不建议使用 jQueryMobile，因为它对 phonegap 应用程序来说真的很痛苦。以下是一些解释原因的帖子：

【讨论】：

我不得不放弃 jQuery Mobile，因为 Android 上的 PhoneGap 应用程序呈现缓慢。 jQuery Mobile 很漂亮，并且有很多不错的小部件，但是性能缓慢使其无法使用。

【解决方案5】：

在您的帖子中，您提到您没有使用 mvc 框架。但是，我建议您查看backbone.js。 Backbone 是一种经常与Phonegap 结合使用的技术。您可以使用 Backbones 视图来组织您的代码。

【讨论】：