Como organizar arquivos JS em um projeto de titânio Appcelerator

Question

Recentemente, comecei a criar um aplicativo para iPhone usando o Appcelerator's Titanium. Como o aplicativo é essencialmente todo JS, eu precisava de alguns conselhos sobre como eu deveria organizar este projeto.

Está se tornando muito fácil criar arquivos processuais longos para cada visualização no aplicativo. Existe uma maneira de incorporar o MVC ou alguma estrutura ao projeto?

Obrigado, Eu agradeço. -Tilo

Answer 1

O próprio titânio é essencialmente o MVC, uma vez que seu arquivo app.js é o controlador principal e cada visualização que você cria é a visualização e você passa (ou define) dados do modelo em relação à visualização.

No titânio, você pode decompor seu aplicativo usando alguns mecanismos internos agradáveis:

1. Titanium.include - Titanium.include permite que você inclua um ou mais arquivos JS em prática, como o C #include Diretiva do compilador. Você pode colocar funções comuns e classes JS neste arquivo e depois incluí -las onde deseja que elas sejam importadas e disponíveis.

2. Titanium.ui.createwindow - Você pode criar uma nova visão como uma propriedade da nova janela Pass em um URL para outro contexto de JS que criará um novo subcontexto JS e permitirá que você mantenha seu próprio espaço variável (mas ainda assim lhe dará acesso ao seu pai).

Além disso, no titânio, você pode criar pastas que permitem organizar logicamente seu aplicativo de uma maneira adequada para você e seu aplicativo.

Editar: Hoje, o método Titanium.include está preguiçoso. Conforme mencionado na documentação, devemos criar um módulo Commonjs e usar o require() declaração.

Mais informações sobre esta declaração: Exigir

Mais informações sobre módulos: Módulos

Answer 2

Como eu não estava encontrando uma solução MVC apropriada para um projeto móvel de titânio, criei a seguinte abordagem. Para pequenos aplicativos, isso pode ser super-engenhado, mas pode ajudar para manter as aplicações crescentes.

Estrutura da pasta:

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

Para separar visualizações, modelos e controladores, é necessário um espaço para nome, por isso definimos no app.js, que é o nosso principal controlador:

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

Dentro das pastas, colocamos arquivos JavaScript únicos para cada componente. Para isso, poderíamos usar uma biblioteca Lightweight JavaScript OOP, como MooTools ou Prototype ou definir funções JS simples como nossos objetos. Se você também deseja herdar das classes dos pais, uma biblioteca definitivamente faz sentido.

Exemplos:

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

Depois disso, podemos incluir todas as classes de modelo/visualização/controlador necessárias com ti.include () no arquivo app.js e referenciados os componentes com nosso espaço para nome:

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

A abordagem MVC agora presumiria que o controlador "controla" o estado da visualização e passa dados do modelo para a exibição. A visão consiste apenas em elementos e propriedades da interface do usuário para estilo. Qualquer ação feita na interface do usuário dispara um evento, que diz ao controlador para executar a ação desejada.

Mas é claro, a definição exata de MVC pode ser diferente de acordo com o seu gosto pessoal;)

Answer 3

Isso também pode ajudar: uma estrutura básica de como organizar um projeto móvel de titânio: https://github.com/krawaller/struct

Answer 4

Permita -me atualizar essa pergunta, pois a maioria das respostas é substituída. No quarto trimestre de 2012, o Appcelerator lançou a estrutura do Alloy MVC (Beta), juntamente com o mais recente lançamento do IDE e SDK, o Titanium Studio 3.0 e o SDK 3.0. A liga é completamente integrada ao Studio, por isso é muito fácil fazer um aplicativo básico em execução em menos de 15 minutos. Alloy apresenta uma reestruturação significativa da pasta: o /aplicativo A pasta agora está onde reside todo o código de desenvolvimento.

o /Recursos Pasta, onde o código usado para residir, agora é o equivalente atualizado do /construir pasta. Código compilado em /Recursos é substituído em cada compilação.

Criei um pequeno primer introdutório (Screencast) sobre a criação de um projeto de liga. Você pode visualizá -lo através da minha pasta Dropbox.

Crie projeto de liga

Answer 5

Parece que o Appcelerator fez o seu próprio Appcelerator MVC No mercado, ainda não avaliei isso.

Mais informações: http://johnkalberer.com/2011/09/29/appcelerator-mvc-example/