2008年11月22日土曜日

jQuery プラグイン : Ajax で読み直してもイベント再登録不要にする

reglib versus JQuery に触発されて
機能としてほしくなったので一部を jQuery で実装してみた。
#Ajax で画面ロードしたときイベント登録しなおしたくない


実装したのは、DOM を再構築してもイベント登録が消えない部分。
DOM 構築までイベントが登録されない点は悪い面と良い面があるのでとりあえず不要かな。

jquery.hijack.js

まだ click イベントでしか動作チェックしてないのでご利用は自己責任でお願いします。
名前を適当につけちゃったので名前も募集してます。

こんな変な実装ダメよとかあったらご指摘いただけるとうれしいです。

===使い方===
・イベント登録
$.hijack.click(selector, function);

click以外のイベントでもOK
selector には イベント対象になる要素を選択するための jQuery のセレクタ を入力
function には イベント発生時の処理を記載する。

例)
$.hijack.click('#click', function(){alert('click!');});

id="click" を持つ要素をクリックすると click! とアラーとを出す。

なお、function は 引数として event オブジェクトをとり、 function 内部での
this は イベント発生したオブジェクトなので、いままで通常のイベント登録で
登録していたものも利用可能(のはず)。


その他メソッド
・イベント登録
$.hijack.bind(event, selector, function);
これでも登録可能、第一引数にイベント名、第二引数以降はセレクタと関数を入れる。

・イベント削除
$.hijack.unbind(event, selector, function);
引数は上と同じ、ただし引数は必須ではない。
引数がない場合、すべてのイベントを削除する。
引数を増やすごとに削除するイベントが制限される。

$.hijack.unbind('click'); ならば click イベントすべて削除
$.hijack.unbind('click', 'a'); ならばアンカータグへの click イベントをすべて削除

と言った感じ

jQuery + IE6 ではまった

Ajax で json を取得して json で持っている HTML 要素と入れ替えようとしたときに
IE6 でだけどうしても重くて仕方なかった。

コードはこんな感じ

function(json){
var html = $(json.html);
$('#main').empty().append(html);
}
#json は HTML のほかにいろいろ入っている

html が小さければ特に問題ないけれども、ある程度以上のHTMLを挿入しようとすると
とたんに重くなってずっと悩んでいた。
#実際 Firefox だと 400ms なところが、IE だと12000ms くらいかかる。

empty が重いのか? append が重いのか?と悩んでいたが、重かったのは $(json.html) の部分。

以下のようにして解決。コードもすっきり。
function(json){
$('#main').html(json.html);
}

それでも大きい HTML だと 1000ms くらいかかるけど、もう仕方ないかなぁ