混合移动应用程序的最佳架构是什么？答案

【问题标题】：What's the best architecture for a hybrid mobile application?混合移动应用程序的最佳架构是什么？
【发布时间】：2013-08-02 13:14:36
【问题描述】：

我正在开发一个大型混合移动应用程序 (PhoneGap/HTML5)，它必须包含大量视图和服务器调用。在网上搜索了一番后，我发现我可以用 RequireJS、Backbone 和 jQuery Mobile 来组织我的代码。我关注了this tutorial，很有帮助，但我不是很满意……

问题是，当我按下链接或按钮时，RequireJS 会加载每个视图，它会替换上一个视图的内容...我的意思是，<body></body> 之间的整个 HTML 代码都被替换为内容的新观点。如果我决定不替换以前的代码并附加新代码，那么应用程序可能不是非常用户友好。

我曾想过将所有视图分开并将它们放在多个 HTML 文件中，并编写一个 Javascript 来加载所有 HTML 文件并将它们附加到主体，但我不知道这是否是一个好习惯和如果我的应用程序将非常用户友好。这是我如何组织代码的示例：

<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
        <!-- ... -->
    </head>

    <body>
        <!-- Here will be added the content of all the other HTML files -->
    </body>
</html>


<!-- homeView.html -->
<div data-role="header" data-theme="f">
    <h1 data-i18n="sections.home.title"></h1>
</div>

<div data-role="content">
    <h1 data-i18n="sections.home.welcome"></h1>
</div>


<!-- otherView.html -->
<div data-role="header" data-theme="f">
    <h1 data-i18n="sections.otherView.title"></h1>
</div>

<div data-role="content">
    <p data-i18n="sections.otherView.content"></p>
</div>

你们怎么看？有没有人有更好的解决方案？我的目标是构建一个强大、流畅且可维护的应用程序。

感谢您的帮助。

【问题讨论】：

标签： mobile backbone.js cordova requirejs hybrid-mobile-app

【解决方案1】：

根据我的经验，Backbone 让您可以更细粒度地控制视图的显示方式：您应该能够只替换视图的一部分，而不必在“替换所有内容”和“附加到当前 HTML”之间进行选择”。

将视图拆分为多个 HTML 文件通常是个好主意（特别是考虑到您可以使用模板，例如使用下划线），但如果您的意思是这样，我认为您不应该一次加载所有内容。

如果您认为它可以回答您的问题，我会给您一个更详细的示例，但基本上，如果您按下链接或按钮，您就可以捕获该事件并使用它做任何您想做的事情，从将整个视图替换为仅更改一个元素。

编辑：我将在这里回答您的其余问题。首先你应该看一下http://backboneboilerplate.com/，它很好地演示了如何构建主干应用程序。特别是，他们使用视图管理器 (vm.js) 来处理创建视图。

使用类似的方法可以将视图的最后一个实例保存在内存中。例如，当您单击新闻项目时，您的路由器会导航到 /news/item/xx，然后您将使用视图管理器创建一个新闻项目并使用 localStorage 填充模型（如果您已经获取内容）或通过轮询服务器。查看视图管理器代码，你可以有这样的东西：

define([
  'jquery',
  'underscore',
  'backbone',
  'events'
], function($, _, Backbone, Events){
  var views = {};
  var create = function (context, name, View, options) {
    if(typeof views[name] !== 'undefined') {
      if (name === "homeview") {
        views[name].reinit(); // <==== re-initialize your view
        return views[name];
      }
      else {
        views[name].undelegateEvents();
        if(typeof views[name].clean === 'function') {
          views[name].clean();
        }
      }
    }
    var view = new View(options);
    views[name] = view;
    if(typeof context.children === 'undefined'){
      context.children = {};
      context.children[name] = view;
    } else {
      context.children[name] = view;
    }
    Events.trigger('viewCreated');
    return view;
  };


  return {
    create: create
  };
});

这样，视图管理器将您的主视图保存在内存中，并在您返回时重新初始化并返回它（我调用了 .reinit() 但它可以是任何自定义函数来将您的视图重置为状态你之前保存并渲染它）

【讨论】：

假设我有一个新闻应用程序。在主页视图中，会从服务器检索到很多新闻，使用菜单面板，我可以打开设置视图。当我关闭这个视图时，我想回到与离开它时相同的状态的主视图（我想我已经向下滚动了......）。如何使用 Backbone（和下划线）并分离 2 个视图的 HTML 代码来做到这一点？
“状态”是指您希望保留从服务器获取的新闻项目，例如用户向下滚动时的光标位置？
是的，这就是我想要的:)
查看更新的回复：一种方法是使用视图管理器将视图的最后一个实例保存在内存中，并让该实例存储您想要的参数（例如用户在哪里已滚动）当您切换到另一个视图时
谢谢，我正在分析主干样板源代码，我认为它会有所帮助:)