javascript - proyecto - estructura de carpetas de un sitio web

Cómo organizar archivos JS en un proyecto Appcelerator Titanium

Question

Recientemente comencé a crear una aplicación para iPhone usando Titanium de Appcelerator. Dado que la aplicación es esencialmente todo JS, necesitaba algunos consejos sobre cómo organizar este proyecto.

Se está volviendo muy fácil simplemente crear archivos largos de procedimientos para cada vista en la aplicación. ¿Hay alguna manera de incorporar MVC, o alguna estructura al proyecto?

Gracias lo aprecio. -Tilo

Answer 1

Como no estaba encontrando una solución MVC adecuada para un proyecto móvil de Titanium, se me ocurrió el siguiente enfoque. Para aplicaciones pequeñas, esto podría tener una ingeniería excesiva, pero podría ayudar a mantener aplicaciones en crecimiento.

Estructura de la carpeta:

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

Para separar vistas, modelos y controladores se necesita un espacio de nombres, por lo que lo definimos en app.js, que es nuestro controlador principal:

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

Dentro de las carpetas colocamos archivos únicos de JavaScript para cada componente. Para esto podríamos usar una biblioteca ligera de OOP de JavaScript, como MooTools o Prototype o definir funciones JS simples como nuestros objetos. Si también desea heredar de las clases primarias, 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 eso, podemos incluir todas las clases de modelo / vista / controlador necesarias con Ti.include () en el archivo app.js y hacer referencia a 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 enfoque de MVC ahora supondría que el controlador "controla" el estado de la vista y pasa los datos del modelo a la vista. La vista consta solo de elementos de la interfaz de usuario y propiedades para el estilo. Cualquier acción que se realice en la interfaz de usuario desencadena un evento, que le indica al controlador que realice la acción deseada.

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

Answer 2

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

Answer 3

Parece que Appcelerator creó su propio MVC de Appcelerator en el mercado. Todavía no lo he evaluado.

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

Answer 4

Permítame actualizar esta pregunta ya que la mayoría de las respuestas han sido reemplazadas. En el cuarto trimestre de 2012, Appcelerator lanzó Alloy MVC (beta) Framework junto con el último lanzamiento de IDE y SDK, Titanium Studio 3.0 y SDK 3.0. Alloy está completamente integrado con Studio, por lo que es bastante fácil ejecutar una aplicación básica en menos de 15 minutos. Alloy presenta una reestructuración de carpetas significativa: la carpeta / app es ahora donde reside todo el código de desarrollo.

La carpeta / Resources , donde el código solía residir, ahora es el equivalente actualizado de la carpeta / build . El código compilado en / Recursos se sobrescribe en cada compilación.

Creé una breve introducción (screencast) sobre la creación de un proyecto Alloy. Puedes verlo a través de mi carpeta de Dropbox.

Crear proyecto de aleación

Answer 5

Titanium en sí mismo es esencialmente MVC dado que su archivo app.js es el controlador principal y cada Vista que crea es la vista y pasa (o configura) los datos del modelo contra la vista.

En Titanium, puedes descomponer tu aplicación usando un par de buenos mecanismos integrados:

1. Titanium.include - Titanium.include le permite incluir uno o más archivos JS en su lugar como la directiva del compilador C #include . Puede poner funciones comunes y clases de JS en este archivo y luego incluirlas donde quiera que quiera que se importen y estén disponibles.

2. Titanium.UI.createWindow : puede crear una nueva Vista como una propiedad del nuevo Paso de ventana en una URL a otro contexto JS que creará un nuevo sub-contexto JS y le permitirá mantener su propio espacio variable (pero aún así dar accede de nuevo a su padre).

Además, en Titanium, puede crear carpetas que le permitan organizar lógicamente su aplicación de una manera que sea adecuada para usted y para su aplicación.

Edición: hoy, el método Titanium.Include está en desuso. Como se menciona en la documentación, deberíamos crear un módulo CommonJS y usar la declaración require() .

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

Más información sobre módulos: Modules