如何規劃新的JS應用程序的結構

Question

我即將啓動一個項目，使用它們的Client-Server App技術爲Apple TV創建應用程序。該應用程序將用Javascript編寫，並將使用Apple的JavaScript API（稱爲TVJS）處理加載XML模板視圖（稱爲TVML）。

他們的代碼示例非常基本;只是一個單一的文件，加載模板，處理單擊事件等功能...

在我工作過的其他項目中，例如使用已經預定義的結構，例如我使用Appcelerator Titanium構建了一個iOS應用程序，它與自己記錄的MVC框架打包在一起。

但是，現在我自己走出野外，我需要考慮如何在純Javascript中設置應用程序結構。

有人可以告訴我從哪裏開始創建應用程序文件和代碼結構？我努力在網上找到初學者教程。

如果您覺得可以以更有說服力的方式提問來幫助那些偶然發現這個問題的人，也請隨時編輯此問題。

Answer 1

任何你想嘗試的東西，玩蘋果提供的TVMLCatalog示例代碼。要構建一個應用程序，基本上需要考慮2個角色，一個是視圖方面（模板），另一個是事件處理（Presenter.js示例）。

製作一個通用的文檔加載功能，儘可能多地使用它。 每當事件觸發時，使用if/else塊或switch語句來找出該做什麼。

我已經爲Presenter端添加了所有必要的代碼，我想如果你知道JS，應該很容易找出其餘的。

defaultPresenter: function(xml) { 
    if(this.loadingIndicatorVisible) { 
     navigationDocument.replaceDocument(xml, this.loadingIndicator); 
     this.loadingIndicatorVisible = false; 
    } else { 
     navigationDocument.pushDocument(xml); 
    } 
}, 
addEventsToDocument: function(doc){ 
    doc.addEventListener("select", this.load.bind(this)); 
    doc.addEventListener("play", this.load.bind(this)); 
    doc.addEventListener("highlight", this.load.bind(this)); 
    doc.addEventListener("holdSelect", this.load.bind(this)); 
    doc.addEventListener("change", this.load.bind(this)); 
}, 
buildCompilationTemplate: function(params, data) { 
    var resource = TemplateCompilation(params, data); 
    this.buildDefaultTemplate(resource); 
}, 
buildDefaultTemplate: function(resource) { 
    var doc = this.makeDocument(resource); 
    this.addEventsToDocument(doc); 
    this.defaultPresenter.call(this, doc); 
}, 
load: function(event) { 
    var self = this, 
     ele = event.target, 
     navigateTo = ele.getAttribute("navigateTo"); 

    if (navigateTo !== '') { 
     if (event.type !== "select"){ 
      return; 
     } 
     if (navigateTo === 'Compilation') { 
      var params = ele.getAttribute('params'); 
      fetchCompilationService(params, function(data) { 
       self.buildCompilationTemplate(params, data); 
      }); 
     } 

在回答關於非主持人代碼結構的意見來的問題：

當前加載腳本的方式與evaluateScripts功能，也沒有進口或需要的機制。儘管可以編寫一個工具來使它們工作。

因此，目前唯一的選擇是使用gulp/grunt來連接js文件。你可以在你的gulp腳本中指定你的js文件的順序，並構建一個單獨的js文件來傳遞。我更傾向於將如下：

app.js 
js 
    API.js 
    services.js 
    vendor 
    async.min.js 
resources 
templates 
    home.xml.js 
    episode.xml.js 
    most-popular.xml.js 

主要入口點是app.js文件，它有特定的應用程序配置和調用模板，事件設置等

error.js文件包含了一些錯誤處理函數，我在我所有的應用程序中使用。基本上有一些alertTemplates。

API.js文件具有服務特定的配置功能。

service.js文件，其中我使用API​​.js抽象進行所有AJAX調用。

這種類型的設置對我來說工作得很好。

您可以使用gulp連接並縮小所有這些文件，只需從xCode項目引用該文件即可。

Answer 2

100％建議使用陣營+終極版：http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html

我已經建立了使用此模板比較快幾個新的項目。