経験は何よりも饒舌

10年後に真価を発揮するかもしれないブログ 

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);としても同じ結果が得られる。

wafuwafu13.hatenadiary.com