混合移動應用程序的最佳體系結構是什麼？

我正在開發一個大型混合移動應用程序（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

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

混合移動應用程序的最佳體系結構是什麼？

回答

相關問題