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

我正在开发一个大型混合移动应用程序（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>

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

感谢您的帮助。

来源

2013-08-02 Mohamed Amine

根据我的经验，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（），但它可以是任何自定义函数，将视图重置为之前保存并呈现的状态）

来源

2013-08-02 13:23:47 axelcdv

让我们考虑一下我有一个新闻应用程序。在主视图中，会从服务器中检索到很多新闻，并使用菜单面板，我可以打开设置视图。当我关闭这个视图时，我想回到与我离开时的状态相同的主视图（我想我有滚动条了......）。我如何使用Backbone（和Underscore）并分离2个视图的HTML代码？ –

“状态”表示您希望保持从服务器获取的新闻项目，例如，如果用户向下滚动了光标位置？ – axelcdv

是的，这就是我想要的:) –

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

回答

相关问题