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

Question

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

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

谢谢,我很感激.-Tilo

Answer 1

Titanium本身就是MVC,因为你的app.js文件是主控制器,你创建的每个View都是视图,你可以对视图传递(或设置)模型数据.

在Titanium中,您可以使用几个不错的内置机制来分解您的应用程序:

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

2. Titanium.UI.createWindow - 您可以创建一个新的View作为新Window的属性传递到另一个JS上下文的URL,这将创建一个新的JS子上下文并允许您维护自己的变量空间(但仍然给出您可以访问您的父母).

此外,在Titanium中,您可以创建文件夹,以便以适合您和您的应用程序的方式逻辑地组织应用程序.

编辑:今天,不推荐使用Titanium.Include方法.如文档中所提到的,我们应该创建一个CommonJS模块并使用该require()语句.

有关此声明的更多信息:要求

有关模块的更多信息:模块

Answer 2

由于我没有为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的确切定义可能会有所不同;)

Answer 3

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