若手IT勉強会#13 - しまてく

今回は↓のコードリーディングをしました。

簡単に言うと、指定したセレクタに将来的にマッチするものも対象にするbindです。

今回の収穫
・liveは内部的にはdocument Objectに対してbindしている。
・document Objectはclickイベントの発火が他のDOMと違い、右クリックでも反応する。
・つまりliveでclickイベントを対象にしたら右クリックと左クリックを判別しないとだめ。

document Objectのclickイベントの動作は知らなかったー。

きっとはまるポイントだろうなぁ、「なんでだよ！」みたいな。

ちなみに判別は↓の感じでできるです。

$(...).live("click", function(ev){
    if( ev.button == 0 ){
        // 左クリック
    }
    else if( ev.button == 2 ){
        // 右クリック
    }
});

jsDeferredとは、非同期処理をJavaScriptでもなんとかやってしまおうという
ライブラリです。

jsDeferredには↓の6つの関数が用意されています。

このうち今日はwait、next、call、loopを読みました。

ここで大事なのは「グローバルのnext()」と「メソッドとしてのnext()」
の2種類があるということ。

まずグローバルのnextを呼ぶ。
この中でjsDeferredオブジェクトが生成され、returnされる。
1. この時setTimeoutでcallメソッドがキューイングされる。
returnされたjsDeferredオブジェクトに対してnextメソッドで処理を連結していく。
1. ここではnextメソッドが連続して呼ばれるのでまだcallメソッドは発動しない。
2. jsDeferredオブジェクトの"_next"プロパティにどんどん追加される。"_next"がずっと続いていく感じ。
すべてのnextメソッドが終わったらsetTimeoutされてたcallメソッドが発動。
callメソッドは最初のグローバルなnext関数に渡した関数を実行する内部的なfireメソッドを呼ぶ。
fireメソッドは_nextの関数呼び出しを行う。
1. ここで全てが頭から連続で実行される。
2. この時、nextメソッドに渡す関数のなかでjsDeferredオブジェクトを新しく作って返すと、それ以降の連結がそのオブジェクトの"_next"プロパティにすげかえられる。
3. すげかえが起きると_nextのfireの連鎖がいったん切れ、再度setTimeoutでcallメソッドが呼ばれて連鎖が始まる。
4. このタイミングで再描画がされる！