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

Published: 2016年6月26日 by tomsato

概要

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

終わり

コメントを書く

※ Emailは公開されません

※ コメントは承認されると下記に表示されます

コメント一覧

最近の投稿

社内ツールなどの超小規模なAPIをGolangで実装する際にフレームワークを使うべきかを、実際にnet/httpを使った実装とフレームワークを使った実装を比較することでどれだけ優位性があるかを見ていきたいと思います。今回はフレームワークにはシンプルで使いやすそうなEchoを使うことにします。

vue-pdfを使ってNuxt.jsで作成しているアプリケーションに pdfスライドを表示させるサンプルを作成しました README.md通りに実装してもうまくいかないところがあったのでそのあたり含めてまとめます

Vue.js / Nuxt.jsにおけるログインの実装方法をまとめる Auth0やNuxt.jsのAuth Moduleとmiddlewareについて調べつつサンプルを作成することで理解を深める

コンポーネント設計について考える Atomic DesignやPresentational Component, Container Componentについてまとめつつ 自分だったらVue.js / Nuxt.jsでどういうコンポーネント設計にするかについてまとめます

Netlify Formsを使ってブログサイトにコメント機能を追加する方法を調べたので紹介 Netlify FormsはNetlifyに標準機能として用意されているフォーム機能 サーバレスなので別途コメント用にサーバを用意する必要がなくHTMLを埋め込むだけで準備できる

カテゴリ一覧

タグ一覧