AutoPagerizeの動作の流れを追え!

codereading

こんな感じです。というか、こんな感じでよいでしょうか?taizoooさん。

http://d.hatena.ne.jp/os0x/20090508/1241780936

thx!!! os0x


以下、自分のわかりやすいように書き換え中。
function 名まで入れればもっと、わかりやすくなるかな?

source

発火

    1. ページの読み込み
    2. Greasemonkey起動(この辺は省略)
    3. AutoPagerize起動

SITEINFOの読み込み

    1. script に書き込まれている SITEINFO を試す[launchAutoPager(SITEINFO)]
    2. SITEINFO_IMPORT_URLS の SITEINFO を試す(wedata)[SITEINFO_IMPORT_URL.forEach(funciton(i){})]
      1. SITEINFO の期限が切れていた場合、wedataから最新を取得
        1. wedata からの JSON がとれるか見る
          • url で指定してるだけだからオレオレ SITEINFO を JSON で用意できればそれでも OK
        2. json じゃなかったら infogami style の SITEINFO (レガシー部分) が取れるか見る
          • infogami style なオレオレ SITEINFO を用意できればそれでも OK
        3. wedata が落ちてたときの処理(CACHE_EXPIRE を延長)
      2. 期限が切れていなければキャッシュしている SITEINFO を試す
    3. hAutopagerize な microformats な SITEINFO を試す[launchAutoPager([MICROFORMAT])]

SITEINFO のチェック[launchAutoPager]

    1. URLにマッチする SITEINFO があるかチェック
      • 最初に url の正規表現が match するか見てる
        • LDRize みたいに url を XPath 対応にする気はないと swdyh が言っていた
    2. SITEINFOのXPathが機能しているかチェック
      • そんでもって pageElement と nextLink が XPath で要素が取れるかどうかそれぞれ見る
    3. マッチするまで SITEINFO を for ループする
      • とれなかったら終了
    4. AutoPager を呼ぶ

初期化処理 [AutoPager]

    1. 次のページのURL取得
      • getNextURL
        • resolvePath
    2. 差込位置の決定、insertBeforeか、pageElementの最後の次の要素
      • 最後の要素が取れなかったときには text node を作って(document.createTextNode(' '))その前に差し込み位置を作っている
    3. 右上アイコン・ヘルプの設置
      • initIcon, initHelp, viewHelp
      • addEventListener("mouseover", function(){self.viewHelp()}, true)
    4. スクロール監視の開始(マウスイベントで onScroll を呼ぶ)
      • this.scroll - function(){ self.onScroll() }
      • window.addEventListener("scroll", this.scroll, false)
    5. 読み込み開始位置の決定(どこまでスクロールしたら次のページを読み込むかは、ページ全体の高さ、pageElementの位置、BASE_REMAIN_HEIGHTで決まる)
      • remainHeight を計算
        • getPageElementsBottom, getElementBottom, getElementPosition, getScrollHeight
    6. 初期化後、一発目の onScroll を呼ぶ

現在のスクロール位置が、読み込み開始位置を超えていないかチェック。閾値を超えたらリクエストを投げる[AutoPager.onScroll] (※)

    • onScroll が呼び出されるのは 1)初期化後 2)マウスイベント 3)ページを継ぎ足した後
    • var remain = scrollHeight - window.innerHeight = window.scrollY
    • 閾値を越えたら request を呼ぶ

GM_xmlhttpRequestで次のページにリクエストを投げる[AutoPager.request]

    1. 投げる直前に opt に requestFilters 適用
    2. GM_xmlhttpRequest でレスポンスを受けとる
    3. requestLoad を呼ぶ

レスポンスからHTMLテキストを受け取り、そのテキストからドキュメントを作成する(通常、ドキュメントの作成はブラウザが勝手に行うので、JavaScriptでドキュメントを作成することは滅多にない。そういう意味で、AutoPagerizeの肝になる部分。)[AutoPager.requestLoad]

    1. 返ってきたレスポンスに responseFilters 適用
    2. createHTMLDocumentByString で HTML ドキュメントを生成
    3. documentFilters 適用
      • linkFilter (アンカーの相対パスを絶対パスに書き換えるやつ)を documentFilters 適用
      • count chart もここで documentFilters 適用
    4. 作成したドキュメントから pageElement を切り出す[getElementByXPath]
    5. 同じくドキュメントから nextLink を取得[getNextURL]
    6. pageElement が取得できていなかったら停止[terminate]
      • 右上のアイコン表示を青にして、消すだけ
    7. 切り出した要素をページに継ぎ足す[addPage]
    8. filters 適用
    9. ページ継ぎ足し後、一発目の onScroll を呼ぶ
    10. nextLink が取得できていなかったら停止[terminate]
      • 右上のアイコン表示を青にして、消すだけ
      • ここの順番が、onScroll を呼んどいてからなのはなんでだろう?

(※) に戻る

細かいところはわからないので核心部分の流れだけ、一応、全部追ってみた。結構かかった。遊び、あそびで一週間。こんどはこれを整理整頓するのと、個々個々の部分のコードを追ってみるというのをやってみるかな。



あわせて読む。