元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

jQuery本体の中身を見る

jQueryが使えるようになると、その中身がどのようになっているのか気になります。今更ではありますが、jQuery本体のソースコードを見てみました。量が多いので一行一行まで細かく見られていませんが、全体像を何となく把握できたと思います。

私一人の力では読み解けないので、ある記事を参考にさせて頂きました。そちらの記事では、jQueryのバージョン1.2.2を対象にしていたので、私も同じバージョンのコードを入手しました。参考サイトについては、参考サイトの項目をご覧ください。

jQuery本体の理解に必要な知識

ライブラリの大まかな内容

  • 初期化処理
  • jQueryオブジェクトの定義
  • 内部的に使う関数の定義
  • セレクタに関する処理
  • イベント処理に関する処理
  • Ajaxに関する処理
  • アニメーションに関する処理

発見したこと

jQuery本体は、ローカルスコープ((function(){...})())の中にあります。どのようにしてローカルスコープ内のメソッドにアクセスしているのかが疑問でした。これは、window.$にjQueryを代入することで、外部からjQuery本体にアクセスできるようになっていることが分かりました。

window.$ = jQuery;

実験

前述の考え方から以下のようなコードを試しました。

(function(){

var aaa = "AAA";
console.log(aaa); //イ

})();

console.log(aaa); //ロ

ローカルスコープ内にある(イ)は実行されますが、ローカルスコープ外の(ロ)はエラーになります。ローカルスコープ外からローカルスコープ内にアクセスできるのか、以下のように記述して実験しました。

(function(){

var bbb = {
  b: "BBB",
  c: function(){
    return "CCC";
  }
};

window.$ = bbb;

})();

console.log(window.$);
console.log(window.$.c());

//windowは省略可
console.log($);
console.log($.c());

windowオブジェクトは、ウェブページに於いてグローバルオブジェクト*1なので、window.$からローカルスコープ内のbbbにアクセスできるようになりました。

まとめ

jQuery本体のソースコードを読めるようになるには、JavaScriptの理解が必要です。読み解くのに時間がかかりますが、勉強になります。今は、全体像を何となくしか掴めませんでしたが、改めて読み直したときに新たに分かるところが出てくるのを期待したいです。

ライブラリの中身を読むことで、新たな発見が得られます。今後、自分が作るプログラムの参考になるので、他の方が書いたコードを積極的に読んでいきたいです。

参考サイト