jQueryのソースコードリーディングメモ – html()関数の流れを追ってみる

■ 目次

  1. 概要
  2. ソースコードリーディングをするための準備
  3. そもそもhtml()って?
  4. ステップ1
  5. ステップ2

■ 概要

勉強がてら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の中身を返却する

終わり


Be First to Comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です