TitaniumMobileでrequireとexportsを使ってファイルを分けて書く方法
TitaniumMobileでアプリ開発をする場合、app.jsにコードを書くことになりますが、全てのコードをapp.jsに詰め込むわけにもいかないので、複数のファイルにコードを分割して、app.jsはそれらをまとめる役にするのが基本的なやり方だと思います。
で、今まではTi.includeを使ってファイルを分割してました。ドットインストールで覚えた知識です。
#11 ファイルを分割してみよう | Titanium Mobile入門 - プログラミングならドットインストール |
やり方がシンプルだしこれで良いと思っていたら、どうもこの書き方は非推奨らしい。
マルチコンテキストとかシングルコンテキストだとかよく解ってないのですが、どうやら
『最近のJavaScriptってHTMLの中だけじゃなくて、node.jsみたいにサーバーサイドも書けるし、話がごちゃごちゃするからCommonJSで決めたルールに従おうぜ』
って話らしいです。なにか勘違いしている気がするけどだいたいこんな感じらしいです。
Titanium Mobileで複数のJavaScriptファイルに処理を分ける方法はありますか？ - QA@IT |
困ったときの第一歩は公式サイトから
requireについて書いてあるわかり易いブログとか無いかな〜と思って
[ Titanium require ファイル 分割 ]
とかでググったけど、なかなかストンと一発で理解できない。
いやなんとなくは判るんだけど、自分がプログラミング戦闘力１のゴミなので理解度がイマイチ。
2時間くらい唸って頭を捻って閃いたのが
『Appcelerator公式のResourcesあるやん』
とっても当たり前の話でした。英語なんで無意識に遠ざけてたのかもしれません。Appceleratorのログインパスワードを忘れてちょっと焦ったけど、読んだらだいたいは理解しました。
requireとexportsを使ったJavaScriptファイルの分割方法
このやり方は黒本には書いてなかったような気がするのでまとめます。
view.js
// まずボタンを定義
var button = Ti.UI.createButton({
title:'ボタン',
top:50,
height:50,
width:300,
background:'white'
});
button.addEventListener('click',function(e){
// ゴニョゴニョ
});
var view = Ti.UI.createView({});
view.add(button);
// buttonの乗っかったviewを
// exportsでbuttonViewとして外に放り出す
exports.buttonView = view;
app.js
// view.jsをrequireで受け取って、
// baseViewという変数に突っ込む。
var baseView = require('view');
// require('view.js')ではなく
// require('view')と書く。
var baseWindow = Ti.UI.createWindow({});
baseWindow.add(baseView.buttonView);
// view.jsで作ったviewは
// buttonViewの中に入っているので、
// app.jsから見ると
// baseViewの中の
// buttonViewって事になる（と思う）
baseWindow.open();
単純に、view.jsでボタンの乗っかったビューを定義して、それをapp.jsで受け取ってウィンドウに載せて開く。
自分が判る様に変数名を無駄に変えまくってます。
とりあえずこれで無事に動いたので、ファイルの分割はこれでOKなんだと思ってます。
