Javascript 构造大型jQuery移动web应用程序：将iFrame用作页面？主干、脊椎、下划线和其他框架？

我们使用jQuery Mobile构建了一个web应用程序。现在已经有九页了，而且变得非常笨拙。jQuery Mobile将所有“页面”捆绑到同一页面中，以模拟本机应用程序的响应

我们考虑将每个页面实现为一个单独的iFrame。第一个页面包含每个iFrame/页面，并预加载每个iFrame/页面。页面转换就像JQM一样，通过在视口中显示适当的页面来实现。数据通过iFrame消息在母版页和子页之间传递。我们认为这可能是有利的，因为：

（1） 它不需要额外的框架

（2） web应用的增长速度不会超过15页/帧；及

（3） 将通过本机应用程序容器（即PhoneGap）而不是移动浏览器访问web应用程序

我们也在探索框架。从我们在和其他地方的研究来看，主干和脊椎似乎是构建大型JavaScript项目的两个很好的选择

尤其是他们管理JQM项目的能力还不太清楚

我们正在寻找三件事：

1） 有哪些选项和框架用于构建大型JQM项目（MVC理想情况下或最坏情况下，相对于单一文件的任何改进）

2） 如果您在JQM中使用过主干、脊椎或任何其他JS框架，请分享您喜欢/不喜欢的内容

---

3） 除了这意味着构建专有功能之外，您是否看到我们的iFrame体系结构存在任何明显的问题？

使用iFrame似乎不是最佳选择，尤其是在存在许多不同的轻量级和简单框架的情况下

JqueryMobile有自己的路由器。我不喜欢它-使用散列标签，它需要在DOM中包含所需散列的页面。当然，可以动态加载页面，但无论如何，您都需要创建新页面，将它们添加到页面容器等。这种处理页面的方式不适合我，还会使DOM过载

使用JQM还可以使用Jquery模板——它们允许存储页面或不同的HTML代码，稍后可以使用传递的数据进行解析。在我看来，这些模板和解析机制非常简单易用。但如果需要解析复杂数量的数据，它们就不合适了。也不支持分区（如在ASP.NET MVC中）。这意味着，您不能只在一个文件中存储页眉和页脚，并将它们作为每个页面的部分加载。你必须在每一页上复制它

这个框架的其他功能非常好。很多控件，主题等等。毫无疑问，它似乎是UI创建的领导者。我唯一不喜欢的是——JQM页面转换

现在是脊梁骨。它是一个功能强大且易于使用MVC模式创建应用程序的框架。实际上，没有JS框架允许创建真正的MVC。但基本情况是正确的。模型、视图和控制器（路由器）。在GitHub上简单地创建新路由、良好的文档和大量示例。使用视图和模型的强大机制-他们的网站将显示所有功能

我提议使用主干+JQM。但在这种情况下，您必须禁用其中一个路由器，以避免这些框架之间的冲突。只有一个人应该留下来

关于寻呼。不需要在DOM中存储所有可用页面。您只能使用content元素创建一个JQM页面并动态更新它。将html存储在模板中，从服务中获取数据，解析模板并更新内容元素。 主干有一个依赖项-下划线。乍一看，我不想因为这个而使用主干网。但下划线是一个功能强大的框架，具有许多有用的特性。其中之一就是模板制作。用于解析的强大解析机制—支持循环、js函数、在模板中创建变量等。也不支持partials—但您不需要它，因为不需要一直创建新页面

当我的应用程序只有几个页面时，我加载了所有的js文件（框架、助手、服务调用方、视图、模型等），并将下划线模板存储在我的html页面上。但支持这样的代码是一件可怕的事情。HTML页面变得巨大。 RequireJS框架可以解决这个问题。它不仅可以加载JS文件，还可以加载文本模板（使用文本插件）。本例中的所有代码都是模块化的。它有大量的样本，所以看它是如何工作的没有问题。 顺便说一下，主干网的最新版本官方不支持AMD。但是仍然可以使用RequireJS加载它

还可以考虑滚动您的内容。关于这件事我不会写太多。看看iScroll框架

---

所以，PhoneGap+Backbone+JQM+RequireJS=Success:）

使用它，并用它替换所有内容。

15页对我来说似乎没有那么大。我真的不认为引入另一个框架会让这样规模的网站变得更容易

我和你一样感到沮丧，但是我没有把所有的东西都放在一个巨大的文件中，而是使用ajax页面加载来动态加载页面

为了避免冲突，我只是小心地在标识符前面加上页面名。这不是什么大问题

你不得不将粘贴复制到每个文件中（这使得测试更容易，并且允许多个站点入口），这有点烦人，但我已经能够忍受了

---

尽管有这些缺点，但将页面拆分为HTML文件有助于提高“易用性”，特别是当您在页面上内联javascript时。

您发现它的“笨拙”之处是什么？i、 e.您正试图用iFrames解决您的Web应用程序的哪些问题？将所有页面的代码放在一个整体文件中。即使我们通过AJAX动态地拉入页面，CSS和JavaScript中仍然存在冲突的可能性。如果可能的话，我们希望像普通网页一样围绕每个页面创建封装