jQuery()の挙動を解読する(16) Event 関連の各種クラスメソッド──jQuery解読(27)

• 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog

jQuery Event 解読 contents
全てのエントリイが ver1.2.2 対応に改訂済みです。

1. Eventオブジェクトの抽象性と特定化・個別化の必要性
2. Event API の概要と $(args).eventtype() メソッド解読
3. $(args).bind()、$(args).one()、$(args).toggle()、$(args).hover() 解読
4. $.event クラスメソッドの概要と $.event.add()、$.data() 解読
5. $.event.handle()、$.event.fix() 解読
6. $(args).trigger()、$(args).triggerHandler()、$.event.trigger() 解読
7. $(args).unbind()、$.event.remove()、$.removeData() 解読
8. $(document).ready(f)、bindReady()、$.ready() 解読
9. $.event.special[t].setup()、$.event.special[t].mouseenter()、$.event.special[t].mouseleave() 解読 (t="type")──これらのメソッドは ver1.2.2 で追加された
10. 終わりに

$.event クラスメソッド 及び イベント処理に係る jQuery クラスメソッド等について

jQuery.js の Event 処理を理解するためには、関連するインスタンスメソッドから呼び出される各種のクラスメソッドや、その中から呼び出される関数を理解しなければなりません。というよりも、Event 関連の全てのインスタンスメソッドが直接・間接的にクラスメソッドを呼び出して定義されているので、jQuery.event クラスメソッドを理解しなければ jQuery.js のイベント処理は全く理解出来ないでしょう。

併せて、jQuery.event クラスメソッドから呼び出される jQuery クラスメソッドも理解しなければなりません。

そこで、ここでいうクラスメソッド等が何を指しているのか、まず明らかにする必要があります。

なお、「イベントハンドラー」という言葉は、イベントオブジェクトを操作するための３つのオブジェクトのセット──イベントタイプ、dataオブジェクト及びイベントハンドラー関数──を指しています。

Event 処理に不可欠な クラスメソッド等一覧

1. $.event.add()…… eventtype()、bind()、one() 及び bindReady() の各インスタンスメソッドから直接・間接的に呼び出される。イベントハンドラーを bind （登録）するメソッドであり、jQuery.jsにおいてイベントを処理するための根幹を為すメソッド。
   なお、このメソッドは他に、clone() インスタンスメソッドからも呼び出される。
2. $.event.remove()……unbind() メソッドから呼び出される。add()より bind されたイベントハンドラーを削除するメソッド。
3. $.event.trigger()…… trigger() 及び triggerHandler() から呼び出されるメソッド。特定した要素ノード（特定されていない場合には全ての要素ノード）において、既に登録されているイベントハンドラーを指定して起動させる。
   なお、このメソッドは AJax 用の２つのクラスメソッド──ajax() 及び handleError()── からも呼び出される。
4. $.event.handle()……add()メソッド及びその中の addEventListner や attachEvent() メソッドによって、DOM読み込み完了時には各種のイベントハンドラーは bind 済みとなる。 handle()メソッドは この bind 済みのイベントが発生した場合に起動されるメソッドであり、data()により定義され、管理される jQuery cache オブジェクト内から、イベント発生毎に対応するハンドラー関数を選択して、実行させるメソッドである。
   ※　非常に分かりにくい説明であるが、簡潔に言うとこうなってしまう。
5. $.event.fix()…… handle() クラスメソッドから呼び出される。イベントオブジェクト及びその各種プロパティをクロスブラウザ対応に正規化する。
6. $.event.special["type"].setup()…… ver 1.2.2 で新設され、type には ready、mouseenter 及び mouseleave の３つのイベントタイプ名が入る。
   setup() はこれらのイベントを登録するメソッドである。
   例えば、$(document).bind("ready",fn) でも $(document).ready(fn) メソッドと同様の効果を得られるよう ver1.2.2 で追加されたが、この場合にこの setup() メソッドが呼び出される。
   また、mouseenter/leave イベントは、setup()メソッドによりIE 以外のブラウザの場合には mouseover/outに置換される。
