概要
勉強がてらjQueryのソースコードを簡単に追ってみた時のメモを記述します
いきなり自分で理解するのは難しいのでgihyoさんの参考サイトを見ながらやっていこうかと思うのでjQuery-1.2.2を使います(だいぶ古いですが…)
http://gihyo.jp/dev/feature/01/jquery
jQuery-1.2.2のソースはこちらになります
http://code.jquery.com/jquery-1.2.2.js
サンプルコードをステップ実行していって処理の流れをやんわり理解します
ソースコードリーディングをするための準備
サンプルコード
以下のhtmlファイルを用意します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.2.2.js"></script>
</head>
<body>
<h1>jQueryの練習</h1>
<script>
$(function() {
console.log($('h1').html());
});
</script>
</body>
</html>
この中で$(‘h1’).html()という処理がどんな風に動いているのかを理解します
step実行の準備
Google Chromeのデベロッパーツールを使ってstep実行を行います
JavaScriptのステップ実行について
そもそもhtml()って？
最初の要素をHTML文字列で返す。組み込みであるinnerHTMLの値と同じ
http://semooh.jp/jquery/api/attributes/html/_/
http://www.webcreativepark.net/jquery/manipulation/html/
準備で用意したhtmlページを表示させるとconsole.logを使っているのでChromeのデベロッパーツールのconsole上にh1の中身である「jQueryの練習」が出力される
■ ステップ1
$(‘h1’) が何をしているのか
まず最初に通るのが以下の行 (19:は19行目という意味)
return new jQuery.prototype.init( selector, context );
init()メソッドを実行してインスタンスを返している
jquery.jsのロード時には定義が行われるだけでjQyery関数か$が呼ばれて初めてjQueryのプロトタイプオブジェクトのinit()が実行されて処理が行われる
ちなみに523行目でjQuery.prototype.init関数オブジェクトのプロトタイプにjQuery関数オブジェクトのプロトタイプを設定している
jQuery.prototype.init.prototype = jQuery.prototype;
こうするとjQuery.prototypeに定義されたメソッドやプロパティを継承するこどで、jQueryライブラリの特徴であるメソッドチェーンを実現している
return new jQuery( context ).find( selector );
selectorにh1が入っている場合にここを通る
initはここで生成したインスタンスを返してinit処理が終了する
一旦contextについてのjQueryオブジェクトを生成してfindメソッドを実行する
しかしcontextは指定してないので$(undefined).find(‘h1’)ということになる
$(undefined).find(‘h1’)が呼ばれるということで($()を実行している)再度ここが呼ばれる
return new jQuery.prototype.init( selector, context );
selector,context共に今度はundefinedの状態でinit関数が実行される
this[0] = selector; this.length = 1; return this;
が実行されてinitが終了
return thisになるので$(undefined).find(‘h1’)は
this.find(‘h1’)となってfind部分が実行される
find: function( selector ) {
var elems = jQuery.map(this, function(elem){
return jQuery.find( selector, elem );
});
findメソッドまで読むと長くなってしまうので割愛するがfindメソッドは選択された要素(this)からh1の要素を選択するメソッド
最終的にconsole.log($(‘h1’))を行ってみると以下の出力がされる
j…y.fn.j…y.init {0: h1, length: 1, prevObject: j…y.fn.j…y.init}
先ほどセットしたthis[0]とthis.lengthが確認できる
■ ステップ2
html()が何をしているのか
html: function( value ) { // value = undefined
return value == undefined ?
(this.length ?
this[0].innerHTML :
null) :
this.empty().append( value );
},
this.lengthが真だったらthis[0].innertHTMLを返却する
$(‘h1’)で
this[0] = selector; this.length = 1;
としているので’h1′.innertHTMLが行われて
html()はh1の中身を返却する
終わり
コメントを書く
コメント一覧