Comment organiser les fichiers JS dans un projet Appcelerator Titanium

Question

J'ai récemment commencé à créer une application iPhone en utilisant Titanium Appcelerator. Étant donné que l'application est essentiellement tout JS, je avais besoin des conseils sur la façon dont j'organiser ce projet.

Il devient très facile de créer simplement des fichiers longs de procédure pour chaque vue dans l'application. Est-il possible que je peux intégrer MVC ou une structure au projet?

Merci, je l'apprécie. -Tilo

Answer 1

titane lui-même est essentiellement MVC étant donné que votre fichier app.js est le contrôleur principal et chaque vue de la création est la vue et vous passez (ou ensemble) des données de modèle sur la vue.

En titane, vous pouvez décomposer votre application en utilisant quelques beaux mécanismes intégrés:

1. Titanium.include - Titanium.include vous permet d'inclure un ou plusieurs fichiers JS en place un peu comme la directive du compilateur C #include. Vous pouvez mettre des classes et fonctions communes JS dans ce fichier, puis les inclure où vous voulez les importer et disponible.

2. Titanium.UI.createWindow - vous pouvez créer une nouvelle vue en tant que propriété de la nouvelle fenêtre passe dans une URL à un autre contexte JS qui va créer un nouveau sous-contexte JS et vous permettent de maintenir son propre espace variable (mais donnez encore vous accès à votre parent).

En outre, en titane, vous pouvez créer des dossiers qui vous permettent d'organiser logiquement votre application d'une manière qui convient à vous et votre application.

Modifier Aujourd'hui, la méthode Titanium.Include est dépréciée. Comme mentionné dans la documentation, nous devons créer un module CommonJS et utiliser l'instruction require().

Plus d'informations sur cette déclaration: Exigent

Plus d'informations sur les modules: Modules

Answer 2

Comme je ne pas trouver une solution appropriée MVC pour un projet mobile Titanium, je suis venu avec l'approche suivante. Pour les petites applications cela pourrait être trop conçu mais pourrait aider à la maintenance des applications de plus en plus.

Structure de dossier:

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

Pour séparer les vues, les modèles et les contrôleurs d'un espace de noms est nécessaire, donc on doit définir dans les app.js, qui est notre contrôleur principal:

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

Dans les dossiers que nous placer les fichiers JavaScript individuels pour chaque composant. Pour cela, nous pourrions utiliser soit une bibliothèque légère JavaScript POO, comme MooTools ou Prototype ou définir des fonctions simples de JS comme nos objets. Si vous voulez aussi hériter des classes parent, une bibliothèque fait vraiment sens.

Exemples:

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

Après que nous pouvons inclure tous les modèles nécessaires / view / classes de contrôleur avec Ti.include () dans le fichier app.js et référencer les composants avec notre espace de nom:

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

L'approche MVC présumerait maintenant que le contrôleur « contrôle » l'état de la vue et transmet des données du modèle dans la vue. La vue ne se compose que des éléments de l'interface utilisateur et les propriétés de style. Toute action qui est fait dans l'interface utilisateur déclenche un événement, qui indique au contrôleur pour effectuer l'action souhaitée.

Mais bien sûr, la définition exacte de MVC peut être différent en fonction de votre goût personnel;)

Answer 3

Cela peut aussi aider: Une struct de base de la façon d'organiser un projet mobile de titane: https://github.com/krawaller/Struct

Answer 4

Permettez-moi de mettre à jour cette question, car la plupart des réponses sont remplacées. Au 4ème trimestre 2012, Appcelerator a publié le Cadre en alliage MVC (bêta), ainsi que la dernière version IDE et SDK, Titanium Studio 3.0 et le SDK 3.0. Alliage est complètement intégré avec Studio, il est donc assez facile d'obtenir une application de base en cours d'exécution en moins de 15 minutes. Alliage introduit une restructuration de dossier important: Le dossier / app est maintenant où tout le code de développement réside.

/ Ressources dossier , où le code utilisé pour résider, est maintenant l'équivalent mise à jour du dossier / build . Le code compilé / Ressources est écrasé à chaque construction.

J'ai créé une courte introduction primaire (screencast) sur la création d'un projet en alliage. Vous pouvez le consulter via mon dossier Dropbox.

Créer un projet en alliage

Answer 5

On dirait que Appcelerator fait leur propre Appcelerator MVC le marché que je ne l'ai pas évalué ce encore.

Plus d'info: http://johnkalberer.com/2011/09/ 29 / Appcelerator-mvc-exemple /