jQuery Mobileでサイトを作るときの、JSの順番

jQueryを使ったサイトを作るときに、JSを呼び込む順番を間違えるとうまく起動しなかったりする。ここら辺、とりあえず実行して場所を入れ替えたりするなどのトライ＆エラーで経験的にこうしたほうがいいというのがあるんだけど、jQueryMobileの場合はさらにカオスな状況で、まだまだわからないことが多すぎる。

今は、自分でコードを書いては壁にぶち当たり、公開されているjQueryMobileのテンプレートを解析して、なるべく大きな変更なくサイトがつくれるようにしている。で、テンプレートを見ると、ページ遷移するときに、

$(‘#menu3’).bind(‘pageshow’, function(){}

として、そのページごとのJSを読み込むような設定をしていたり、

$(document).bind(“mobileinit”, function(){]

のように、mobileinitを使うと、jQuery Mobileをロードした直後にイベントが読み込めることを発見。

jQuery Mobileにおける自動初期化処理

同じページに、JavaScriptファイルの取り込みの順番もかいてあり、

1．jQuery
2. 自分でカスタマイズしたJS
3. jQuery Mobile

だそうな。

今までは、自分でカスタマイズしたJSを一番最後に呼び込むとおもっていたので、これは大きな収穫だ。

ということで、もくもくがんばります。