ASP.NET MVC、jQuery Mobile和PhoneGap架构的最佳实践

Question

我正在使用ASP.Net MVC开发一个移动应用程序，生成HTML 5页面。这些HTML 5页面将使用jQueryMobile的loadPage调用ASP.Net MVC来加载页面到DOM中。然后，基于用户与应用程序的交互，它将使用jQueryMobile的changePage使页面在DOM中处于活动状态。调用MVC应用程序将调用不同的Web服务来检索源数据以构建HTML。

我们计划使用PhoneGap来提交已完成的应用程序到苹果和安卓商店。我的应用程序不需要与设备的本机功能（联系人、地理位置等）进行交互。既然我们不需要与实际设备的操作系统进行交互（除了通过jQuery ajax调用MVC应用程序），那么PhoneGap真的需要吗？我描述的方法是否是使Web应用程序在移动设备上可行的适当方式？

由于我的应用程序是asp.net mvc，并将托管在我的服务器上，那么发送到Android和Apple商店的是什么？这就是PhoneGap发挥作用的地方吗？PhoneGap是否创建某种可执行文件，提交给Android和Apple商店？然后这个可执行文件会被下载到客户端设备上？我假设该可执行文件将通过URL调用MVC站点以检索应用程序HTML？

感谢您的帮助。

- Tom Schreck

---

不确定为什么我的问题被投了反对票。我已经做了很多研究。请给我一些澄清。我读了很多不同的资源，它们都有不同的做事方式。通过我的研究，我认为我已经找到了一种方法。我只需要对我的假设进行一些验证。 - Tom Schreck

Answer 1

Phonegap（或某个替代品）并非必须，但非常有帮助，可以从您的HTML/JS/CSS源代码创建应用程序包。 Phonegap不会创建可执行文件（您的IDE将执行此操作），但它是Java到JavaScript功能的框架（使从JavaScript运行Java代码成为可能）。

Phonegap基本上在 webview 中包装您的HTML/JS/CSS站点，以便设备的浏览器可以解释您的代码（有时以比正常运行浏览器更加沙盒化的方式运行，例如iOS-5之前的 webview 实例没有获得Nitro JS引擎，因此运行速度比移动Safari浏览器中的网站慢）。

如果您的网站非常简单且不使用任何其他Phonegap功能，则可以创建自己的 webview ，但由于它已经内置于Phonegap中且设备不必下载Phonegap。 您最好使用Phonegap。

Phonegap Build（https://build.phonegap.com/）是一个程序，您可以购买它来构建并提交您的应用程序包到苹果/谷歌/RIM/Windows应用商店。然而，通常情况下，您只需使用自己的IDE即可完成此操作。例如，要创建iOS应用程序，您必须使用新的苹果电脑（您必须拥有最新的操作系统版本以构建最新版本的iOS包）。 iOS应用程序包是在XCode中创建的，而Eclipse IDE是创建Android应用程序包的非常常见的环境：http://developer.android.com/sdk/eclipse-adt.html。

我注意到你说你正在使用$.mobile.loadPage()将页面加载到DOM中，使用$.mobile.changePage()将用户导航到这些页面。如果您只使用$.mobile.changePage()，它将自动使用loadPage()抓取页面。如果您使用loadPage()预加载内容，则可以查看jQuery Mobile的预取能力：http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-cache.html 2014年更新 我最近使用Cordova 3.5构建了一些应用程序，构建过程大大简化了。现在，软件包构建过程是通过系统控制台管理的，从安装插件到重新构建应用程序包的所有操作都更加容易。

- Jasper

---

感谢您的回复。关于loadPage和changePage，根据jQueryMobile的文档，当我从页面导航离开时，它会从DOM中删除页面。由于页面不再在DOM中，因此changePage会失败。因此，当我着陆在一个页面上时，我使用loadPage将所有可能的页面加载到DOM中（现在可以管理），然后根据需要调用changePage。每个页面都有一个“类型”属性，因此当用户导航到不再需要旧页面的新区域时，我可以删除所有特定类型的页面。是否有更好的方法？ - Tom Schreck

如果在data-role="page"元素上设置了data-dom-cache="true"属性，则jQuery Mobile在导航离开页面时不会删除页面。否则，我会确保为每个data-role="page"元素手动设置data-url属性为其绝对URL，这样当您使用：$.mobile.changePage('/about-us/default.html')时，框架将能够将该字符串与页面的data-url属性匹配（如果已存在于DOM中）。 - Jasper

明白了，感谢你的提示。我非常注重性能，担心DOM会被页面填满。应用程序有不同的部分，所以如果我设置data-dom-cache="true"，那么我担心DOM会随着时间的推移而被填满。因此，我创建了一种方法，每个页面都有一个类型属性，其值为它所属的部分。因此，当用户转到另一个部分时，我可以从旧部分中删除所有页面。这是DOM维护。这种方法可行吗？我不愿意让DOM被页面填满。再次感谢您的帮助。 - Tom Schreck

那应该可以很好地工作。特别是对于移动设备，管理DOM的大小是一个好主意。您可以使用Chrome Dev Tools或Firebug（适用于Firefox），或任何开发工具来检查站点的序列化DOM大小。这将为您提供一个很好的想法，即在任何给定时间使用了多少内存，以及是否需要更多或更少的DOM大小管理。 - Jasper