Question

我正在开发一个大型混合移动应用程序（PhoneGap / HTML5），它必须包含大量视图和服务器调用。在互联网上进行一些搜索后，我发现我可以使用RequireJS，Backbone和jQuery Mobile组织我的代码。我跟着this tutorial，这非常有帮助，但我真的不满意......

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

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

<!-- 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>

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

感谢您的帮助。

Answer 1

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

在几个HTML文件中分解您的视图通常是一个好主意（特别是考虑到您可以使用模板，例如使用Underscore），但如果这就是您的意思，我认为您不应该立即加载所有内容。< / p>

如果你觉得它会回答你的问题，我会给你一个更详细的例子，但基本上如果你按下一个链接或一个按钮，你就可以抓住那个事件并用它做任何你想做的事情，从将整个视图替换为仅更改一个元素。

编辑：我会在这里回答你的其余问题。首先你应该看一下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（）但它可以是任何自定义函数将视图重置为状态你以前保存并渲染它）

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

1 个答案: