如何在 Appcelerator Titanium 项目中组织 JS 文件

Posted 2023-02-22

【中文标题】如何在 Appcelerator Titanium 项目中组织 JS 文件

【英文标题】：How to organize JS files in a Appcelerator Titanium project

【发布时间】：2011-02-04 03:22:07

【问题描述】：

我最近开始使用 Appcelerator 的 Titanium 创建一个 iPhone 应用程序。由于该应用程序基本上都是 JS，因此我需要一些关于如何组织这个项目的建议。

为应用程序中的每个视图创建长的程序文件变得非常容易。有没有办法可以将 MVC 或某些结构合并到项目中？

谢谢，我很感激。 -蒂洛

【问题讨论】：

虽然这个问题仍然相关，但请注意，有些答案已经过时了：到目前为止，教程和官方文档中提到了一些模式——甚至是很好的旧示例应用程序 KitchenSink（又名 King of鼠窝）已经过重构，以更好地反映当前的良好实践。

【参考方案1】：

Titanium 本身本质上是 MVC，因为您的 app.js 文件是主控制器，并且您创建的每个视图都是视图，并且您针对视图传递（或设置）模型数据。

在 Titanium 中，您可以使用一些不错的内置机制来分解您的应用程序：

Titanium.include - Titanium.include 允许您包含一个或多个 JS 文件，就像 C #include 编译器指令一样。您可以将常用函数和 JS 类放在此文件中，然后将它们包含在您希望它们导入和可用的任何位置。

Titanium.UI.createWindow - 您可以创建一个新视图作为新窗口的属性，将 URL 传递给另一个 JS 上下文，这将创建一个新的 JS 子上下文并允许您维护自己的变量空间（但仍然允许您访问您的父母）。

此外，在 Titanium 中，您可以创建文件夹，以便以适合您和您的应用程序的方式合理地组织您的应用程序。

编辑：今天，Titanium.Include 方法已被弃用。 正如文档中提到的，我们应该创建一个 CommonJS 模块并使用 require() 语句。

有关此声明的更多信息：Require

关于模块的更多信息：Modules

【讨论】：

我会反对这种说法

（请忽略我上面的评论，我不能再删除它了：/）@jhaynie，我会反对 Titanium 本身本质上是 MVC 的说法。在处理所谓的经典 Titanium 项目时，几乎没有强制执行结构。具体来说，没有控制器或模型。您可以提出自己的结构并使其类似于 MVC，但经典方法本身并不是 MVC。另一方面，钛合金（尽管在您发布答案时尚未发布）是一个 MVC 框架。它强制执行特定的项目结构并提供真正的关注点分离。

【参考方案2】：

请允许我更新此问题，因为大多数回复已被取代。 2012 年第四季度，Appcelerator 发布了 Alloy MVC（测试版）框架以及最新的 IDE 和 SDK 版本、Titanium Studio 3.0 和 SDK 3.0。 Alloy 与 Studio 完全集成，因此很容易在 15 分钟内运行一个基本应用程序。 Alloy 引入了重要的文件夹重组：/app 文件夹现在是所有开发代码所在的位置。

过去存放代码的 /Resources 文件夹现在是 /build 文件夹的更新版本。 /Resources 中的编译代码在每次构建时都会被覆盖。

我创建了一个关于创建 Alloy 项目的简短介绍性入门（截屏视频）。您可以通过我的 Dropbox 文件夹查看它。

Create Alloy Project

【讨论】：

谢谢！你用这些信息救了我拔头发。

有没有办法可以将控制器 javascript 拆分为多个文件，这样它就不必是一个长的 .js 文件？

@JustinVincent 您可以随意拆分控制器文件。只要确保在原始容器中“要求”它们。此外，以对您有意义的方式将它们组织起来。如果您将代码从 foo.js 拆分为 bar.js 并且 foo 需要知道它，只需添加到 foo var bar = require('bar.js')

@JustinVincent 更正：对于require，它应该是var bar = require('bar');。不要添加文件扩展名。然后，在foo.js 中，您可以使用bar.doStuff(); 引用条码

【参考方案3】：

看起来 Appcelerator 在市场上创建了自己的Appcelerator MVC，我还没有对此进行评估。

更多信息：http://johnkalberer.com/2011/09/29/appcelerator-mvc-example/

【参考方案4】：

由于我没有为 Titanium 移动项目找到合适的 MVC 解决方案，因此我想出了以下方法。对于小型应用程序，这可能是过度设计的，但有助于维护不断增长的应用程序。

文件夹结构：

/Resources
  /model
  /view
  /controller
  /ui
  /iphone
  /android
  app.js
  app.jss

为了分离视图、模型和控制器，需要一个命名空间，所以我们在 app.js 中定义它，这是我们的主控制器：

var app = 
  view: ,
  controller: ,
  model: ,
  ui: 

在文件夹中，我们为每个组件放置单个 JavaScript 文件。为此，我们可以使用轻量级 JavaScript OOP 库，例如 MooTools 或 Prototype，或者将简单的 JS 函数定义为我们的对象。如果您还想从父类继承，那么库绝对是有意义的。

例子：

# Resources/controller/MyController.js
app.controller.MyController = function() 
   return 
      getView: function() 
         return new app.view.MyView().getView();
      
   


# Resources/view/MyView.js
app.view.MyView = function() 
   return 
      getView: function() 
         return Ti.UI.createWindow(...);
      
   


# Resources/view/MyModel.js
app.model.MyModel = function() 
   return 
      some: "data",
      foo: "bar"
   

之后，我们可以在 app.js 文件中使用 Ti.include() 包含所有需要的模型/视图/控制器类，并使用我们的命名空间引用组件：

Ti.include("controller/MyController.js");
Ti.include("view/MyView.js");
var myController = new app.controller.MyController();
var myView = myController.getView();
myView.open();

MVC 方法现在假定控制器“控制”视图的状态并将数据从模型传递到视图。该视图仅包含用于样式的 UI 元素和属性。在 UI 中进行的任何操作都会触发一个事件，该事件告诉控制器执行所需的操作。

当然，MVC 的确切定义可能会根据您的个人喜好而有所不同；）

【讨论】：

喜欢您的解决方案。以同样的方式做到了，并取得了很好的经验。

非常喜欢并且非常想使用它。如何在我的应用中使用它？

我喜欢这个。 2014 非合金版本的区别是否仅在于使用 require() 而不是 Ti.include()？

对于那些迟到的人，Ti.include() 已被贬值。

【参考方案5】：

这也可能有所帮助：如何组织 Titanium 移动项目的基本结构：https://github.com/krawaller/Struct

【讨论】：

这是一个有用的 blog post，它解释了 GitHub 存储库中发生的事情。