コンテキストとグローバル関数らへんについて
最近JapaScriptの勉強がてら、Titanium mobileつかって趣味でアプリでもつくろうかと思い、悪戦苦闘中。
とりあえずWindowにviewを埋め込んでつくっていくTitaniumの大枠はわかったので、もうちょっと凝ったのつくろうかと思ったらグローバル変数とか名前空間でハマりまくったのでメモ。
#目次
・シングルコンテキストとマルチコンテキストの使い分け
・即時関数の意味がようやく分かりだした
・グローバル変数の導入
#内容
■コンテキスト・マルチコンテキストちょいちょい勉強していると出てくるであろうwindow.url。これをを使って別のファイルにwindowを記述することができます。これがマルチコンテキスト。
メリットとしては、app.jsの肥大化を防いて、メンテしやすいコードがかけること。あと入門書とかがこっちでだいたい書かれているので勉強しやすい。
でもデメリットとして、コンテキストが違うためにおたがいの変数が見えず、画面遷移するとき前の画面のオブジェクトわたしたいとか、グローバルで使う
モジュールをロードしときたいとかできないのが不便。これが結構こまった。
調べてみると、windowオブジェクトに
newWindow = Ti.UI.createWindow title:'hogehoge' backgroundColor:'#fff' url:'hoge.js' hoge:'hoge'
ってやって渡せるらしいので、問題解決ではあるのですが、先のことも考えてこのあたりコンテキストについて調べていて次のシングルコンテキストとやらがあることを知る。
・シングルコンテキストマルチと逆で、window.urlを使わない方法。
デメリットとしてファイルを切り出さないのでメンテしにくいこと、Ti.include()して切り出したとしても、windowが増えていったとき、変数名が衝突してこれまた面倒なことになる。というかなった。
ファイルの肥大化についてはさっき書いた Ti.includeで教科書通り対応。
変数名については即時関数を使って、ブロックスコープで対応するとよいらしい。
参考:[ti.devs.me] window.urlを使わないプログラミング
http://blog.mogya.com/2011/09/tidevsme-windowurl.html
■即時関数
そこで即時関数を使って、ブロックスコープで変数名のかぶりをふせぐ。
即時関数はここがめっちゃ勉強になりました。
「知ってて当然?初級者のためのJavaScriptで使う即時関数(function(){...})()の全て」
http://d.hatena.ne.jp/sandai/20110824/p1
どんなものかというと
(function(){ var hoge = 1; var huga = function (){ return hoge; }; })()
ってやつです。定義と実行を一緒にやるやつです。
よし、これでメンテもしやすく、変数名もかわらず幸せになれる!
と思ったんですがまだ余ったです。
・グローバル変数の導入
includeFile内で即時関数内で定義すると、include先でぜんぜん関数が呼び出せないようです;
なので、include先、またはincludeファイルの先頭でグローバルオブジェクトを宣言しておきます。
tt.UI.create~
って感じでttがグローバルオブジェクト。こちらのコードがシングルコンテキストを美しく使ってて参考になりました。
https://github.com/appcelerator-titans/tweetanium
結局は、画面ごとが独立していて、すべてをグローバルにして管理するまでもないとしてマルチコンテキストを主体に使って、さらにここを参考に1つの画面をつくるのに
・hoge.js(処理)
・hoge_view.js(UI構成)
・hoge_style.js(プロパティ一式を切り出し)
って感じでファイルを分割していこうかということになりました。
最初値は渡せないしコンテキストは思うように扱えずエラーがでるしで、ここまでが長かった。。
勉強不足な初歩的な疑問なんですが、シングルコンテキストってあんなに一度にファイル読み込んでメモリのことって大丈夫なんですかね?
便利そうだけど抜本的に書きなおさなきゃだったのと、サーバーとのやりとりが主でそこまで共通部分が多くなかったので今回はwindowごとにシングルコンテキストっぽいことをして名前が散らばるのを防ぐことにしました。
coffeescriptがやっとなれてきて記述がだいぶ楽になってきた気がする。
以上メモでした。