Wie organisieren JS-Dateien in ein Appcelerator Titanium-Projekt

Da war ich nicht der Suche nach einem angemessenen MVC-Lösung für ein Titanium mobile-Projekt, ich kam mit dem folgenden Ansatz. Für kleine Anwendungen mag dies over-engineered aber helfen könnte, für die Aufrechterhaltung der wachsenden Anwendungen.

Ordner-Struktur:

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

Zur Trennung von views, models und Controller namespace benötigt wird, so definieren wir es in der app.js, was ist unser Haupt-controller:

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

In dem Ordner legen wir eine einzige JavaScript-Dateien für jede Komponente. Für diese könnten wir entweder eine leichte JavaScript-OOP-Bibliothek wie z.B. MooTools oder Prototype oder definieren Sie einfach JS-Funktionen wie unseren Objekten. Wenn Sie wollen auch Erben von übergeordneten Klassen, eine Bibliothek, macht definitiv 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 können wir alle benötigten model/view/controller-Klassen mit Ti.include() in die app.js Datei und verweisen Sie die Komponenten mit unseren namespace:

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

Den MVC-Ansatz würde nun davon ausgehen, dass der controller "kontrolliert" den Status der Ansicht und übergibt die Daten aus dem Modell in den Blick. Die Ansicht besteht nur aus der UI-Elemente und Eigenschaften für das styling. Jede Aktion, die gemacht wird in der Benutzeroberfläche feuert ein Ereignis, das erzählt die controller zum ausführen der gewünschten Aktion.

Aber natürlich die genaue definition von MVC könnte anders sein, nach Ihrem persönlichen Geschmack 😉

InformationsquelleAutor der Antwort fbrandel

Mir erlauben, aktualisieren Sie diese Frage, da die meisten Antworten abgelöst werden. In Q4 2012, Appcelerator veröffentlicht die Legierung MVC (beta -) Frameworks zusammen mit der aktuellen IDE und SDK-Version, Titan-Studio 3.0 und SDK 3.0. Legierung ist vollständig integriert mit dem Studio, es ist also ziemlich einfach, ein basic-app läuft in weniger als 15 Minuten. Legierung stellt eine bedeutende Ordner neu strukturieren: Die /app Ordner ist jetzt da, wo alle die Entwicklung des Programmcodes.

Den /Ressourcen Ordner, in denen code verwendet werden, um Leben, ist nun das aktualisierte äquivalent von der /build Ordner. Kompilierten code in /Ressourcen überschrieben wird bei jedem build.

Erstellte ich mit einem kurzen primer (screencast) auf die Schaffung einer Legierung Projekt. Sie können es über meine dropbox-Ordner.

Erstellen Sie Alloy-Projekt

InformationsquelleAutor der Antwort Mike S.