jQuery()の挙動を解読する(21) $(document).ready(f)、bindReady()、$.ready() 解読 ──jQuery解読(32)

• 「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. 終わりに

$(document).ready(fn) - bindReady() - $.ready()

$(document).ready(fn) が bindReady() を、そしてそこから $.ready() が呼び出される三層構造で、これらのメソッドが機能します。

それぞれの役割は、順に以下のようになります。

1. $(document).ready(fn)……(1/2) DOM読み込み完了通知イベントの登録（ bindReady()メソッドの実行 ）
2. $(document).ready(fn)……(2/2) DOM 読み込み完了時の fn の実行と DOM 読み込み完了時に実行させる関数の登録、
3. bindReady()……(2) DOM 読み込み完了のチェックと完了時の jQuery.ready()呼び出し
4. jQuery.ready()……(3) DOM 読み込み完了を記録するプロパティの設定、未実行関数の実行、jQuery(document).bind("ready",fn)で登録された関数 fn の実行

以下に順にこれらのメソッドや関数の挙動を解読します。

$(document).ready(fn) メソッド

1. まず、当該ページが開かれつつある段階で bindReady() 関数を呼び出します。
   この関数がブラウザ毎に異なる方法によって DOM ツリーが読み込まれたかどうかをチェックします。
   このbindReady() 関数の呼び出しが終わった後には、$(document).ready(fn) は 次の処理に進みます。
2. 第二に、その時点で jQuery.isReady = true となっているならば（つまり jQuery.ready() メソッドが実行済みならば）、直ぐに fn 関数を実行します。
   なお、bindReady()メソッドは当該ページが unload されるまで、二度と機能することはありません。冒頭の変数 readtyBound によって一度切りの実行しか許されないからです。そこから呼び出される jQuery.ready() メソッドも一度きりの実行です。
   これらの２つのメソッドは当該頁のload完了前に一度だけ機能し、その後は unload され reload されるまでは、働くことはありません。
   つまり、当該ページに設置された２つ目以降の jQuery(document).ready(fn) 実行時には、 jQuery(document).ready(fn) が呼び出す bindReady() メソッドは直ぐに returnを返し、既に実行済みの jQuery.ready() クラスメソッドによって、isReady プロパティが true になっているので、瞬時に所定の関数 fn が実行されることになります。
3. 第三に、その時点で DOM 読み込みが完了していなければ（※）、その return 値を受け取れる形式にして fn 関数を実行待ちリストに登録します。
   

   ※　この時点で DOM 読み込みが完了していない状態とは、bindReady()メソッドが起動されて DOMContentLoaded イベントの発生（またはそれに準じる状態）を待機する状態になり、その後 jQuery.ready() メソッドも起動し終えたものの、まだ DOM 読み込み完了が終わらない期間に発生します。
   DOM ツリーが巨大なほどこの待機時間は長くなる訳です。

呼び出された bindReady() 関数は以下の処理を行います。

Mozilla 系の場合

jQuery.ready() メソッドをイベントハンドラー関数として、DOMContentLoaded イベント（注1）をバインドします。
後は、DOMContentLoaded イベントが発生した時点で jQuery.ready() メソッドが起動され、リストに登録されている関数が実行されます。

IE の場合

DOMContentLoaded イベントを実装しない IE に対して、ver 1.2.2 では新しい trick が使われました。その方法とは、func function 内に try / catch 文を設け、その try 句内で document.documentElement.doScroll("left") を起動してエラーが発生したら、その catch 句内から関数 func の再帰呼び出しを繰り返します。そして doScroll メソッドがエラーを発生しなくなったら、つまり DOMContentLoaded イベントの発生と同状態になったら、jQuery.ready()を起動します。

Opera の場合

addEventListner() 及び DOMContentLoaded イベントを利用しますが、Mozilla 系と異なるのは DOMContentLoaded イベント発生時に直ぐにjQuery.ready()メソッドを起動しないことです。
当該サイトで使用されているスタイルシートの全てが有効になるまで繰り返しチェックし、全てが有効になった時点で jQuery.ready() メソッドを実行します。
こうした手順を踏むのはおそらく、Operaではスタイルシート読み込み完了前に DOMContentLoaded イベントが発生してしまうためだと、推測されます。

safari の場合

safari も DOMContentLoaded イベントをサポートしていません。そしてsafariの場合には以上の３つのブラウザに較べて最も手間を要してDOMContent の Loaded 状態をチェックしています。
まず、document.redayState プロパティがloaded かつ complete になるまでチェックを繰り返します。
それをクリアしたら次に、header タグ内の style タグとlink タグの合計数をカウントさせ、それがdocument.stylesheets.length と一致するまで、そのチェックを繰り返します。
以上２つのチェックを終えた時点でやっと jQuery.ready() メソッドを呼び出します。

window.loaded メソッドの代替

最後に、window.loaded メソッドの代替手段（a fallback）として、addメソッドを使って window 要素に、jQuery.readyメソッドをイベントハンドラー関数とする load イベントを登録します。これはいわば最後の砦、最後の手段を用意したということでしょう。
何らかの理由によりそれまでのチェックの全てが無効だった場合には、window が loaded になった時点で、bindReady() メソッド が jQuery.ready() メソッドを起動させて所定の関数を起動させることになるのですから。