7. $.event.special["type"].teardown()…… ver 1.2.2 で新設され、 bind() で登録された ready、mouseenter/leave イベント及び mouseover/out イベントを unbind するためのメソッド。
8. $.event.special["type"].handler()…… mouseenter/leaveイベントはIE 以外のブラウザの場合には mouseover/out イベントに置換されてバインドされるが、この時のイベントハンドラー関数で、 event オブジェクトの type プロパティ名置換(mouseover → mouseenter、mouseout → mouseleave)や、mouseenter/leaveイベントハンドラー関数の起動を行う関数。
9. $.data()…… add()、remove() 及び handle() メソッドから呼び出される、イベント処理に欠かせないクラスメソッド。イベントハンドラーの選択・特定化の為に利用する。
10. $.removeData()…… remove() メソッドから呼び出されるイベント処理に欠かせないクラスメソッド。$.data()と対を為すメソッドで選択・特定化されたイベントハンドラーの削除の為に利用される。
11. $.ready()…… jQuery.js 内の数少ない名前付き関数である bindReady() 関数から呼び出される。DOM 読み込みが確かに完了したかどうか確認し、jQuery.readyListプロパティに未実行の登録関数が存在していれば、それを実行する。また memory leak を避けるための処理を行う。

以後のエントリイにおいて、以上のメソッドを全て解読する予定ですが、まずこのエントリイでは add() メソッドと、それを理解するために不可欠な $.data() クラスメソッドを解読します。

▲ToTop

$.event.add() メソッド 【ver1.2.2 で若干改訂された】 解読

タイトルで言うところの「 ver 1.2.2 における若干の改訂 」とは、 $.event.special プロパティの新設（mouseenter/leave 等への対応など）とセットになったイベントバインドに係る部分の変更を指しています。

以下で言う「中域」とは独自に作った用語で、所謂 global でもなく、かといって地域変数でもない名前空間です。それは jQuery.js コード全体を包含する無名関数内における最上位の名前空間を意味しています。他に適当な言葉が見つからないため「中域」としました。

中域変数は jQuery .js 内においてどこからでも利用できる変数であり、同時に jQuery.js 内のメソッドや関数を利用し終えた後にはメモリから消え去り、利用することが出来ない変数です。

jQuery.js 内ではこの空間を Namespaced Spaceと呼んでいます。

中域などと造語せずに、「jQuery名前空間」と呼ぶのが最適かも知れません。

さて、このメソッドは jQuery.js のイベント処理のスタートを切り、かつ根幹を為すメソッドです。このメソッドがイベントハンドラーを目的とする要素に bind（登録）するからです。

1. IEバグ対策など

