Event Handler を DOM 要素に Bind する時のテクニック

　先週、ついリリースしました。今はアプリの App Store と Play Store の承認を待っています。たぶん大丈夫でしょう。最後のバグは jQuery 関係の Event Handler の Bind です。ある <a> tag のクリックに ScrollTo の jQuery Animation を呼びたかったが、アニメーションが実行されなくて、普通に飛んで行きました。
　詳細を調べてみたら、本来すでに Click に Handler を Bind して、 ScrollTo を呼び出しましたけど、チームの新人さんがそれが知らなくて、別の関数で実現しました。しかも stop(true, true) で前のアニメーションを全てキャンセルして、自分のアニメーションを実行していました。考え方としては問題がありません。ただ、stop() の第二の引数 jumpEnd です。true を渡すと、前のアニーメーションの最後までいきなり実行します。これがバグのルートです。ただ、stop(true) を呼ぶと、普通に正しく実行できました。
　最初は大騒ぎでしたが、問題はどこにも存在するイベントの Bind です。もし、全ての Bind を各ページに譲って、固定の箇所にしたら、たぶん新人さんでも気づくでしょう。たとえば、jQuery.ready() の中、ページの js ファイルに定義するとか。もし複数のページが同じコードが使うなら、main.js の固定場所に 置くとか。
　もう一つはアニメーションの使い方です。むやみに全てのアニメーションをキャンセルするのがどうかと思います。気軽に全てを止めったり、キャンセルしたりすると、思わぬバグに繋がります。
　幸い新人さんがすぐ私に聞いたので、コードはよく知ってるので、すぐ直しました。今後、どこで何をするかを一応ドキュメントにも残したいと思います。
　後、Back End のデータベース Oracle が AWS で他のチームと衝突したので、SQL Server に乗り換えました。後日また詳細を。
　それでは。

jQuery の Why & When

　先日変なコードが見たから、自分の心得をシェアしようと。
　Web App を開発するとき、DOM を操作する必要があるから、一つ悩ますことはブラウザの間に区別が結構あります。最近は良くなりましたけど、IE6、IE7 の時代はひどかったですね。特に MS はあまり W3C を準拠してなかったが、IE の市場シェアは 80% 以上にあって、変なウェブページがいっぱい作られました。そうすると、現在のモダルブラウザ (Chrome, Firefox, Safari, IE9, IE10 など) どうしても対応できなくなっています。それで Quirks モードが出て来て、 IE の Dev tool にモード、ドキュメントモードなど分けわからないメニューアイテムが追加されました。
　じゃ、何で jQuery を使うの？いつ jQuery を使うべきでしょうか？答えは主に左記のことですが、jQuery もいろいろ便利な機能があるから、みんな使っています。注意すべきところはライブラリを使うと、必ずコストが着いてきます。例えば、jQuery のコードがロードする時、ブラウザは１万行ぐらいの JavaScript コードを解釈し、実行する必要があります。大きいウェブページの場合、ロード時間を気になる場合、light jQuery というものもあります。例えば、zepto js. 自分の会社もjQuery が重いから、自前の light jQuery Like lib を作りました。
　まず、複数のブラウザを対応する場合、DOM の操作するとき、できるだけ jQuery を使いましょう。複数のブラウザは Cross-browser と言います。例えば、ウェブページに選択された文字列を取得したい場合、IE では createTextRange を使いますが、Chrome や Firefox にはその関数がありません。option を select に追加したい場合、IE では innterText を使えますが、Firefox にはその属性がありません。（なぜか Chrome にはあります。。。） jQuery の作者 John の話では DOM is a mess. それで jQuery のコードにこれらの区別をカバーするようなコードが結構あります。使うと決めたら、もう全部 jQuery を使うべきだと私は思います。createElement の速度は速いが、その速さはもう jQuery のロードで消耗したから、意味がありません。
　次は開発のスピードをあげるため、CSS の Selector をよく操作する場合、jQuery の関数を使いましょう。Native の JavaScript はそこが難しくて、jQuery の関数はそこをカバーしてくれました。後、CSS の Class name で要素を取得する場合、jQuery の selector も結構便利です。中にはモダルブラウザの querySelector, querySelectorAll が使われてますので、スピード的には速いです。
　後、スピードの要求がさほど高くない場合、jQuery のアニメーション機能や、Event 機能が便利ですので、使いましょう。

　あまり良くないことは Native の JavaScript コードと jQuery を混在して使うことだと、自分は思います。なぜなら、Native の JavaScript 関数は各ブラウザに通用するかは調べるには時間がかかりますし、コードを読むとき一貫性がないというか、メンテが大変だと思います。
　もう一つは、もし一つの要素を高い頻度で使うなら、全局の変数でキャッシュすべきです。なぜなら、 $(".abc") にはコストがあります。$ は実は一つの関数です。後、毎回それを実行すると、メモリー的にはあまり良くないです。
　
　まぁ、いろいろ書きましたけど、いいたいことは、開発前にもし Cross-browser となりましたら、jQuery が便利です。：）