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の中身を返却する

終わり

Share

最近の投稿

NetlifyのSplit TestingとFunctionsについて使い方をまとめる Split TestingはGitHubのブランチをベースにしたA/Bテストを行うための機能のことで、FunctionsはNetlifyでAWS Lambdaを使うことができる

NetlifyとはHTMLなどの静的コンテンツのみで構成されたWebサイトを閲覧できる形で配信するWebサービス GitHubやBitbucket、GitLabなどと連携して使うことができて、リポジトリにプッシュすることで自動でCI/CDを行うことができる、無料枠が豊富で独自ドメインを設定可能

WordPressからJekyll(GitHub Pages)に移行した手順をまとめる。 お金的な事情や使いやすさなどの理由で無料のJekyll+GitHub Pagesに移行した。JekyllとはMarkdown等から静的ページを生成する静的サイトジェネレータ

Scala開発のためにScalaらしさをまとめる 言語設計者の設計思想を元にScalaらしさについてまとめる オブジェクト指向と関数型の融合について

StorybookとはUI開発環境を提供するツール React、React Native、Angular、Vueなどをサポートしている ユーザーは独立した開発環境でコンポーネントを個別に作成して挙動の確認をテストできたり、コンポーネントを一覧にしてカタログ化できるので他の人に紹介する時に使えたりする

カテゴリ一覧

タグ一覧