web-dev-qa-db-ja.com

Appcelerator TitaniumプロジェクトでJSファイルを整理する方法

最近AppceleratorのTitaniumを使用してiPhoneアプリケーションの作成を開始しました。アプリケーションは基本的にすべてJSであるため、このプロジェクトをどのように編成するかについていくつかのアドバイスが必要でした。

アプリケーションのビューごとに長い手続きファイルを作成するのは非常に簡単になりつつあります。プロジェクトにMVCまたは何らかの構造を組み込む方法はありますか？

ありがとうございます。 -ティロ

javascriptiphonetitaniumappcelerator
44
Tilo Mitra

Titanium自体は、app.jsファイルがメインコントローラーであり、作成する各ビューがビューであり、ビューに対してモデルデータを渡す（または設定する）場合、基本的にMVCです。

Titaniumでは、Niceの組み込みメカニズムをいくつか使用して、アプリケーションを分解できます。

  1. Titanium.include -Titanium.includeを使用すると、C _#include_コンパイラディレクティブのように、1つ以上のJSファイルを所定の場所に含めることができます。共通の関数とJSクラスをこのファイルに入れて、インポートして使用できる場所にそれらを含めることができます。

  2. Titanium.UI.createWindow -別のJSコンテキストへのURLで新しいウィンドウパスのプロパティとして新しいビューを作成し、新しいJSサブコンテキストを作成して、その維持を可能にすることができます。独自の変数スペース（ただし、親にアクセスできるようにします）。

また、Titaniumでは、自分と自分のアプリケーションに適した方法でアプリケーションを論理的に整理できるフォルダを作成できます。

編集：今日、Titanium.Includeメソッドは非推奨になりました。ドキュメントで言及されているように、CommonJSモジュールを作成し、require()ステートメントを使用する必要があります。

このステートメントの詳細： 必須

モジュールに関する詳細情報： Modules

31
jhaynie

Titaniumモバイルプロジェクトに適したMVCソリューションが見つからなかったため、次のアプローチを考え出しました。小さなアプリの場合、これは過度に設計されている可能性がありますが、成長するアプリケーションを維持するのに役立ちます。

フォルダー構造：

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

ビュー、モデル、コントローラーを分離するには名前空間が必要なので、メインコントローラーであるapp.jsで定義します。

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

フォルダー内には、コンポーネントごとに1つの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アプローチは、コントローラーがビューの状態を「制御」し、モデルからビューにデータを渡すことを前提としています。ビューは、UI要素とスタイル設定のプロパティのみで構成されます。 UIで行われるすべてのアクションはイベントを発生させ、コントローラーに必要なアクションを実行するように指示します。

もちろん、MVCの正確な定義は、個人の好みによって異なる場合があります;）

24
fbrandel

これも役立つかもしれません：Titaniumモバイルプロジェクトを編成する方法の基本構造： https://github.com/krawaller/Struct

6
fbrandel

ほとんどの回答が置き換えられているので、この質問の更新を許可します。 Appceleratorは2012年第4四半期に、最新のIDEおよびSDKリリース、Titanium Studio 3.0およびSDK 3.0とともに、Alloy MVC（ベータ）フレームワークをリリースしました。AlloyはStudioと完全に統合されているため、簡単に15分未満で実行される基本的なアプリを取得します。Alloyは大幅なフォルダーの再構築を導入します：/ appフォルダーには、すべての開発コードが存在します。

/ Resourcesフォルダー（コードが常駐していた）は、/ buildフォルダ。 / Resourcesのコンパイル済みコードは、ビルドごとに上書きされます。

Alloyプロジェクトの作成に関する短い入門書（スクリーンキャスト）を作成しました。あなたは私のドロップボックスフォルダを介してそれを表示することができます。

合金プロジェクトの作成

3
Mike S.

Appceleratorが独自に作成したようです Appcelerator MVC 市場ではまだ評価していません。

詳細： http://johnkalberer.com/2011/09/29/appcelerator-mvc-example/

0
Ryan White