jQueryはいかにしてDOMを取得するか(1)
最近、バイトの隙間時間に、jQueryを廃止してTypeScriptにリプレイスする、というタスクをするようになった。
jQueryのDOMの取得を、Documentを使って書き換える時に、jQueryはいかにしてDOMを取得するか、ということが気になったので少し調べていく。
今回は、そもそもjQueryの$はなんなのか、ということを調べた。
jQueryのコードは、https://code.jquery.com/jquery-3.5.1.jsから入手し、行数を分かりやすくするためにここに置いた
github.com
さっそく、以下のHTMLを用意して、コードを見ていく。
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> </head> <body> <script> console.log($); </script> </body> </html>
このコードの実行結果は、以下のようになる。
ƒ ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery…この実行結果は、153行目で定義されている。
https://github.com/wafuwafu13/jquery-3.5.1/blob/master/jquery-3.5.1.js#L153
// Define a local copy of jQuery jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' // Need init if jQuery is called (just allow error to be thrown if not included) return new jQuery.fn.init( selector, context ); };
実際に返されている部分は、最後の10871行目である。
https://github.com/wafuwafu13/jquery-3.5.1/blob/master/jquery-3.5.1.js#L10871
return jQuery;
これがなぜconsole.log($);で出力できるかというと、10865行目に以下のような処理をされているからである。
https://github.com/wafuwafu13/jquery-3.5.1/blob/master/jquery-3.5.1.js#L10865
window.jQuery = window.$ = jQuery;
だから、console.log(jQuery);としても同じ結果が得られる。