1804: add: function(elem, types, handler, data) {
　　　　//elem がテキストノードとコメントノードだった場合には何もしない。
1805: 　if ( elem.nodeType == 3 || elem.nodeType == 8 )
1806: 　　return;
1807:
　　　　//IE バグ対策として引数 elem を window とする。
　　　　//なお、window だけではなく各要素の setInterval メソッドが利用出来
　　　　//ない IE とは、どのバージョンなのかは調べ切れていない。

1808: 　// For whatever reason, IE has trouble passing the window object
1809: 　// around, causing it to be cloned in the process
1810: 　if ( jQuery.browser.msie && elem.setInterval != undefined )
1811: 　　elem = window;
1812:

2. guid 番号の設定

地域変数 handler（つまりイベントハンドラー関数）に、ユニークな番号（guid：1 から始まる整数値）を振る。この結果 guid の最終値は、当該頁においてユーザーが登録したイベントハンドラー関数の数マイナス１を表すことになる。（guid には post-increment演算子が利用されているので、値は式適用後には加算されるため）

1813: // Make sure that the function being executed has a unique ID
1814: if ( !handler.guid )
1815: handler.guid = this.guid++;　// =jQuery.event.guid
1816:

3. data 引数が存在する場合の或る措置

　/* data が与えられている時には function(){fn.apply(this, arguments);} を
　 * handler に代入し、handler の data プロパティに data を、guid プロパティ
　 * に guid を、各々代入する。
　 * ここで行っていることは、かなり回りくどい方法を取っているが、要は
　 * 引数 data オブジェクトの引数 handler 関数オブジェクトへの関連づけである。
　 * また handler は後述するように、指定した DOM ノードに type イベントと
　 * セットになって bind 済みのイベントハンドラー関数であり、イベントハンド
　 * ラーリストに登録された関数となる。
1817: // if data is passed, bind to handler
1818: if( data != undefined ) {
1819: // Create temporary function pointer to original handler
1820: var fn = handler;
1821:
1822: // Create unique handler function, wrapped around original handler
1823: handler = function() {
1824: 　// Pass arguments and context to original handler
1825: 　return fn.apply(this, arguments);
1826: };
1827:
1828: // Store data in unique handler
1829: handler.data = data;
1830:
1831: // Set the guid of unique handler to the same of original handler, so it can be removed
1832: handler.guid = fn.guid;
1833: }

4. 固有の要素イベント構造の設定

/* 第一引数として add() の elem を、第二引数として文字列 "events"を与えて
 * $.data() メソッドを実行する。しかし、この結果は undefined となり、論理演算
 * 子 || の働きで、続けて jQuery.data(element, "events", {}) が実行される。
 * こうして jQuery.cache[ id ][ "events" ] に {} が代入され、この空オブジェク
 * トが地域変数 events にも代入される。
 * ここに、id とは $.data() によって定義される uuid 番号であり、イベントが
 * 登録された各々の element 要素に対応する固有の整数値となる。
 * また jQuery.cache[ id ][ "events" ] は、これ以降のコードによってイベント
 * 名やイベントハンドラー関数をそのプロパティとして保有することになるオブ
 * ジェクトである。
 * いずれにせよ、この部分は $.data() クラスメソッドが分からないと全く理解出来
 * ない。そこでエントリイ後半で $.data() クラスメソッド について解読する。
 */
1835: // Init the element's event structure
1836: var events = jQuery.data(elem, "events") || jQuery.data(elem, "events", {}),

/* 次も$.data()メソッドを利用しているので、ここでは結論だけを記す。
 * jQuery.data(element, "handle", function(){･･･} により、地域変数 handle 
 * には jQuery.cache[ id ][ "handle" ] が代入される。ここの id 番号は 上の
 * events に代入された jQuery.cache[ id ][ "events" ] の id と同じ値である。
 * また、jQuery.cache[ id ][ "handle" ] には 1837-1849行までの無名関数が
 * 登録される。
 */
1837: 　handle = jQuery.data(elem, "handle") || jQuery.data(elem, "handle", function(){
1838: 　　// returned undefined or false
1839: 　　var val;　// 地域変数 val の初期値を undefined 又は false とする。
1840:
　　　　　// jQuery が未定義か、triggered が true ならば undefined か false
　　　　　// を返す。こうして、これらのケースの場合に新規のイベントの bind
　　　　　// （登録）が行わなわれないようにしている。
1841: 　　// Handle the second event of a trigger and when
1842: 　　// an event is called after a page has unloaded
1843: 　　if ( typeof jQuery == "undefined" || jQuery.event.triggered )
1844: 　　　return val;
1845:

/* element 要素上で、jQuery.event.handle() メソッドを実行する関数を 地域変数
 * valに代入する。ここでは apply メソッドが実行される訳ではなく、定義され代
 * 入されるだけである。ここに、上の if が成立しなければ、つまり
 * typeof jQuery != "undefined" && !jQuery.event.triggered ならば
 * 1846 行で val 値に代入された関数が、1848 行により地域変数 handle に
 * return される。この val に代入された関数は、イベント発生時に、そのハンド
 * ラー関数を選択・確定し、実行するメソッド jQuery.event.handle() メソッド
 * を呼び出す働きをする。
 */
1846: 　　val = jQuery.event.handle.apply(arguments.callee.elem, arguments);
1847:
1848: 　　return val;
1849: 　});

/* 次のブロックは ver 1.2.1 ではなかった。
 * elem をハンドラー関数のプロパティに代入している。
 * メモリーリークを避けるため、と記されているが、この一行が必要となる具体的
 * な現象や理由は不明にして分からない。
 */ 
1850: // Add elem as a property of the handle function
1851: // This is to prevent a memory leak with non-native
1852: // event in IE.
1853: handle.elem = elem;
1854:

5. イベントハンドラーの管理

/* ver1.2.2 から一度に複数のイベントタイプを登録出来るようになった。
 * 1856 行はその例示である。
 * これにより、同一ハンドラー関数を同一要素の複数イベントタイプに登録したい
 * 場合に、少し簡潔なコード記述が出来るようになった。
 */
1855: // Handle multiple events seperated by a space
1856: // jQuery(...).bind("mouseover mouseout", fn);

/*「Namespaced event handlers」という言葉が登場するが、これは jQuery名前空間
 * 内のイベントハンドラーとでも訳すのが最適だろう。
 * ver1.2 以降の jQuery.js においては、グローバル変数である jQuery 内に、
 * イベントを制御するために、data() メソッドを駆使して jQuery 固有の機構を設け
 * た。それは jQuery.cache オブジェクト内の様々なプロパティを通じてイベント
 * ハンドラーを管理するものである。
 * ここでは、その１つの準備としてカスタムイベントを制御するためのプロパティ
 * として handler 関数に type プロパティを定義し、その値にカスタム type 
 * 文字列を代入している。
 */
1857: jQuery.each(types.split(/\s+/), function(index, type) {
1858: 　// Namespaced event handlers
　　　　// type 文字列から" . "を分割文字として配列を作る。
1859: 　var parts = type.split(".");
1860: 　type = parts[0];　//地域変数 type に type 文字列を代入する
　　　　//カスタム type 文字列を、handler 関数の type プロパティに代入する。
1861: 　handler.type = parts[1];
1862:

/* 当該イベントに既に登録されたイベントハンドラー関数のリストを地域変数
 * handlers に代入する。
 * ここでも $.data() を理解しないと events[type] の具体的な意味は分からない。
 * events[type] は 1836 行の data() メソッドによって生成されるからである。
 * そして、1875-1878行が実行されない限り、（つまりイベントの登録が終わらな
 * い限り）events[type] は undefined となり、その時には空オブジェクトを代入
 * する。これにより当該要素ノードへの type 名別にイベントハンドラー関数を管
 * 理する。
 */
1863: 　// Get the current list of functions bound to this event
1864: 　var handlers = events[type];
1865:
1866: 　// Init the event handler queue
1867: 　if (!handlers) {
1868: 　　handlers = events[type] = {};
1869:

6. イベントハンドラーの bind (登録)

ver1.2.2 における Event 関連コードの大きな改訂の１つはこの部分である。

jQuery.event.special プロパティを新設し、中でブラウザ別に mouseover/out と mouseenter/leave を使い分けているのだが、1873 行はそのことと一体となっている。

この部分では jQuery.event.special に type プロパティが存在しないか、または elem.jQuery.event.special[type].setup() メソッドの返値が false の場合にだけ Listener()などを作動させるようにしている。

まず、special オブジェクト内に存在する type 名は ready と mouseenter/leave だけ（2126-2179）なので、その他の type 名のイベントの時には、1875 行以下が実行される。またブラウザが IE の時には setup()メソッドから false が返されて attachEvent() メソッドが実行される。

他方、IE 以外のブラウザの場合には、複雑な過程を辿る。 setup() メソッド内で、 mouseenter は mouseover に、mouseleave は mouseout に各々イベントタイプ名を変更し、かつ $.event.special.handler()メソッドをハンドラー関数として設定してから、bind() メソッドが再帰呼び出しされる。当然 bind()メソッドからは add() メソッドが再帰呼び出しされるので、二重の入れ子構造で処理を行うことになる。

この入れ子構造における処理過程は、別途 special() メソッド解読で詳細に述べることとする。

1870: 　　// Check for a special event handler
1871: 　　// Only use addEventListener/attachEvent if the special
1872: 　　// events handler returns false
1873: 　　if ( !jQuery.event.special[type] || jQuery.event.special[type].setup.call(elem) === false ) {
1874: 　　　// Bind the global event handler to the element
1875: 　　　if (elem.addEventListener)
1876: 　　　　elem.addEventListener(type, handle, false);
1877: 　　　else if (elem.attachEvent)
1878: 　　　　elem.attachEvent("on" + type, handle);
1879: 　　}
1880: 　}
1881:

/* 登録済みの handler 関数を固有番号に登録する。
 * 1864 行により handlers = events[type] だから、1883 行は
 * handlers = events[type][handler.guid] = handler ; となる。
 * 1888 行では type 名のイベントが登録されたことを global プロパティに記録
 * させている。
 */
1882: 　// Add the function to the element's handler list
1883: 　handlers[handler.guid] = handler;
1884:
1885: 　// Keep track of which events have been used, for global triggering
1886: 　jQuery.event.global[type] = true;
1887: });
1888:
/* 最後にまたしても I E対策である。
 * メモリリークを避けるために elem を空ににしている。
 */
1889: // Nullify elem to prevent memory leaks in IE
1890: elem = null;
1891: },

