Come organizzare i file JS in un progetto di Appcelerator Titanium

Question

Di recente ho iniziato la creazione di un'applicazione iPhone utilizzando Titanium di Appcelerator. Dal momento che l'applicazione è sostanzialmente tutto JS, avevo bisogno di qualche consiglio su come avrei dovuto organizzare questo progetto.

E 'sempre molto facile da solo creare file lungo procedurali per ogni visualizzazione nell'applicazione. C'è un modo per incorporare MVC, o qualche struttura per il progetto?

Grazie, lo apprezzo. -Tilo

Answer 1

Il titanio stesso è essenzialmente MVC dato che il file app.js è il controller principale e ogni vista si crea è la vista e si passa (o set) i dati del modello contro la vista.

In titanio, è possibile scomporre l'applicazione utilizzando un paio di bella built-in meccanismi:

1. Titanium.include - Titanium.include permette di includere uno o più file JS in luogo molto simile alla direttiva del compilatore C #include. È possibile inserire funzioni comuni e classi JS in questo file e poi includere, se mai si desidera loro importati e disponibili.

2. Titanium.UI.createWindow - è possibile creare una nuova vista come come una proprietà del nuovo passo finestra in un URL in un altro contesto JS che creerà una nuova sotto-contesto JS e consentono di mantenere il proprio spazio variabile (ma ancora si danno accesso di nuovo al vostro genitore).

Inoltre, in titanio, è possibile creare cartelle che consentono di organizzare logicamente la vostra applicazione in un modo che è adatto a voi e la vostra applicazione.

Modifica Oggi, il metodo Titanium.Include è deprecato. Come citato nella documentazione, dovremmo creare un modulo CommonJS e utilizzare l'istruzione require().

Maggiori informazioni su questa affermazione: Richiede

Maggiori informazioni sui moduli: Moduli

Answer 2

Come io non trovavo una soluzione MVC appropriata per un progetto mobile di titanio, mi si avvicinò con il seguente approccio. Per piccole applicazioni questo potrebbe essere sovra-ingegnerizzato, ma potrebbe aiutare per mantenere le applicazioni in crescita.

struttura di cartelle:

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

Per separare opinioni, modelli e controllori è necessario uno spazio dei nomi, così definiamo nelle app.js, che è il nostro controllore principale:

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

All'interno delle cartelle poniamo singoli file JavaScript per ciascun componente. Per questo si potrebbe utilizzare un leggero libreria JavaScript OOP, come MooTools o un prototipo o definire semplici funzioni di JS come i nostri oggetti. Se anche voi volete ereditare dalle classi genitore, una biblioteca rende sicuramente senso.

Esempi:

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

Dopo che possiamo includere tutte le classi di modello / vista / regolatore necessari con Ti.include () nel file app.js e fare riferimento i componenti con il nostro namespace:

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

L'approccio MVC sarebbe ora presumere che il controller "controlli" lo stato di visualizzazione e passa i dati dal modello nella vista. La vista costituita solo da elementi dell'interfaccia utente e le proprietà per styling. Qualsiasi azione che è fatto nell'interfaccia utente attiva un evento, che indica al controllore per eseguire l'azione desiderata.

Ma, naturalmente, la definizione esatta del MVC potrebbe essere diversa in base al vostro gusto personale;)

Answer 3

Anche questo può aiutare: Una base struct di come organizzare un progetto mobile di titanio: https://github.com/krawaller/Struct

Answer 4

consente di aggiornare a questa domanda poiché la maggior parte delle risposte sono state sostituite. Nel 4 ° trimestre 2012, Appcelerator ha rilasciato il MVC Lega (beta) Quadro insieme con l'ultima IDE e il rilascio di SDK, Titanio Studio 3.0 e 3.0 SDK. Lega è completamente integrato con lo Studio, quindi è abbastanza facile da ottenere un'applicazione di base in esecuzione in meno di 15 minuti. Lega introduce una significativa ristrutturazione cartella: la cartella / app è ora in cui tutti i risiede codice lo sviluppo.

Il / Resources , dove il codice utilizzato per risiedere, è ora la cartella equivalente del / build aggiornato. codice compilato in / Resources viene sovrascritto ad ogni generazione.

ho creato un breve innesco introduttivo (screencast) sulla creazione di un progetto di Lega. È possibile visualizzarlo tramite il mio cartella Dropbox.

Crea progetto lega

Answer 5

Si presenta come Appcelerator fatto proprio Appcelerator MVC il mercato non ho valutato questo ancora.

Più informazioni: http://johnkalberer.com/2011/09/ 29 / Appcelerator-MVC-esempio /