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

How to plan the structure of a new JS application

本文关键字：JS 应用程序 结构 何规划 规划      更新时间：2023-09-26

我即将启动一个项目，使用他们的客户端 - 服务器应用程序技术为Apple TV创建一个应用程序。该应用程序将使用Javascript编写，并将使用Apple的JavaScript API（称为TVJS）处理XML模板视图（称为TVML）的加载。

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

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

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

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

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

任何

你想尝试的东西，都可以使用苹果提供的TVMLCatalog示例代码。

要构建应用程序，基本上需要考虑 2 个角色，一个是视图端（模板），另一个是事件处理（演示者.js示例）。

制作一个通用的文档加载功能，尝试尽可能多地使用它。每当触发事件时，使用一些 if/else 块或 switch 语句来确定该怎么做。

我已经为演示器端添加了所有必要的代码，我想如果你知道 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 文件，它具有特定于应用的配置并调用模板、事件设置等。

错误.js文件包含一些错误处理功能，我在我的所有应用程序中使用的。 基本上是一些警报模板。

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

服务.js我使用 API 进行所有 AJAX 调用的文件.js抽象。

这种类型的设置对我来说已经足够好了。

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

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

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

相关文章：