▲ToTop

$.data(elem,name,data) クラスメソッド

$.data(elem,name,data) の目的あるいは存在理由

jQuery.js は jQuery(args) によって、DOMエレメント集合を要素とする配列を取得します。例えば var tmp = jQuery("p") とすれば、変数 tmp には当該頁の全てのPエレメントノードをその要素とする配列が代入されます。

jQuery.js は、この取得配列から個別のエレメントノードを特定し操作するために、jQuery("p").index(num) や jQuery("p").get(num) などのインスタンスメソッドを用意しています。

また、Pエレメントノードに class 属性が設定すれば jQuery("p.className").get(num) 等により絞り込むことも出来ます。

しかし、これらの既定のメソッドでは、異なる名称のエレメントノードの、（単なる属性ではなく）特定の性質を有する要素集合内の、各要素を特定するには大変面倒な指定が必要となります。そこで考案されたメソッドが $.data() であり、$.remodeData() なのだと、推量します。

このメソッドは find() メソッド内や filter() メソッド内で、第一引数のみを取る data(elment) 形式で利用され id 番号の取得に利用されていますが、これら以外の箇所では全て event を処理するために、２番目以降の引数を与えて使用されています。ですから、このメソッドは event 処理のために導入されたと言っても過言ではないでしょう。

