javascript - 如何规划一个新的JS应用的结构

Question

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

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

在我参与过的其他项目中，我有幸使用了已经预定义的结构，例如，我使用 Appcelerator Titanium 构建了一个 iOS 应用程序，该应用程序与其自己记录的 MVC 框架一起打包。

但是，现在我独自一人，我需要考虑如何用纯 Javascript 建立应用程序结构。

有人可以建议我从哪里开始创建应用程序文件和代码结构吗？我正在努力寻找在线初学者教程。

如果您觉得可以用更 Eloquent 方式提出这个问题来帮助偶然发现这个问题的人，也请随时编辑这个问题。

Answer 1

无论您想尝试什么，都可以使用 Apple 提供的 TVMLCatalog 示例代码。

要构建一个应用程序，基本上您需要考虑两个 Angular 色，一个是 View 端(模板)，另一个是事件处理(Presenter.js 示例)。

制作一个通用的文档加载功能，尽可能多地使用它。每当触发事件时，请使用一些 if/else block 或 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函数，没有import或require机制。尽管人们可能可以编写一个工具来使它们工作。

因此目前唯一的选择就是使用 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 文件包含一些我在所有应用程序中使用的错误处理函数。基本上是一些警报模板。

API.js 文件具有特定于服务的配置功能。<​​/p>

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

这种类型的设置对我来说效果很好。

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