読者です 読者をやめる 読者になる 読者になる

しまてく

学んだ技術を書きためるブログ

若手IT勉強会#13

勉強会 wakateit

お題

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

  • jQuery1.3.2のliveHandler周り
  • jsDeferredのnext,wait,call,loopあたり

liveHandler

jQueryのlive関数
http://semooh.jp/jquery/api/events/live/type%2C+fn/


簡単に言うと、指定したセレクタに将来的にマッチするものも対象にする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

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


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

  • parallel
  • wait
  • next
  • call
  • loop
  • repeat


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


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

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


基本的にはこの流れを掴めればwait、next、call、loopは把握できます。
今回は頭が煮えてしまったのでparallelとrepeatは読めませんでした><


まとめ

なんか今回は僕の進め方が非常にぬるぬるでgdgdな進行になってしまったことを反省しています。
jQueryはみんな大体使ったことがあるから何となくわかったけど、jsDeferredに関しては動作を
イメージできないまま呼んだのが敗因。


すごく煮え切らない感じで終わってしまってすいませんでした><

次回予告

2010/1/24(日) 若手IT勉強会#14
http://atnd.org/events/2348