さて、data() メソッドは大変抽象的な内容です。そこで、具体的な内容を知るには event 処理コードにおいてそれが実際に使用されたケースや、その結果としての DOM ツリーを調べることが早道なのではないか、と考えました。実際そうしてみてやっとこのメソッドが理解できたのです。なお、data() メソッドと対を為している removeData() メソッドは 別途取り上げる予定なので、以下では data() メソッドのみを取り上げます。

ある例で event に係る data() メソッドの結果を見てみる

或る Web 頁において、複数のイベントハンドラーを jQuery.js を使って登録し、その直後の DOM ツリーを見てみました。以下の DOM ツリーは jQuery.cache オブジェクトの load イベントと mousemove イベントに係る部分を抜き出したものです。

さて cache オブジェクト内の様々なプロパティは data() メソッドにより作成されたものです。uuid 番号はイベントが登録されたエレメントノードに対応し、それぞれの uuid オブジェクトが必ず２つ──events 及び handle──のプロパティを有しています。そして events オブジェクトは必ず１つ以上のイベントタイプ名のプロパティを持ち、その中に既に bind 済みのイベントハンドラー関数が guid 番号を振られて登録されています。

つまり jQuery.data() メソッドによって作成される jQuery.cache オブジェクトは、必ず
　　jQuery.cache[uuid]["events"][event.type][guid] = event handler function
のような構造となります。

