最佳实践的PhoneGap架构

Question

我正在尝试开发一个phonegap应用程序，但我不知道如何构建架构。

我尝试使用一种MVC模式，其中控制器使用一个大的JavaScript文件，另外有一个JavaScript文件用于从服务器获取信息（模型）的ajax请求。

对于视图，我使用一个带有头部和页眉的主要布局。

我使用JQuery中的load更新我的内容。

我在使用此系统时遇到了一些问题。例如，当我点击上一个按钮时，应用程序关闭，因为我一直在使用同一页。当我旋转屏幕时，页面会刷新，使我回到第一个屏幕。

我想知道您是否有一些解决方案或一些代码样例，以便开始构建良好的基础。

谢谢

- Ajouve

Answer 1

这取决于您想要改变当前项目的程度。

如果您不介意进行完整的应用程序改版，请考虑使用Phonegap与jQuery Mobile + Backbone.js或Phonegap与Kendo UI。您已经声明使用jQuery来加载内容，因此转向jQuery Mobile不会那么麻烦。

您仍然可以使用backbone.js的MVC原则，而jQuery Mobile将处理页面处理/转换/用户界面。这种解决方案唯一的问题是，如果您创建了过于复杂的应用程序，则可能会出现性能问题。但是，无论您是从头开始创建还是使用UI框架，都会遇到这种情况。

如果您愿意尝试，请查看我在相关问题上的其他答案：

1. 框架及其相关内容简介：https://dev59.com/OGzXa4cB1Zd3GeqPX9PV#14166593
2. Phonegap + jQuery Mobile 教程：https://dev59.com/Gm3Xa4cB1Zd3GeqPdVEs#14375842

虽然 Phonegap + jQuery Mobile 组合并不完美，但它仍然是最好的之一，并且可以节省大量时间。

编辑：

如果您使用 jQuery Mobile，则可以使用以下代码实现固定页眉和页脚：

...data-position="fixed" data-id="footer"...

在两个中都需要。

这是我关于这个问题的“如何”文章：https://stackoverflow.com/a/14417307/1848600

这是一个可行的例子：http://jsfiddle.net/Gajotres/Beq4H/

- Gajotres

---

谢谢。我正在使用Jquery Mobile，但我不太明白如何在保持布局的情况下更改页面，我不想在每个页面上重写我的布局。感谢您的回答，我会看一下backbone.js。 - Ajouve

我不明白你所说的“如何更改页面并保持我的布局”的意思。如果你能澄清一下，也许我可以帮助你更多。 - Gajotres

例如，我想在所有页面中使用相同的页眉，如果我有index.html、menu.html和actu.html。是否有一种解决方案可以在每个页面中生成相同的头部和页眉？ - Ajouve

是的，有的。我会在我的主要回答中给你一个答案，稍等一下。 - Gajotres

现在看一下。如果您需要更多帮助，请随时通过我的邮件与我联系。 - Gajotres