Wie man JS-Dateien in einem Appcelerator Titanium Projekt organisieren

Question

Ich habe eine iPhone-Anwendung zu schaffen mit Appcelerator Titanium vor kurzem begonnen. Da die Anwendung im Wesentlichen alle JS ist, brauchte ich einige Ratschläge, wie ich dieses Projekt organisieren sollte.

Es ist immer sehr einfach, nur lange Verfahren Dateien in der Anwendung für jede Ansicht erstellen. Gibt es eine Möglichkeit, ich MVC integrieren kann, oder eine Struktur für das Projekt?

Danke, ich schätze es. -Tilo

Answer 1

Titan selbst ist im Wesentlichen MVC gegeben, dass Ihre app.js Datei der Hauptcontroller ist und jede Ansicht erstellen Sie die Ansicht und Sie übergeben (oder Satz) Modelldaten für die Sicht.

In Titanium können Sie zersetzen Ihre Anwendung mit ein paar schönen eingebauten Mechanismen:

1. Titanium.include - Titanium.include können Sie einen oder mehrere JS-Dateien an Ort und Stelle sind ähnlich wie die C #include Compiler-Direktive. Sie können in dieser Datei gemeinsame Funktionen und JS Klassen setzen und sie dann schließen, wo immer Sie wollen sie importiert und zur Verfügung.

2. Titanium.UI.createWindow - können Sie eine neue Darstellung als als Eigenschaft des neuen Fenster Passes in einer URL an einem anderen JS Kontext schaffen, die einen neue JS Unter Kontext erstellen und ermöglichen es Ihnen einen eigenen Variable Raum zu halten (aber immer noch Zugang geben zurück zu Ihren Eltern).

Auch in Titan, können Sie Ordner erstellen, die Ihnen erlauben, logisch Ihre Anwendung in einer Art und Weise zu organisieren, die Sie und Ihre Anwendung geeignet ist.

Edit: Heute ist die Titanium.Include Methode veraltet. Wie in der Dokumentation erwähnt, sollten wir ein Commonjs Modul erstellen und die require() Anweisung verwenden.

Weitere Informationen über diese Aussage: erforderlich

Weitere Informationen über Module: Module

Answer 2

Als ich keine geeignete MVC-Lösung für ein Titanium Mobile Projekt zu finden, kam ich mit dem folgenden Ansatz auf. Für kleine Anwendungen könnte dies overengineered sein, aber für die Aufrechterhaltung der wachsenden Anwendungen helfen könnte.

Ordnerstruktur:

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

Zur Trennung Ansichten, Modelle und Controller ein Namensraum benötigt wird, so dass wir es in dem app.js definieren, was unsere Hauptcontroller sind:

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

Innerhalb des Ordners legen wir einzelne JavaScript-Dateien für jede Komponente. Dafür konnten wir entweder eine leichte JavaScript OOP Bibliothek, wie MooTools oder Prototype verwenden oder einfache JS-Funktionen wie unsere Objekte definieren. Wenn Sie auch von übergeordneten Klassen zu vererben wollen, auf jeden Fall eine Bibliothek macht Sinn.

Beispiele:

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

Danach wir können alle benötigten Model / View / Controller-Klassen mit Ti.include () in der Datei app.js und verweisen auf die Komponenten mit unserem Namespace:

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

Der MVC-Ansatz würde nun davon aus, dass der Controller „steuert“ der Zustand der Ansicht und Daten gehen aus dem Modell in die Ansicht. Die Ansicht besteht nur aus UI-Elementen und Eigenschaften für Styling. Jede Aktion, die in der UI gemacht wird feuert ein Ereignis, das die Steuereinheit zeigt die gewünschte Aktion durchzuführen.

Aber natürlich kann die genaue Definition von MVC anders sein nach Ihrem persönlichen Geschmack;)

Answer 3

Dies kann auch helfen: Eine grundlegende Struktur, wie ein Titan Mobil Projekt zu organisieren: https://github.com/krawaller/Struct

Answer 4

Lassen Sie mich diese Frage zu aktualisieren, da die meisten der Antworten ersetzt werden. Im 4. Quartal 2012 veröffentlicht Appcelerator die Legierung MVC (beta) Rahmen zusammen mit den neuesten IDE und SDK Release, Titanium Studio 3.0 und SDK 3.0. Legierung vollständig mit Studio integriert, so ist es ganz einfach, eine grundlegende app in weniger als 15 Minuten zum Laufen zu bekommen. Alloy stellt einen bedeutenden Ordner Umstrukturierung: Die / app Ordner ist jetzt, wo alle Entwicklungscode befindet.

Die / Ressourcen Ordner, in dem Code zu residieren verwendet wird, ist jetzt die aktualisierte Äquivalent der / build Ordner. Kompilierten Code in / Ressourcen wird bei jedem Build überschrieben.

habe ich einen kurzen Einführungs Primer (Screencasts) auf eine Legierung Projekt. Sie können es über meine Dropbox Ordner anzuzeigen.

erstellen Alloy Projekt

Answer 5

Es sieht aus wie Appcelerator ihre eigenen Appcelerator MVC der Marktplatz ich diese noch nicht bewertet haben.

Weitere Informationen: http://johnkalberer.com/2011/09/ 29 / Appcelerator-Mvc-Beispiel /