Как организовать файлы JS в проекте Appcelerator Titanium - PullRequest
44 голосов
/ 04 апреля 2010

Я недавно начал создавать приложение для iPhone, используя Applelerator's Titanium. Поскольку приложение по сути все JS, мне понадобился совет, как мне организовать этот проект.

Становится очень просто создавать длинные процедурные файлы для каждого представления в приложении. Есть ли способ, которым я могу включить MVC или какую-то структуру в проект?

Спасибо, я ценю это. -Tilo

Ответы [ 5 ]

31 голосов
/ 07 апреля 2010

Сам Titanium по сути является MVC, учитывая, что ваш файл app.js является основным контроллером, а каждое создаваемое вами представление является представлением, и вы передаете (или устанавливаете) данные модели для этого представления.

В Titanium вы можете разложить ваше приложение, используя несколько хороших встроенных механизмов:

  1. Titanium.include - Titanium.include позволяет включать один или несколько файлов JS на место, во многом аналогично директиве компилятора C #include. Вы можете поместить в этот файл общие функции и классы JS, а затем включать их в любое место, где вы хотите, чтобы они были импортированы и доступны.

  2. Titanium.UI.createWindow - вы можете создать новое представление как свойство нового окна, передав URL-адрес другому контексту JS, который создаст новый субконтекст JS и позволяют вам поддерживать свое собственное переменное пространство (но все же дают вам доступ обратно к вашему родителю).

Кроме того, в Titanium вы можете создавать папки, которые позволят вам логически организовать приложение так, чтобы оно подходило вам и вашему приложению.

Редактировать: Сегодня метод Titanium.Include устарел. Как упомянуто в документации, мы должны создать модуль CommonJS и использовать оператор require().

Дополнительная информация об этом утверждении: Требуется

Больше информации о модулях: Модули

24 голосов
/ 02 мая 2011

Поскольку я не нашел подходящего MVC-решения для мобильного проекта Titanium, я предложил следующий подход. Для небольших приложений это может быть слишком сложно, но может помочь в поддержке растущих приложений.

Структура папок:

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

Для разделения видов, моделей и контроллеров необходимо пространство имен, поэтому мы определяем его в app.js, который является нашим основным контроллером:

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

В папках мы размещаем отдельные файлы JavaScript для каждого компонента. Для этого мы могли бы использовать легковесную библиотеку JavaScript OOP, такую ​​как MooTools или Prototype, или определить простые функции JS в качестве наших объектов. Если вы также хотите наследовать от родительских классов, библиотека определенно имеет смысл.

Примеры:

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

После этого мы можем включить все необходимые классы модели / вида / контроллера с помощью Ti.include () в файл app.js и ссылаться на компоненты в нашем пространстве имен:

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

Подход MVC теперь предполагает, что контроллер «контролирует» состояние представления и передает данные из модели в представление. Представление состоит только из элементов пользовательского интерфейса и свойств для стиля. Любое действие, выполненное в пользовательском интерфейсе, вызывает событие, которое сообщает контроллеру о необходимости выполнения желаемого действия.

Но, конечно, точное определение MVC может отличаться в зависимости от вашего личного вкуса;)

6 голосов
/ 02 мая 2011

Это также может помочь: Базовая структура организации мобильного проекта Titanium: https://github.com/krawaller/Struct

3 голосов
/ 25 февраля 2013

Позвольте мне обновить этот вопрос, так как большинство ответов заменены. В четвертом квартале 2012 года Appcelerator выпустил платформу Alloy MVC (beta), а также последние версии IDE и SDK, Titanium Studio 3.0 и SDK 3.0. Alloy полностью интегрирован со Studio, поэтому довольно просто запустить основное приложение менее чем за 15 минут. Alloy представляет существенную реструктуризацию папок: папка / app теперь находится там, где находится весь код разработки.

Папка / Resources , в которой находился код, теперь является обновленным эквивалентом папки / build . Скомпилированный код в / Resources перезаписывается при каждой сборке.

Я создал краткий вводный учебник (скринкаст) по созданию проекта Alloy. Вы можете просмотреть его в моей папке dropbox.

Создание проекта Alloy

0 голосов
/ 10 апреля 2012

Похоже, что Appcelerator сделал свой собственный Appcelerator MVC на рынке. Я еще не оценил это.

Подробнее: http://johnkalberer.com/2011/09/29/appcelerator-mvc-example/

...