Question

我即将开始一个项目，使用他们的Client-Server App技术为Apple TV创建一个应用程序。该应用程序将使用Javascript编写，并将使用Apple的JavaScript API（称为TVJS）处理XML模板视图（称为TVML）的加载。

他们的代码示例非常基础;只是一个文件，其中包含一些用于加载模板，处理单击事件等功能的文件......

在我参与的其他项目中，我已经使用已经预定义的结构，例如我使用Appcelerator Titanium构建了一个iOS应用程序，该应用程序随附了自己的MVC框架。

但是，现在我自己出局了，我需要考虑如何在纯Javascript中设置应用程序结构。

有人可以告诉我从哪里开始创建应用程序文件和代码结构？我正在努力在网上找到初学者教程。

如果您觉得可以用更有说服力的方式询问可以帮助那些偶然发现此问题的人，请随时编辑此问题。

Answer 1

您想尝试的任何内容，请使用Apple提供的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文件具有特定于服务的配置功能。</ p>

service.js文件，我使用API.js抽象进行所有AJAX调用。

这种类型的设置对我来说运作得很好。

您可以使用gulp连接和缩小所有这些文件，只需从xCode项目中引用该文件。

Answer 2

100％建议使用React + Redux：http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html

我已经相对快速地使用这个模板构建了几个新项目。

如何规划新JS应用程序的结构

2 个答案: