javascript - 构建大型 jQuery Mobile Web 应用程序 : use iFrames as pages? Backbone、Spine、Underscore 和其他框架？

Question

我们使用 jQuery Mobile 构建了一个网络应用程序。它现在有九页，变得非常笨重。 jQuery Mobile 将所有“页面”捆绑到同一个页面中以模拟 native 应用程序的响应能力。

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

(1) 它不需要额外的框架；

(2) 网络应用程序不会超过 15 个页面/iFrame；和

(3) Web 应用程序将通过 native 应用程序容器(即 PhoneGap)而非移动浏览器访问。

我们也在探索框架。来 self 们对 SO 的研究在其他地方，似乎 Backbone 和 Spine 是构建大型 JavaScript 项目的两个很好的选择。

不太清楚他们管理 JQM 项目的能力如何。

我们正在寻找三样东西:

1) 构建大型 JQM 项目(MVC 理想情况或最坏情况，对整体文件的任何改进)存在哪些选项和框架？

2) 如果您将 Backbone、Spine 或任何其他 JS 框架与 JQM 一起使用，请分享您喜欢/不喜欢的内容。

3) 除了意味着构建专有功能之外，您是否发现我们的 iFrame 架构有任何明显的问题？

Answer 1

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

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

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

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

现在介绍 Backbone。这是一个使用 MVC 模式创建应用程序的强大而简单的框架。实际上，没有允许创建真正的 MVC 的 JS 框架。但基本情况是正确的。模型、 View 和 Controller (路由器)。 GitHub 上新路由的简单创建、良好的文档和大量示例。使用 View 和模型的强大机制 - 他们的站点将显示所有功能。

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

关于分页。无需将所有可用页面存储在 DOM 中。您只能创建一个包含内容元素的 JQM 页面并动态更新它。将 html 存储在模板中，从服务中获取数据，解析模板并更新内容元素。Backbone 有一个依赖 - 下划线。乍一看，我不想用 Backbone 因为这个。但是 underscore 是一个强大的框架，有很多有用的特性。其中之一是 - 模板化。强大的解析机制——支持循环、js函数、在模板中创建变量等。也不支持partials——但你不需要它，因为不需要一直创建新页面。

当我的应用程序只有几页时 - 我加载了我所有的 js 文件(框架、助手、服务调用者、 View 、模型等)并将下划线模板存储在我的 html 页面上。但是支持这样的代码是一种恐怖。 HTML 页面变得巨大。RequireJS 框架可以解决这个问题。它不仅可以加载 JS 文件，还可以加载文本模板(使用文本插件)。本例中的所有代码都是模块化的。它有很多示例，因此可以毫无问题地查看它是如何工作的。顺便说一句，Backbone 的最新版本正式不支持 AMD。但是仍然可以使用 RequireJS 加载它。

还要考虑滚动内容。我不会写太多。看看 iScroll 框架就知道了。

所以，PhoneGap + Backbone + JQM + RequireJS = 成功:)