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

Question

I have recently started creating an iPhone application using Appcelerator's Titanium. Since the application is essentially all JS, I needed some advice on how I should organize this project.

It's becoming very easy to just create long procedural files for each view in the application. Is there a way I can incorporate MVC, or some structure to the project?

Thanks, I appreciate it. -Tilo

Answer 1

Titanium itself is essentially MVC given that your app.js file is the main controller and each View you create is the view and you pass (or set) model data against the view.

In Titanium, you can decompose your application using a couple of nice built-in mechanisms:

1. Titanium.include - Titanium.include allows you to include one or more JS files in place much like the C #include compiler directive. You can put common functions and JS classes in this file and then include them where ever you want them imported and available.

2. Titanium.UI.createWindow - you can create a new View as as a property of the new Window pass in a URL to another JS context which will create a new JS sub-context and allow you to maintain its own variable space (but still give you access back to your parent).

Also, in Titanium, you can create folders that allow you to logically organize your application in a way that is suitable to you and your application.

Edit: Today, the Titanium.Include method is deprecated. As mentionned in the documentation, we should create a CommonJS module and use the require() statement.

More information about this statement : Require

More information about modules : Modules

Answer 2

As I was not finding an appropriate MVC solution for a Titanium mobile project, I came up with the following approach. For small apps this might be over-engineered but could help for maintaining growing applications.

Folder structure:

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

For separating views, models and controllers a namespace is needed, so we define it in the app.js, which is our main controller:

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

Within the folders we place single JavaScript files for each component. For this we could either use a lightweight JavaScript OOP library, such as MooTools or Prototype or define simple JS functions as our objects. If you also want to inherit from parent classes, a library definitely makes sense.

Examples:

# 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"
   }
}

After that we can include all needed model/view/controller classes with Ti.include() in the app.js file and reference the components with our namespace:

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

The MVC approach would now presume that the controller "controls" the state of the view and passes data from the model into the view. The view consists only of UI elements and properties for styling. Any action which is made in the UI fires an event, which tells the controller to perform the desired action.

But of course, the exact definition of MVC might be different according to your personal taste ;)

Answer 3

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

Answer 4

Allow me to update this question since most of the responses are superseded. In Q4 2012, Appcelerator released the Alloy MVC (beta) Framework along with the latest IDE and SDK release, Titanium Studio 3.0 and SDK 3.0. Alloy is completely integrated with Studio, so it's quite easy to get a basic app running in less than 15 mins. Alloy introduces a significant folder restructure: The /app folder is now where all the development code resides.

The /Resources folder, where code used to reside, is now the updated equivalent of the /build folder. Compiled code in /Resources is overwritten at each build.

I created a short introductory primer (screencast) on creating an Alloy project. You can view it via my dropbox folder.

Create Alloy Project

Answer 5

It looks like Appcelerator made their own Appcelerator MVC in the marketplace I have not evaluated this yet.

More Info: http://johnkalberer.com/2011/09/29/appcelerator-mvc-example/