$　　　↓uuid　　 ↓guid
└ cache　　　　　　　object
　　├ 1　　　　　　　object　　//$.data(elm,name) により振られた $(elm) に対応する uuid 番号１のオブジェクト
　　｜ ├ events　　　object　　//$.data(elm,"events") によって設定されたオブジェクト
　　｜ ｜　└ load　　object　　//イベントタイプ名のオブジェクト
　　｜ ｜　　　├ 1 　function　//引数 handler で与えられ、guid番号 1 を割り振られた bind 済みの 関数
　　｜ ｜　　　｜├ guid　1……1560 行で付与された番号
　　｜ ｜　　　｜├ data　undefined……引数 data が付与された場合のdata
　　｜ ｜　　　｜└ type　undefined……eventtype.custum と指定された場合の custum値
　　｜ ｜　　　└ 7 　function　//引数 handler で与えられ、guid番号 7 を割り振られた bind 済みの 関数
　　｜ ｜　　　　├ guid　7
　　｜ ｜　　　　├ data　undefined
　　｜ ｜　　　　└ type　undefined
　　｜ └ handle　　　function　//$.data(elm,"handle") によって設定された関数オブジェクト
　　├ 2　　　　　　　object　　//特定の Elementノードに対応する data() により振られた uuid 番号２のオブジェクト
　　｜ ├ events　　　object　　//data() において name値=eventsで設定されたオブジェクト
　　｜ ｜　└ mousemove　　object　　//イベントタイプ
　　｜ ｜　　　└ 2 　function　//引数 handler で与えられ、guid番号 2 を割り振られた bind 済みの 関数
　　｜ ｜　　　　├ guid　2
　　｜ ｜　　　　├ data　undefined
　　｜ ｜　　　　└ type　undefined
　　｜ └ handle　　　function　//$.data(elm,"handle") によって設定された関数オブジェクト
　　├ 3　･･（以下略）

▲ToTop

上のDOMツリーが作成される過程の説明

1. ユーザーが定義した event 処理関数（ jQuery(function(){})を含む ）があれば、当該頁が開かれる時に jQuery.js の data()メソッドにより イベントがバインドされた各々の Elementノードに対応して uuid 番号が振られ、jQuery.cache オブジェクト内に uuid 名のオブジェクトが生成される。
2. その uuid 番号名のオブジェクトの events プロパティに、イベントタイプ（ 上の場合には load と mousemmove ）プロパティが設定される。
3. そのイベントタイププロパティに、イベントハンドラー関数が guid 番号名のプロパティで登録される。
4. １つの Element に複数のイベントタイプが登録されると、異なる guid 番号のイベントハンドラーが、イベントタイプのプロパティとして登録される。（上の場合には 1 と 7 ）
5. 一方、 uuid 番号が振られたオブジェクトには events プロパティの他に、handle プロパティが設定され、その値として jQuery.js で定義された関数が設定される。この handle プロパティの値である関数こそ、addEventListner()等のメソッドによってイベントハンドラーとして登録され、イベント発生時に駆動される関数となる。

▲ToTop

$.data() コードを分析する【ver1.2.2で変更なし】

