Cómo organizar JS archivos en un Appcelerator Titanium proyecto

Question

Hace poco he comenzado a crear una aplicación para iPhone con Appcelerator Titanium.Dado que la aplicación es esencialmente todos los JS, necesitaba algunos consejos sobre cómo debo organizar este proyecto.

Es cada vez más fácil crear larga procesal archivos para cada vista en la aplicación.Hay una manera que puedo incorporar MVC, o alguna estructura para el proyecto?

Gracias, se lo agradezco.-Tilo

Answer 1

Titanio sí está esencialmente MVC dado que su archivo app.js es el controlador principal y cada vista se crea es la vista y se pasa (o conjunto) los datos del modelo en la vista.

En titanio, que puede descomponer su aplicación utilizando un par de buenos mecanismos integrados:

1. Titanium.include - Titanium.include le permite incluir uno o más archivos JS en su lugar al igual que la directiva del compilador C #include. Usted puede poner las funciones comunes y clases JS en este archivo y luego incluirlos donde quiera que usted quiere que importan y disponible.

2. Titanium.UI.createWindow - puede crear una nueva vista como una propiedad del nuevo pase ventana en una dirección URL a otro contexto JS que creará un nuevo sub-marco JS y permitirá mantener su propio espacio variable (pero todavía le da acceso de nuevo a su padre).

Además, en titanio, puede crear carpetas que permiten organizar lógicamente su aplicación de una manera que es adecuado para usted y su aplicación.

Editar Hoy en día, es obsoleto el método Titanium.Include. Como lo mencionan en la documentación, hay que crear un módulo CommonJS y utilizar la instrucción require().

Más información sobre esta declaración: Requerir

Más información acerca de los módulos: Módulos

Answer 2

Como yo no era encontrar un adecuado MVC solución para una Titanio proyecto móvil, se me ocurrió el siguiente enfoque.Para aplicaciones pequeñas que esto podría ser más de la ingeniería sino que también podría ayudar para mantener el crecimiento de las aplicaciones.

Estructura de carpetas:

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

Para separar los puntos de vista, los modelos y controladores de un espacio de nombres se necesita, por lo que se defina en el app.js que es nuestro principal controlador:

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

Dentro de las carpetas ponemos solo los archivos JavaScript para cada componente.Para esto podemos utilizar un ligero JavaScript programación orientada a objetos de la biblioteca, tales como MooTools o Prototype o definir simple JS funciones como nuestros objetos.Si usted también quiere heredar de clases para los padres, una biblioteca definitivamente tiene sentido.

Ejemplos:

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

Después de que se pueden incluir todos los necesarios modelo/vista/controlador de clases con Ti.include() en el app.js archivo y referencia de los componentes con nuestro espacio de nombres:

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

El MVC enfoque de ahora, presumir que el controlador "controla" el estado de la vista y pasa los datos a partir del modelo en la vista.La vista consta sólo de elementos de interfaz de usuario y las propiedades de estilo.Cualquier acción que se realiza en la interfaz de usuario activa un evento, que le dice al controlador para realizar la acción deseada.

Pero, por supuesto, la definición exacta de MVC puede ser diferente de acuerdo a su gusto personal ;)

Answer 3

Esto ayuda también puede: Una estructura básica de cómo organizar un proyecto móvil de titanio: https://github.com/krawaller/Struct

Answer 4

me permite actualizar esta pregunta ya que la mayoría de las respuestas son reemplazadas. En el Q4 de 2012, Appcelerator lanzó la aleación MVC (beta) Marco junto con la última versión IDE y SDK, Titanium Studio 3.0 y 3.0 SDK. Aleación está completamente integrado con el estudio, por lo que es muy fácil conseguir una aplicación básica de funcionamiento en menos de 15 minutos. Aleación introduce una reestructuración significativa carpeta: La carpeta / app es ahora donde todos reside el desarrollo de código.

La / Recursos carpeta, donde el código utilizado para residir, es ahora el equivalente de la / build carpeta actualizada. código compilado en / Recursos se sobrescribe en cada generación.

I creó un manual introductorio corto (screencast) en la creación de un proyecto de aleación. También se puede ver a través de mi carpeta de Dropbox.

Crear proyecto aleación

Answer 5

Parece que Appcelerator hizo su propia Appcelerator MVC en el mercado no he evaluado esto todavía.

Más información: http://johnkalberer.com/2011/09/ 29 / appcelerator-mvc-ejemplo /