TOPシステム開発> jQueryライブラリを解剖する
まるごとJavaScript&Ajax!
JSライブラリ・ラボ - これで君もライブラリ開発者だ!

第2回:jQueryライブラリの内部とonloadイベント記法
著者:川崎 有亮   2007/3/28
1   2  次のページ
jQueryライブラリを解剖する

   完全ではないながらもXPathに対応するなど、使いやすさとスマートな記法で注目度を増しているのが、John ResigさんのリリースするjQueryライブラリです(図2、注3)。
jQueryの配布サイト
図2:jQueryの配布サイト

※注3: http://jquery.com/
本稿では執筆時点の最新版であるバージョン1.0.4を解説しますが、2007年3月現在では、バージョン1.1.2がリリースされています。下記の解説部分は、1.1.2でも同様の処理が実装されています。

   Prototypeライブラリがscript.aculo.usライブラリとの組み合わせで実現していたエフェクト処理の一部も、jQueryではそれ単体のみで対応しており、プログラマにとってWebページを制作する際に必要となる、かゆい所に手が届いた実装が魅力のようです。

   また、jQueryライブラリのソースコードにはJavaScriptプログラミングの最新ノウハウがギッシリと詰まっています。リスト1にjQueryのコードを一部抜粋しましたので、実装方法を解析してテクニックの一部を確認してみましょう。

   Prototypeライブラリは、JavaScriptのプロトタイプチェーンの基本となるObjectオブジェクトを始め、多くのJavaScript標準オブジェクトを拡張して機能を実装しています。それに対してjQueryは、独自のjQueryオブジェクトのみを利用します。例外的にwindow.undefinedの値を上書きしているのを除いて、他のオブジェクトやグローバル変数を汚染しない実装となっています。

リスト1:jQuery.jsソースコード(一部)
リスト1:jQuery.jsソースコード(一部)
(画像をクリックすると別ウィンドウに拡大図を表示します)

  1. jQueryオブジェクトが未定義の場合のみ、続きの処理を行います。何度も初期化処理を行わないための記述です。
  2. undefinedは初期のJavaScriptには存在しませんでした。どのブラウザーでもグローバル変数のunde.nedが利用できるように、上書きして初期化しています。
  3. オブジェクト生成のnew jQuery()でなく、関数呼び出しとしてのjQuery()が呼び出された場合にもオブジェクトを生成して互換性を確保しています。
  4. $()関数が利用できるようにjQueryオブジェクトをコピーして別名定義しています。
  5. jquery.jsのバージョン番号を定義しています。jQuery.fn.jqueryで参照できます。
  6. ブラウザー判定ルーチン。例えば、IEを利用している場合は、jQuery.browser.msieの値がtrueになります。
  7. Firefox・Operaでは、window.onloadを待たずにDOMContentLoadedイベントを先に捕捉します(IE用・Safari用の処理は誌面の都合で省略)
  8. window.onloadイベントなら、どのブラウザーでも動作します。
  9. IEではページ遷移時にイベントが適切にクリアされずにメモリリークが発生する現象が指摘されています。その対策です。
  10. IE 6にはXMLHttpRequestオブジェクトが存在しないため、Microsoft.XMLHTTPにより別名定義しています。

表1:リスト1の解説

1   2  次のページ

川崎 有亮
著者プロフィール
川崎 有亮
1977年東京生まれ。AjaxなどWeb技術のアーキテクト。株式会社かっぺを経て、現在は株式会社リクルート事業開発室に所属。技術評論社「Ajax/実装のための基礎テクニック」(共著)など書籍・雑誌記事の執筆も多数。

Kawa.net xp:http://www.kawa.net/


INDEX
第2回:jQueryライブラリの内部とonloadイベント記法
jQueryライブラリを解剖する
  onloadイベント記法の推移