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

Question

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

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

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

但是，现在我一个人在野外，我需要考虑如何在纯 Javascript.

中设置应用程序结构

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

如果您觉得可以以更 eloquent 的方式提出这个问题以帮助遇到这个问题的人，请随时编辑这个问题。

Answer 1

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

我使用此模板相对较快地构建了几个新项目。

Answer 2

任何您想尝试的东西，请使用 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);
            });
        }

回答来自关于 non-presenter 代码结构的评论的问题：

目前加载脚本的方式是使用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 文件包含我在所有应用程序中使用的一些错误处理函数。基本上是一些 alertTemplates.

API.js 文件有 service-specific 个配置函数。

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

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

您可以使用 gulp 合并和缩小所有这些文件，并仅从您的 xCode 项目中引用该文件。

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

How to plan the structure of a new JS application

javascript

architecture