なお jQuery.ready() メソッドによる所定の関数の二重起動の心配はありません。bindReady()関数の冒頭に設置された変数 readyBound がそれを防止してくれます。このメソッドは一度起動されれば、unloadされるまで再び機能することはありません。

bindReady() 関数から呼び出された jQuery.ready() クラスメソッドは、次の処理を行います。

• もし jQuery.isReady プロパティが false のままであれば true に変更します。
• readyList に登録されている関数があれば、これを順次実行します。
• 実行し終えたら readyList プロパティを nullとし、実行を待つ関数リストを空白とします。
• 最後に、ver 1.2.2 で追加された $(document).bind("ready",func) が使用されていれば ready イベントを励起させて、func 関数を実行します。

各種メソッドのコード一覧

jQuery(document).ready(fn) メソッドのコードを表示/隠蔽

2237 ready: function(fn) {
2238 　// Attach the listeners
2239 　bindReady();
2240
2241 　// If the DOM is already ready
2242 　if ( jQuery.isReady )
2243 　　// Execute the function immediately
2244 　　fn.call( document, jQuery );
2245
2246 　// Otherwise, remember the function for later
2247 　else
2248 　　// Add the function to the wait list
2249 　　jQuery.readyList.push( function() { return fn.call(this, jQuery); } );
2250
2251 　return this;
2252 }

▲ToTop

bindReady() 関数のコードを表示/隠蔽

2282:var readyBound = false;
2283:
2284:function bindReady(){
2285: 　if ( readyBound ) return;
2286: 　readyBound = true;
2287:
2288: 　// Mozilla, Opera (see further below for it) and webkit nightlies currently support this event
2289: 　if ( document.addEventListener && !jQuery.browser.opera)
2290: 　　// Use the handy event callback
2291: 　　document.addEventListener( "DOMContentLoaded", jQuery.ready, false );
2292:
2293: 　// If IE is used and is not in a frame
2294: 　// Continually check to see if the document is ready
2295: 　if ( jQuery.browser.msie && window == top ) (function(){
2296: 　　if (jQuery.isReady) return;
2297: 　　try {
2298: 　　　// If IE is used, use the trick by Diego Perini
2299: 　　　// http://javascript.nwbox.com/IEContentLoaded/
2300: 　　　document.documentElement.doScroll("left");
2301: 　　} catch( error ) {
2302: 　　　setTimeout( arguments.callee, 0 );
2303: 　　　return;
2304: 　}
2305: 　// and execute any waiting functions
2306: 　jQuery.ready();
2307: })();
2308:
2309: if ( jQuery.browser.opera )
2310: 　document.addEventListener( "DOMContentLoaded", function () {
2311: 　　if (jQuery.isReady) return;
2312: 　　for (var i = 0; i < document.styleSheets.length; i++)
2313: 　　　if (document.styleSheets[i].disabled) {
2314: 　　　　setTimeout( arguments.callee, 0 );
2315: 　　　　return;
2316: 　　　}
2317: 　　// and execute any waiting functions
2318: 　　jQuery.ready();
2319: 　}, false);
2320:
2321: if ( jQuery.browser.safari ) {
2322: 　var numStyles;
2323: 　(function(){
2324: 　　if (jQuery.isReady) return;
2325: 　　if ( document.readyState != "loaded" && document.readyState != "complete" ) {
2326: 　　　setTimeout( arguments.callee, 0 );
2327: 　　　return;
2328: 　　}
2329: 　　if ( numStyles === undefined )
2330: 　　　numStyles = jQuery("style, link[rel=stylesheet]").length;
2331: 　　if ( document.styleSheets.length != numStyles ) {
2332: 　　　setTimeout( arguments.callee, 0 );
2333: 　　　return;
2334: 　　}
2335: 　　// and execute any waiting functions
2336: 　　jQuery.ready();
2337: 　})();
2338: }
2339:
2340: // A fallback to window.onload, that will always work
2341: jQuery.event.add( window, "load", jQuery.ready );
2342:}
2343:

▲ToTop

jQuery.ready() メソッドのコードを表示/隠蔽

2256: isReady: false,
2257: readyList: [],
2258: // Handle when the DOM is ready
2259: ready: function() {
2260: 　// Make sure that the DOM is not already loaded
2261: 　if ( !jQuery.isReady ) {
2262: 　　// Remember that the DOM is ready
2263: 　　jQuery.isReady = true;
2264:
2265: 　　// If there are functions bound, to execute
2266: 　　if ( jQuery.readyList ) {
2267: 　　　// Execute all of them
2268: 　　　jQuery.each( jQuery.readyList, function(){
2269: 　　　　this.apply( document );
2270: 　　　});
2271:
2272: 　　　// Reset the list of functions
2273: 　　　jQuery.readyList = null;
2274: 　　}
2275:
2276: 　　// Trigger any bound ready events
2277: 　　jQuery(document).triggerHandler("ready");
2278: 　}
2279: }

注１　DOMContentLoaded について

このイベントは Mozilla 系と Opera には実装され、IE とsafari は未実装です。

こちら 第30回　JavaScriptの動作を軽くするための工夫：ITpro が大変参考になります。