　　 /* 中域変数 expando に当該 jQuery.js ファイルが読み込まれた時の時刻を
　　  * 記録し、中域変数 uuid(universal unique ID)と 同 win を初期化する。
　　  * これらの変数は jQuery.js 内の各種メソッドから随時呼び出されて利用さ
　　　* れる。このため uuid は決して重複せず、++uuidにより呼び出される度に
　　　* １ずつ加算される、異なる整数値を提供する。
　　　*/
588: var expando = "jQuery" + (new Date()).getTime(), uuid = 0, win = {};

　　 /* jQuery.cache を空オブジェクトとして定義する。このオブジェクトの中に
　　  * 各種の情報を登録していき、それによるイベントハンドラーの管理を可能
　　  * としている。
　　  */
640: cache: {},

　/* data()メソッド開始
　 * elem が window の場合にはこれを変数 windowData に置き換える。
　 * 次に elem の expando プロパティを 地域変数 id に代入する。
　 * しかし、当該 elem に最初に data() メソッドを適用した場合には
　 * このプロパティは存在しないから id 値は null 値となる。
　 * 一方 elem[ expando ] が存在している場合にはその値がそのまま
　 * id 値となる。
　 */
642: data: function( elem, name, data ) {
643: 　elem = elem == window ?
644　　　　　　windowData :
645　　　　　　elem;
646:
647: 　var id = elem[ expando ];
648:

　/* 或る element に最初に data メソッドを適用した場合には id は null 
　 * 値なので、地域変数 id と elem オブジェクトの expando プロパティに
　 * uuid 番号を代入する。
　 * id が存在すれば（ 同じ element に対して二回以上 data メソッドを
　 * 適用した場合等）何もしない。
　 */
516:　 // Compute a unique ID for the element
517: 　if ( !id )
518: 　　id = elem[ expando ] = ++uuid;
519:

　// name 引数が存在し、かつ jQuery.cache オブジェクトの id 属性が存在
　// しなければ jQuery.cache オブジェクトの id 属性に空オブジェクトを登録する。
653: 　// Only generate the data cache if we're
654:　 // trying to access or manipulate it
655: 　if ( name && !jQuery.cache[ id ] )
656: 　　jQuery.cache[ id ] = {};
657:

　　 　// dataが定義されていれば
　 　　// jQuery.cache[ id ][ name ]プロパティに data を代入する。
　 　　// data が未定義の場合 jQuery.cache[ id ][ name ] は未定義となる。
658: 　// Prevent overriding the named cache with undefined values
659: 　if ( data != undefined )
660: 　　jQuery.cache[ id ][ name ] = data;
661:

　// name引数があれば jQuery.cache[ id ][ name ] を、なければ id 値を返す。
　// この結果 name があって data がない場合には未定義値 undefined が返される。
662: 　// Return the named cache data, or the ID for the element
663: 　return name ?
664: 　　jQuery.cache[ id ][ name ] :
665: 　　id;
666: },

▲ToTop

data() メソッドの要点

1. まず、647行の id = elem[ expando ] = ++uuid; により id 値と elem[ expando ] 値に同一の ++uuid 値が代入されます。かつ、こうして一度 uuid が設定された要素に対しては、650行により異なる uuid は付与されません。
2. 次に、656 行の jQuery.cache[ id ] = {}; により空オブジェクトである cache のid 属性値として空オブジェクトが設定されます。ここでも一旦 jQuery.cache[ id ] = {} が設定されれば、655行により、同じ name 値に対して二度と履行されません。
3. そして引数に data が存在すれば、660 行によってそれが jQuery.cache[ id ][ name ] に代入されます。
   これにより固有の id 値と 任意の name 値によって、或る data を特定できる情報が cache オブジェクトに代入されることになります。
4. 最後に、name があれば data が、name 値がなければ id 番号が return されます。
   これにより任意の element に対して固有の id 値を振ったり、あるいは固有の id 値と任意の name 値に対して data を設定することが出来る訳です。